
import React, { useState } from 'react';
import { Helmet } from 'react-helmet';
import { motion } from 'framer-motion';
import { Button } from '@/components/ui/button.jsx';
import { Input } from '@/components/ui/input.jsx';
import { Textarea } from '@/components/ui/textarea.jsx';
import { Label } from '@/components/ui/label.jsx';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select.jsx';
import { Card, CardContent } from '@/components/ui/card.jsx';
import { useToast } from '@/hooks/use-toast.js';
import pb from '@/lib/pocketbaseClient.js';
import { Loader2 } from 'lucide-react';

export default function AvaliacaoExclusivaPage() {
  const { toast } = useToast();
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [formData, setFormData] = useState({
    nome: '',
    telefone: '',
    whatsapp: '',
    email: '',
    cidade: '',
    estado: '',
    tipo_imovel: '',
    faixa_valor: '',
    objetivo_principal: '',
    tecnologias_existentes: '',
    mensagem_adicional: ''
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const handleSelect = (name, value) => {
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if(!formData.nome || !formData.whatsapp || !formData.email) {
       toast({ title: 'Campos obrigatórios', description: 'Preencha nome, whatsapp e email.', variant: 'destructive' });
       return;
    }

    setIsSubmitting(true);
    try {
      await pb.collection('leads').create(formData, { $autoCancel: false });
      toast({
        title: 'Avaliação Solicitada com Sucesso!',
        description: 'Nossa equipe de especialistas fará contato em breve.'
      });
      setFormData({
        nome: '', telefone: '', whatsapp: '', email: '', cidade: '', estado: '',
        tipo_imovel: '', faixa_valor: '', objetivo_principal: '', tecnologias_existentes: '', mensagem_adicional: ''
      });
    } catch (err) {
      toast({
        title: 'Erro ao solicitar',
        description: 'Tente novamente mais tarde ou chame via WhatsApp.',
        variant: 'destructive'
      });
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <>
      <Helmet>
        <title>Avaliação Patrimonial Exclusiva | LCP Valuation</title>
      </Helmet>

      <main className="min-h-screen pt-24 bg-background pb-24">
        <section className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12 mt-12">
            <h1 className="text-4xl md:text-5xl font-bold mb-4">Solicite sua Avaliação Patrimonial Tecnológica</h1>
            <p className="text-lg text-foreground/70">
              Preencha os dados abaixo de forma confidencial. Nossos auditores analisarão o escopo e farão contato via WhatsApp.
            </p>
          </div>

          <Card className="bg-card border-border shadow-2xl">
            <CardContent className="p-8 md:p-12">
              <form onSubmit={handleSubmit} className="space-y-6">
                <div className="grid md:grid-cols-2 gap-6">
                  <div className="space-y-2">
                    <Label>Nome Completo *</Label>
                    <Input name="nome" value={formData.nome} onChange={handleChange} required className="bg-secondary border-border"/>
                  </div>
                  <div className="space-y-2">
                    <Label>E-mail Corporativo/Pessoal *</Label>
                    <Input type="email" name="email" value={formData.email} onChange={handleChange} required className="bg-secondary border-border"/>
                  </div>
                  <div className="space-y-2">
                    <Label>WhatsApp *</Label>
                    <Input name="whatsapp" placeholder="(00) 00000-0000" value={formData.whatsapp} onChange={handleChange} required className="bg-secondary border-border"/>
                  </div>
                  <div className="space-y-2">
                    <Label>Cidade/Estado</Label>
                    <div className="flex gap-2">
                      <Input name="cidade" placeholder="Cidade" value={formData.cidade} onChange={handleChange} className="bg-secondary border-border"/>
                      <Input name="estado" placeholder="UF" className="w-20 bg-secondary border-border" value={formData.estado} onChange={handleChange}/>
                    </div>
                  </div>
                  <div className="space-y-2">
                    <Label>Tipo de Imóvel</Label>
                    <Select onValueChange={(v) => handleSelect('tipo_imovel', v)} value={formData.tipo_imovel}>
                      <SelectTrigger className="bg-secondary border-border">
                        <SelectValue placeholder="Selecione" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="Apartamento Alto Padrão">Apartamento Alto Padrão</SelectItem>
                        <SelectItem value="Casa em Condomínio">Casa em Condomínio</SelectItem>
                        <SelectItem value="Cobertura">Cobertura</SelectItem>
                        <SelectItem value="Na Planta / Obra">Na Planta / Obra</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="space-y-2">
                    <Label>Faixa de Valor do Imóvel</Label>
                    <Select onValueChange={(v) => handleSelect('faixa_valor', v)} value={formData.faixa_valor}>
                      <SelectTrigger className="bg-secondary border-border">
                        <SelectValue placeholder="Selecione" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="Até R$ 1 Milhão">Até R$ 1 Milhão</SelectItem>
                        <SelectItem value="R$ 1M a R$ 3M">R$ 1M a R$ 3M</SelectItem>
                        <SelectItem value="R$ 3M a R$ 5M">R$ 3M a R$ 5M</SelectItem>
                        <SelectItem value="Acima de R$ 5M">Acima de R$ 5M</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>

                <div className="space-y-2">
                  <Label>Qual seu objetivo principal?</Label>
                  <Select onValueChange={(v) => handleSelect('objetivo_principal', v)} value={formData.objetivo_principal}>
                    <SelectTrigger className="bg-secondary border-border">
                      <SelectValue placeholder="Selecione" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="Morar / Uso Pessoal">Morar / Uso Pessoal</SelectItem>
                      <SelectItem value="Retrofit para Venda">Retrofit para Venda</SelectItem>
                      <SelectItem value="Investimento / Locação">Investimento / Locação</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

                <div className="space-y-2">
                  <Label>O imóvel já possui alguma tecnologia instalada?</Label>
                  <Input name="tecnologias_existentes" placeholder="Ex: Câmeras, Som ambiente..." value={formData.tecnologias_existentes} onChange={handleChange} className="bg-secondary border-border"/>
                </div>

                <div className="space-y-2">
                  <Label>Informações Adicionais</Label>
                  <Textarea name="mensagem_adicional" rows={4} placeholder="Conte mais detalhes sobre sua necessidade..." value={formData.mensagem_adicional} onChange={handleChange} className="bg-secondary border-border resize-none"/>
                </div>

                <Button type="submit" size="lg" className="w-full bg-primary text-primary-foreground h-14 text-lg mt-4" disabled={isSubmitting}>
                  {isSubmitting ? <><Loader2 className="mr-2 h-5 w-5 animate-spin"/> Processando...</> : 'Solicitar Avaliação Exclusiva'}
                </Button>
              </form>
            </CardContent>
          </Card>
        </section>
      </main>
    </>
  );
}
