import { Link, useForm } from '@inertiajs/react';

import { Button } from '@/Components/ui/button';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from '@/Components/ui/dialog';
import { LoadingButton } from '@/Components/ui/loading-button';

interface BundledAiConsentModalProps {
  open: boolean;
  onClose: () => void;
  onConsentGranted?: () => void;
}

export default function BundledAiConsentModal({
  open,
  onClose,
  onConsentGranted,
}: BundledAiConsentModalProps) {
  const form = useForm({ consent_type: 'bundled_ai_processing' as const });

  const handleAgree = () => {
    form.post(route('ai-consent.store'), {
      onSuccess: () => {
        onConsentGranted?.();
      },
    });
  };

  const handleDecline = () => {
    onClose();
  };

  return (
    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
      <DialogContent
        className="max-w-md"
        aria-labelledby="consent-modal-title"
      >
        <DialogHeader>
          <DialogTitle id="consent-modal-title">AI Content Processing</DialogTitle>
          <DialogDescription>
            To generate AI drafts, your page content will be sent to OpenAI for processing.
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-4 pt-1">
          <p className="text-sm text-muted-foreground">
            RankWiz uses OpenAI&apos;s API with data opt-out enabled — your content is not used for
            AI training.
          </p>

          <div>
            <p className="text-sm font-medium mb-1">Content processed:</p>
            <ul className="text-sm text-muted-foreground space-y-1 list-none">
              <li className="flex items-start gap-2">
                <span className="mt-1.5 h-1.5 w-1.5 rounded-full bg-muted-foreground shrink-0" />
                Page text from your WordPress site
              </li>
              <li className="flex items-start gap-2">
                <span className="mt-1.5 h-1.5 w-1.5 rounded-full bg-muted-foreground shrink-0" />
                AI prompt with rewrite instructions
              </li>
            </ul>
          </div>

          <p className="text-xs text-muted-foreground">
            You can revoke this consent anytime in{' '}
            <Link href={route('settings.ai')} className="underline hover:no-underline">
              Settings &rarr; AI
            </Link>
            .
          </p>

          {form.hasErrors && (
            <p className="text-sm text-destructive">
              {form.errors.consent_type ?? 'Something went wrong. Try again.'}
            </p>
          )}

          <LoadingButton
            loading={form.processing}
            loadingText="Saving..."
            className="w-full"
            onClick={handleAgree}
          >
            I agree — Generate AI Drafts
          </LoadingButton>

          <Button variant="ghost" className="w-full" onClick={handleDecline}>
            Not now — continue without AI drafts
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
}