import { ExternalLink } from 'lucide-react';

import { useEffect } from 'react';

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

import EditorialPageHeader from '@/Components/layout/EditorialPageHeader';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/Components/ui/card';
import { Label } from '@/Components/ui/label';
import { LoadingButton } from '@/Components/ui/loading-button';
import { Switch } from '@/Components/ui/switch';
import { useFlashToasts } from '@/hooks/useFlashToasts';
import DashboardLayout from '@/Layouts/DashboardLayout';
import { trackProductEvent } from '@/lib/analytics';
import { FEATURE_USED, SETTINGS_PRIVACY_VIEWED } from '@/lib/event-catalog';
import { formatDateOnly } from '@/lib/format';

interface ConsentData {
  analytics: boolean;
  marketing: boolean;
  consented_at: string | null;
}

interface PrivacyProps {
  consent: ConsentData | null;
}

export default function Privacy({ consent }: PrivacyProps) {
  // F4UXA-013: analytics parity with sibling settings pages
  useEffect(() => {
    trackProductEvent(SETTINGS_PRIVACY_VIEWED);
    trackProductEvent(FEATURE_USED, { feature: 'settings_privacy' });
  }, []);

  // F4UXA-013: explicit save confirmation via flash toasts
  useFlashToasts();

  const { data, setData, patch, processing } = useForm({
    analytics: consent?.analytics ?? false,
    marketing: consent?.marketing ?? false,
  });

  const submit = (e: React.FormEvent) => {
    e.preventDefault();
    patch(route('privacy-settings.update'));
  };

  return (
    <DashboardLayout>
      <Head title="Privacy Settings" />
      <EditorialPageHeader
        title="Privacy Settings"
        subtitle="Manage your cookie preferences."
      />
      <div className="container py-8">
      <div className="space-y-6 max-w-2xl">
        <Card>
          <CardHeader>
            <CardTitle>Cookie Preferences</CardTitle>
            <CardDescription>
              Choose which cookies you allow us to set. Strictly necessary cookies cannot be
              disabled.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <form onSubmit={submit} className="space-y-6">
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <div>
                    <Label className="font-medium">Strictly Necessary</Label>
                    <p className="text-sm text-muted-foreground">
                      Required for the site to function. Cannot be disabled.
                    </p>
                  </div>
                  <Switch checked disabled aria-label="Strictly necessary cookies — always on" />
                </div>

                <div className="flex items-center justify-between">
                  <div>
                    <Label htmlFor="analytics" className="font-medium">
                      Analytics
                    </Label>
                    <p className="text-sm text-muted-foreground">
                      Helps us understand how you use the product to improve it.
                    </p>
                  </div>
                  <Switch
                    id="analytics"
                    checked={data.analytics}
                    onCheckedChange={(v) => setData('analytics', v)}
                  />
                </div>

                <div className="flex items-center justify-between">
                  <div>
                    <Label htmlFor="marketing" className="font-medium">
                      Marketing
                    </Label>
                    <p className="text-sm text-muted-foreground">
                      Enables personalised recommendations and relevant offers.
                    </p>
                  </div>
                  <Switch
                    id="marketing"
                    checked={data.marketing}
                    onCheckedChange={(v) => setData('marketing', v)}
                  />
                </div>
              </div>

              {consent?.consented_at && (
                <p className="text-xs text-muted-foreground">
                  Last updated: {formatDateOnly(consent.consented_at)}
                </p>
              )}

              <LoadingButton type="submit" loading={processing}>
                Save Preferences
              </LoadingButton>
            </form>
          </CardContent>
        </Card>

        {/* R3UXA-007: direct shortcuts to DSAR form and account-delete section */}
        <div className="rounded-md border border-border bg-muted/30 p-4 space-y-3 text-sm">
          <p className="font-medium text-foreground">Your data rights</p>
          <div className="space-y-2">
            <div>
              <Link
                href={route('privacy.dsar.show')}
                className="inline-flex items-center gap-1.5 font-medium text-primary underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm"
              >
                Request a copy of your data or delete your account
                <ExternalLink className="size-3.5" aria-hidden />
              </Link>
              <p className="text-xs text-muted-foreground mt-0.5">
                Submit a GDPR data access or erasure request — we respond within 30 days.
              </p>
            </div>
            <div>
              <Link
                href={route('profile.edit') + '#danger-zone'}
                className="inline-flex items-center gap-1.5 font-medium text-destructive underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm"
              >
                Delete your account immediately
              </Link>
              <p className="text-xs text-muted-foreground mt-0.5">
                Permanently removes your account and all associated data.
              </p>
            </div>
          </div>
          <p className="text-xs text-muted-foreground">
            For a full explanation of what data we store and how long it is retained, see{' '}
            <Link href="/docs/your-data-and-privacy" className="underline hover:text-foreground">
              Your data &amp; privacy
            </Link>
            .
          </p>
        </div>
      </div>
      </div>
    </DashboardLayout>
  );
}
