import { Mail } from 'lucide-react';

import { type FormEvent } from 'react';

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

import { Button } from '@/Components/ui/button';
import { Input } from '@/Components/ui/input';
import { Label } from '@/Components/ui/label';

interface NewsletterSignupProps {
  /** Optional compact mode for footer placement */
  compact?: boolean;
}

export function NewsletterSignup({ compact = false }: NewsletterSignupProps) {
  const { data, setData, post, processing, errors, wasSuccessful, reset } = useForm({
    email: '',
    name: '',
  });

  const handleSubmit = (e: FormEvent) => {
    e.preventDefault();
    post(route('newsletter.subscribe'), {
      onSuccess: () => reset(),
    });
  };

  if (wasSuccessful) {
    return (
      <div className="rounded-lg border border-primary/20 bg-primary/5 p-4 text-center">
        <Mail className="mx-auto mb-2 h-6 w-6 text-primary" aria-hidden="true" />
        <p className="text-sm font-medium text-foreground">You're subscribed!</p>
        <p className="mt-1 text-xs text-muted-foreground">
          SEO insights landing in your inbox soon.
        </p>
      </div>
    );
  }

  if (compact) {
    return (
      <div>
        <p className="mb-3 text-sm font-semibold text-foreground">SEO insights, weekly.</p>
        <form onSubmit={handleSubmit} className="flex gap-2" aria-label="Newsletter signup">
          <div className="flex-1">
            <Label htmlFor="newsletter-email-compact" className="sr-only">
              Email address
            </Label>
            <Input
              id="newsletter-email-compact"
              type="email"
              placeholder="you@example.com"
              value={data.email}
              onChange={(e) => setData('email', e.target.value)}
              required
              aria-invalid={!!errors.email}
              aria-describedby={errors.email ? 'newsletter-email-error' : undefined}
            />
            {errors.email && (
              <p id="newsletter-email-error" className="mt-1 text-xs text-destructive">
                {errors.email}
              </p>
            )}
          </div>
          <Button type="submit" size="sm" disabled={processing}>
            Subscribe
          </Button>
        </form>
      </div>
    );
  }

  return (
    <div className="rounded-xl border bg-card p-6 text-center">
      <div className="mb-3 inline-flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
        <Mail className="h-5 w-5 text-primary" aria-hidden="true" />
      </div>
      <h3 className="mb-1 font-semibold">SEO insights, weekly.</h3>
      <p className="mb-4 text-sm text-muted-foreground">
        WordPress SEO tips, content strategy guides, and RankWiz updates. No spam. Unsubscribe
        anytime.
      </p>
      <form onSubmit={handleSubmit} className="space-y-3" aria-label="Newsletter signup">
        <div className="text-left">
          <Label htmlFor="newsletter-name">Name (optional)</Label>
          <Input
            id="newsletter-name"
            type="text"
            placeholder="Your name"
            value={data.name}
            onChange={(e) => setData('name', e.target.value)}
            className="mt-1"
          />
        </div>
        <div className="text-left">
          <Label htmlFor="newsletter-email">Email address</Label>
          <Input
            id="newsletter-email"
            type="email"
            placeholder="you@example.com"
            value={data.email}
            onChange={(e) => setData('email', e.target.value)}
            required
            className="mt-1"
            aria-invalid={!!errors.email}
            aria-describedby={errors.email ? 'newsletter-email-err' : undefined}
          />
          {errors.email && (
            <p id="newsletter-email-err" className="mt-1 text-xs text-destructive">
              {errors.email}
            </p>
          )}
        </div>
        <Button type="submit" className="w-full" disabled={processing}>
          {processing ? 'Subscribing…' : 'Subscribe for free'}
        </Button>
      </form>
    </div>
  );
}