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

import { Button } from '@/Components/ui/button';
import { Input } from '@/Components/ui/input';
import { Label } from '@/Components/ui/label';
import { LoadingButton } from '@/Components/ui/loading-button';
import { Textarea } from '@/Components/ui/textarea';
import type { PageProps } from '@/types';

interface Props {
  prefill_name: string;
}

export default function TestimonialsSubmit({ prefill_name }: Props) {
  const appName = (usePage<PageProps>().props as PageProps & { _appName?: string })._appName ?? 'RankWiz';

  const { data, setData, post, processing, errors } = useForm({
    name: prefill_name ?? '',
    role: '',
    company: '',
    quote: '',
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    post(route('testimonials.submit.store'));
  };

  return (
    <>
      <Head title={`Share Your Experience — ${appName}`} />
      <div className="min-h-screen bg-background flex items-center justify-center px-4 py-16">
        <div className="w-full max-w-lg">
          <div className="mb-8 text-center">
            <h1 className="text-2xl font-bold tracking-tight">Share Your Experience</h1>
            <p className="mt-2 text-muted-foreground">
              A sentence or two about how RankWiz has helped your SEO workflow goes a long way.
            </p>
          </div>

          <form onSubmit={handleSubmit} className="space-y-5 rounded-xl border bg-card p-6 shadow-sm">
            <div className="space-y-1.5">
              <Label htmlFor="name">Your Name *</Label>
              <Input
                id="name"
                value={data.name}
                onChange={(e) => setData('name', e.target.value)}
                placeholder="Jane Smith"
                autoComplete="name"
              />
              {errors.name && <p className="text-sm text-destructive">{errors.name}</p>}
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-1.5">
                <Label htmlFor="role">Your Role</Label>
                <Input
                  id="role"
                  value={data.role}
                  onChange={(e) => setData('role', e.target.value)}
                  placeholder="SEO Specialist"
                  autoComplete="organization-title"
                />
                {errors.role && <p className="text-sm text-destructive">{errors.role}</p>}
              </div>
              <div className="space-y-1.5">
                <Label htmlFor="company">Company</Label>
                <Input
                  id="company"
                  value={data.company}
                  onChange={(e) => setData('company', e.target.value)}
                  placeholder="Acme Corp"
                  autoComplete="organization"
                />
                {errors.company && <p className="text-sm text-destructive">{errors.company}</p>}
              </div>
            </div>

            <div className="space-y-1.5">
              <Label htmlFor="quote">Your Testimonial *</Label>
              <Textarea
                id="quote"
                value={data.quote}
                onChange={(e) => setData('quote', e.target.value)}
                placeholder="RankWiz helped me recover lost traffic and spot opportunities I never noticed before…"
                rows={5}
              />
              {errors.quote && <p className="text-sm text-destructive">{errors.quote}</p>}
              <p className="text-xs text-muted-foreground">10–2000 characters.</p>
            </div>

            <div className="flex gap-3 pt-1">
              <LoadingButton type="submit" loading={processing} className="flex-1">
                Submit Testimonial
              </LoadingButton>
              <Button type="button" variant="ghost" onClick={() => window.history.back()}>
                Not Now
              </Button>
            </div>
          </form>
        </div>
      </div>
    </>
  );
}
