import { CheckCircle2, Mail } from 'lucide-react';

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

import { Alert, AlertDescription, AlertTitle } from '@/Components/ui/alert';
import { Button } from '@/Components/ui/button';
import AuthLayout from '@/Layouts/AuthLayout';

interface UnsubscribedProps {
  siteName: string;
}

export default function Unsubscribed({ siteName }: UnsubscribedProps) {
  return (
    <AuthLayout>
      <Head title="Unsubscribed from email notifications" />
      <div className="space-y-8">
        <div className="text-center lg:text-left space-y-3">
          <div className="mx-auto lg:mx-0 flex h-12 w-12 items-center justify-center rounded-full bg-success/10">
            <CheckCircle2 className="size-6 text-success" />
          </div>
          <div>
            <h2 className="text-2xl md:text-3xl font-bold text-foreground">
              You've been unsubscribed
            </h2>
            <p className="mt-2 text-muted-foreground">
              You will no longer receive email digests for <strong>{siteName}</strong>.
            </p>
          </div>
        </div>

        <Alert
          className="border-success/30 bg-success/10 text-success-strong"
          role="alert"
          aria-live="polite"
        >
          <Mail className="size-4 text-success" />
          <AlertTitle>Email notifications disabled</AlertTitle>
          <AlertDescription>
            All email digest notifications for this site have been turned off. You can re-enable
            them at any time from your notification settings.
          </AlertDescription>
        </Alert>

        <div className="rounded-lg border bg-muted/50 p-4 text-sm text-muted-foreground">
          <p className="font-medium text-foreground mb-2">What happens next?</p>
          <ul className="list-disc list-inside space-y-1">
            <li>You won't receive daily, weekly, or monthly digest emails</li>
            <li>You can still view analysis results in your dashboard</li>
            <li>Re-enable notifications anytime from your site settings</li>
          </ul>
        </div>

        <Button variant="default" asChild className="w-full" size="lg">
          <Link href={route('welcome')}>Return to Home</Link>
        </Button>
      </div>
    </AuthLayout>
  );
}
