'use client'

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

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

export default function ExportValidationModal({
  issues,
  onExportAnyway,
  onCancel,
}: ExportValidationModalProps) {
  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">
          <h2 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
            Undefined References Found
          </h2>
          <p className="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
            The following nodes reference characters or variables that are no longer defined.
          </p>
        </div>

        <div className="max-h-[50vh] overflow-y-auto px-6 py-4">
          <ul className="space-y-3">
            {issues.map((issue, index) => (
              <li
                key={`${issue.nodeId}-${issue.referenceId}-${index}`}
                className="rounded-md border border-orange-200 bg-orange-50 px-3 py-2 dark:border-orange-800 dark:bg-orange-950"
              >
                <div className="flex items-center gap-2">
                  <span className="inline-flex items-center rounded bg-zinc-200 px-1.5 py-0.5 text-xs font-medium text-zinc-700 dark:bg-zinc-700 dark:text-zinc-300">
                    {issue.nodeType}
                  </span>
                  <span className="inline-flex items-center rounded bg-orange-200 px-1.5 py-0.5 text-xs font-medium text-orange-800 dark:bg-orange-800 dark:text-orange-200">
                    undefined {issue.referenceType}
                  </span>
                </div>
                <p className="mt-1 truncate text-sm text-zinc-700 dark:text-zinc-300">
                  {issue.contentSnippet}
                </p>
              </li>
            ))}
          </ul>
        </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>
  )
}