import { useState } from 'react';
import { trpc } from '@/lib/trpc';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { toast } from 'sonner';
import { Loader2 } from 'lucide-react';

export default function LeadForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    phone: '',
    company: '',
    serviceInterest: 'Marketing',
    message: '',
  });

  const submitLead = trpc.leads.submit.useMutation({
    onSuccess: () => {
      toast.success('Thank you! We\'ll be in touch soon.');
      setFormData({
        name: '',
        email: '',
        phone: '',
        company: '',
        serviceInterest: 'Marketing',
        message: '',
      });
    },
    onError: (error) => {
      toast.error(error.message || 'Failed to submit form. Please try again.');
    },
  });

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const handleSelectChange = (value: string) => {
    setFormData(prev => ({ ...prev, serviceInterest: value }));
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    submitLead.mutate({
      name: formData.name,
      email: formData.email,
      phone: formData.phone || undefined,
      company: formData.company || undefined,
      serviceInterest: formData.serviceInterest as 'Marketing' | 'Staffing' | 'Financial Consultation',
      message: formData.message || undefined,
    });
  };

  return (
    <form onSubmit={handleSubmit} className="glass-card max-w-2xl mx-auto space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <label className="block text-sm font-semibold text-foreground mb-2">
            Full Name *
          </label>
          <Input
            type="text"
            name="name"
            value={formData.name}
            onChange={handleChange}
            placeholder="John Doe"
            required
            className="glass-input w-full"
          />
        </div>
        <div>
          <label className="block text-sm font-semibold text-foreground mb-2">
            Email *
          </label>
          <Input
            type="email"
            name="email"
            value={formData.email}
            onChange={handleChange}
            placeholder="john@example.com"
            required
            className="glass-input w-full"
          />
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <label className="block text-sm font-semibold text-foreground mb-2">
            Phone Number
          </label>
          <Input
            type="tel"
            name="phone"
            value={formData.phone}
            onChange={handleChange}
            placeholder="(647) 983-0755"
            className="glass-input w-full"
          />
        </div>
        <div>
          <label className="block text-sm font-semibold text-foreground mb-2">
            Company
          </label>
          <Input
            type="text"
            name="company"
            value={formData.company}
            onChange={handleChange}
            placeholder="Your Company"
            className="glass-input w-full"
          />
        </div>
      </div>

      <div>
        <label className="block text-sm font-semibold text-foreground mb-2">
          Service of Interest *
        </label>
        <Select value={formData.serviceInterest} onValueChange={handleSelectChange}>
          <SelectTrigger className="glass-input w-full">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="Marketing">Marketing</SelectItem>
            <SelectItem value="Staffing">Staffing</SelectItem>
            <SelectItem value="Financial Consultation">Financial Consultation</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <div>
        <label className="block text-sm font-semibold text-foreground mb-2">
          Message
        </label>
        <Textarea
          name="message"
          value={formData.message}
          onChange={handleChange}
          placeholder="Tell us more about your needs..."
          className="glass-input w-full min-h-32 resize-none"
        />
      </div>

      <Button
        type="submit"
        disabled={submitLead.isPending}
        className="w-full bg-accent hover:bg-accent/90 text-accent-foreground font-semibold py-3 rounded-lg transition-all duration-300 flex items-center justify-center gap-2"
      >
        {submitLead.isPending ? (
          <>
            <Loader2 className="animate-spin" size={18} />
            Submitting...
          </>
        ) : (
          'Submit Inquiry'
        )}
      </Button>
    </form>
  );
}
