'use client'

export type ValidationIssue = {
  nodeId: string
  nodeType: 'dialogue' | 'choice' | 'variable' | 'edge'
  contentSnippet: string
  undefinedReference: string
  referenceType: 'character' | 'variable'
}

type ExportValidationModalProps = {
  issues: ValidationIssue[]
  onExportAnyway: () => void
  onCancel: () => void
}

export default function ExportValidationModal({
  issues,
  onExportAnyway,
  onCancel,
}: ExportValidationModalProps) {
  const characterIssues = issues.filter((i) => i.referenceType === 'character')
  const variableIssues = issues.filter((i) => i.referenceType === 'variable')

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
      <div className="mx-4 w-full max-w-lg rounded-lg bg-white shadow-xl dark:bg-zinc-800">
        <div className="border-b border-zinc-200 px-6 py-4 dark:border-zinc-700">
          <div className="flex items-center gap-2">
            <svg
              className="h-5 w-5 text-orange-500"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"
              />
            </svg>
            <h2 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
              Export Validation Issues
            </h2>
          </div>
          <p className="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
            {issues.length} undefined reference{issues.length !== 1 ? 's' : ''} found. These nodes/edges reference characters or variables that no longer exist.
          </p>
        </div>

        <div className="max-h-[50vh] overflow-y-auto px-6 py-4">
          {characterIssues.length > 0 && (
            <div className="mb-4">
              <h3 className="mb-2 text-sm font-medium text-zinc-700 dark:text-zinc-300">
                Undefined Characters
              </h3>
              <ul className="space-y-2">
                {characterIssues.map((issue, idx) => (
                  <li
                    key={`char-${idx}`}
                    className="rounded border border-orange-200 bg-orange-50 p-3 dark:border-orange-800 dark:bg-orange-950"
                  >
                    <div className="flex items-start justify-between gap-2">
                      <div className="min-w-0">
                        <span className="inline-block rounded bg-blue-100 px-1.5 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-900 dark:text-blue-300">
                          {issue.nodeType}
                        </span>
                        <p className="mt-1 truncate text-sm text-zinc-700 dark:text-zinc-300">
                          {issue.contentSnippet}
                        </p>
                      </div>
                      <span className="shrink-0 text-xs text-orange-600 dark:text-orange-400">
                        ID: {issue.undefinedReference.slice(0, 8)}...
                      </span>
                    </div>
                  </li>
                ))}
              </ul>
            </div>
          )}

          {variableIssues.length > 0 && (
            <div>
              <h3 className="mb-2 text-sm font-medium text-zinc-700 dark:text-zinc-300">
                Undefined Variables
              </h3>
              <ul className="space-y-2">
                {variableIssues.map((issue, idx) => (
                  <li
                    key={`var-${idx}`}
                    className="rounded border border-orange-200 bg-orange-50 p-3 dark:border-orange-800 dark:bg-orange-950"
                  >
                    <div className="flex items-start justify-between gap-2">
                      <div className="min-w-0">
                        <span className="inline-block rounded bg-blue-100 px-1.5 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-900 dark:text-blue-300">
                          {issue.nodeType}
                        </span>
                        <p className="mt-1 truncate text-sm text-zinc-700 dark:text-zinc-300">
                          {issue.contentSnippet}
                        </p>
                      </div>
                      <span className="shrink-0 text-xs text-orange-600 dark:text-orange-400">
                        ID: {issue.undefinedReference.slice(0, 8)}...
                      </span>
                    </div>
                  </li>
                ))}
              </ul>
            </div>
          )}
        </div>

        <div className="flex justify-end gap-3 border-t border-zinc-200 px-6 py-4 dark:border-zinc-700">
          <button
            onClick={onCancel}
            className="rounded border border-zinc-300 bg-white px-4 py-2 text-sm font-medium text-zinc-700 hover:bg-zinc-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-600 dark:focus:ring-offset-zinc-800"
          >
            Cancel
          </button>
          <button
            onClick={onExportAnyway}
            className="rounded bg-orange-500 px-4 py-2 text-sm font-medium text-white hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-zinc-800"
          >
            Export anyway
          </button>
        </div>
      </div>
    </div>
  )
}