import { FormEvent } from 'react';

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

import { MarketingFooter } from '@/Components/marketing/MarketingFooter';
import { MarketingNav } from '@/Components/marketing/MarketingNav';
import { Input } from '@/Components/ui/input';
import { Label } from '@/Components/ui/label';
import { LoadingButton } from '@/Components/ui/loading-button';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/Components/ui/select';
import { Textarea } from '@/Components/ui/textarea';

interface DataRequestProps {
  canLogin: boolean;
  canRegister: boolean;
}

interface DsarFormData {
  name: string;
  email: string;
  request_type: string;
  verification_details: string;
}

type DataRequestComponent = ((props: DataRequestProps) => JSX.Element) & {
  disableGlobalUi?: boolean;
};

const DataRequest: DataRequestComponent = ({ canLogin, canRegister }) => {
  const appName = import.meta.env.VITE_APP_NAME || 'RankWiz';

  const { data, setData, post, processing, errors, wasSuccessful, reset } =
    useForm<DsarFormData>({
      name: '',
      email: '',
      request_type: '',
      verification_details: '',
    });

  const submit = (e: FormEvent) => {
    e.preventDefault();
    post(route('privacy.dsar.store'), {
      onSuccess: () => reset(),
    });
  };

  return (
    <>
      <Head title="Data Subject Access Request">
        <meta
          name="description"
          content={`Submit a GDPR data subject access request to ${appName}. Request access to, deletion, or rectification of your personal data.`}
        />
      </Head>

      <div className="min-h-screen bg-background flex flex-col">
        <MarketingNav canLogin={canLogin} canRegister={canRegister} />

        <main className="flex-1 py-16">
          <div className="max-w-2xl mx-auto px-4 sm:px-6">
            <div className="mb-8">
              <h1 className="text-3xl font-bold text-foreground">
                Data Subject Access Request
              </h1>
              <p className="mt-3 text-muted-foreground">
                Under GDPR Article 12, you have the right to request access to,
                deletion of, or rectification of your personal data. Complete
                the form below and we will respond within 30 days.
              </p>
            </div>

            {wasSuccessful && (
              <div className="mb-6 rounded-lg border border-success bg-success/10 px-4 py-3 text-sm text-success-foreground">
                Your request has been received. We will process it within 30
                days and respond to your email address.
              </div>
            )}

            <div className="rounded-lg border border-border bg-card p-6 shadow-sm">
              <form onSubmit={submit} className="space-y-6" noValidate>
                <div className="space-y-2">
                  <Label htmlFor="name">Full Name</Label>
                  <Input
                    id="name"
                    type="text"
                    value={data.name}
                    onChange={(e) => setData('name', e.target.value)}
                    placeholder="Your full name"
                    autoComplete="name"
                    aria-describedby={errors.name ? 'name-error' : undefined}
                    aria-invalid={!!errors.name}
                  />
                  {errors.name && (
                    <p id="name-error" className="text-sm text-destructive">
                      {errors.name}
                    </p>
                  )}
                </div>

                <div className="space-y-2">
                  <Label htmlFor="email">Email Address</Label>
                  <Input
                    id="email"
                    type="email"
                    value={data.email}
                    onChange={(e) => setData('email', e.target.value)}
                    placeholder="you@example.com"
                    autoComplete="email"
                    aria-describedby={errors.email ? 'email-error' : undefined}
                    aria-invalid={!!errors.email}
                  />
                  {errors.email && (
                    <p id="email-error" className="text-sm text-destructive">
                      {errors.email}
                    </p>
                  )}
                </div>

                <div className="space-y-2">
                  <Label htmlFor="request_type">Request Type</Label>
                  <Select
                    value={data.request_type}
                    onValueChange={(value) => setData('request_type', value)}
                  >
                    <SelectTrigger
                      id="request_type"
                      aria-describedby={
                        errors.request_type ? 'request-type-error' : undefined
                      }
                      aria-invalid={!!errors.request_type}
                    >
                      <SelectValue placeholder="Select a request type" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="access">
                        Access — Receive a copy of your personal data
                      </SelectItem>
                      <SelectItem value="deletion">
                        Deletion — Request erasure of your personal data
                      </SelectItem>
                      <SelectItem value="rectification">
                        Rectification — Correct inaccurate personal data
                      </SelectItem>
                    </SelectContent>
                  </Select>
                  {errors.request_type && (
                    <p
                      id="request-type-error"
                      className="text-sm text-destructive"
                    >
                      {errors.request_type}
                    </p>
                  )}
                </div>

                <div className="space-y-2">
                  <Label htmlFor="verification_details">
                    Verification Details
                  </Label>
                  <p className="text-sm text-muted-foreground">
                    To verify your identity, please describe the account details
                    associated with your data (e.g., the email address used to
                    sign up, approximate date of registration, or any other
                    identifying information). Minimum 20 characters.
                  </p>
                  <Textarea
                    id="verification_details"
                    value={data.verification_details}
                    onChange={(e) =>
                      setData('verification_details', e.target.value)
                    }
                    rows={5}
                    placeholder="Please describe details to help us verify your identity..."
                    aria-describedby={
                      errors.verification_details
                        ? 'verification-error'
                        : undefined
                    }
                    aria-invalid={!!errors.verification_details}
                  />
                  <p className="text-xs text-muted-foreground text-right">
                    {data.verification_details.length} / 2000
                  </p>
                  {errors.verification_details && (
                    <p
                      id="verification-error"
                      className="text-sm text-destructive"
                    >
                      {errors.verification_details}
                    </p>
                  )}
                </div>

                <LoadingButton
                  type="submit"
                  loading={processing}
                  loadingText="Submitting…"
                  className="w-full"
                >
                  Submit Request
                </LoadingButton>
              </form>
            </div>

            <p className="mt-6 text-center text-sm text-muted-foreground">
              We process all data requests in accordance with GDPR Article 12.
              If you have questions, contact{' '}
              <a
                href={`mailto:privacy@${appName.toLowerCase()}.com`}
                className="underline hover:text-foreground"
              >
                our privacy team
              </a>
              .
            </p>
          </div>
        </main>

        <MarketingFooter />
      </div>
    </>
  );
};

DataRequest.disableGlobalUi = true;

export default DataRequest;
