'use client'
import { useState } from 'react'
import { useRouter } from 'next/navigation'
import { motion } from 'framer-motion'
import { Save, ArrowLeft, Building2, User, Shield, FileText, RefreshCw, Sparkles, UserCheck } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Textarea } from '@/components/ui/textarea'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { cn } from '@/lib/utils'
import { toast } from 'sonner'
import Link from 'next/link'
import type { OperationType } from '@/types'
import { useOperationsStore } from '@/store/operationsStore'

interface SectionProps {
  title: string
  icon: React.ReactNode
  children: React.ReactNode
}

function Section({ title, icon, children }: SectionProps) {
  return (
    <div className="bg-card border border-border rounded-xl p-6">
      <h3 className="text-sm font-semibold text-foreground flex items-center gap-2 mb-4">
        <span className="text-primary">{icon}</span>
        {title}
      </h3>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {children}
      </div>
    </div>
  )
}

function Field({ label, children, full }: { label: string; children: React.ReactNode; full?: boolean }) {
  return (
    <div className={full ? 'col-span-full' : ''}>
      <Label className="text-xs text-muted-foreground mb-1.5 block">{label}</Label>
      {children}
    </div>
  )
}

interface OperationFormProps {
  initialData?: Partial<Record<string, string>>
  initialOperationType?: OperationType
  editId?: string
  editCode?: string
}

export function OperationForm({ initialData, initialOperationType, editId, editCode }: OperationFormProps) {
  const router = useRouter()
  const updateOperation = useOperationsStore(s => s.updateOperation)
  const [saving, setSaving] = useState(false)
  const [operationType, setOperationType] = useState<OperationType>(initialOperationType ?? 'nuevo')
  const [guaranteeType, setGuaranteeType] = useState(initialData?.guarantee_type ?? '')
  const [form, setForm] = useState({
    property_address: '', property_locality: '', property_type: '', property_observations: '',
    owner_name: '', owner_dni: '', owner_phone: '', owner_email: '',
    tenant_name: '', tenant_dni: '', tenant_phone: '', tenant_email: '',
    guarantee_company: '', guarantee_observations: '',
    entry_date: '', start_date: '', end_date: '',
    initial_value: '', adjustment_type: '', adjustment_frequency: '',
    assigned_to: '',
    ...initialData,
  })

  const isEdit = !!editId
  const set = (k: string) => (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
    setForm(p => ({ ...p, [k]: e.target.value }))

  const handleSave = async () => {
    if (!form.property_address || !form.owner_name || !form.tenant_name) {
      toast.error('Completar campos obligatorios: dirección, propietario e inquilino')
      return
    }
    setSaving(true)
    await new Promise(r => setTimeout(r, 800))

    if (isEdit && editId) {
      updateOperation(editId, {
        operation_type:        operationType,
        property_address:      form.property_address,
        property_locality:     form.property_locality,
        property_type:         form.property_type as any,
        property_observations: form.property_observations,
        owner_name:            form.owner_name,
        owner_dni:             form.owner_dni,
        owner_phone:           form.owner_phone,
        owner_email:           form.owner_email,
        tenant_name:           form.tenant_name,
        tenant_dni:            form.tenant_dni,
        tenant_phone:          form.tenant_phone,
        tenant_email:          form.tenant_email,
        guarantee_type:        guaranteeType as any,
        guarantee_company:     form.guarantee_company,
        guarantee_observations: form.guarantee_observations,
        entry_date:            form.entry_date,
        start_date:            form.start_date,
        end_date:              form.end_date,
        initial_value:         form.initial_value ? Number(form.initial_value) : undefined,
        adjustment_type:       form.adjustment_type as any,
        adjustment_frequency:  form.adjustment_frequency as any,
        assigned_to:           form.assigned_to,
        updated_at:            new Date().toISOString(),
      })
      toast.success('Operación actualizada correctamente')
      router.push(`/operaciones/${editId}`)
    } else {
      toast.success('Operación guardada correctamente')
      router.push('/operaciones')
    }
    setSaving(false)
  }

  return (
    <div className="max-w-4xl mx-auto space-y-5">
      {/* Header */}
      <div className="flex items-center gap-3">
        <Link href={isEdit ? `/operaciones/${editId}` : '/operaciones'}>
          <Button variant="ghost" size="icon"><ArrowLeft size={18} /></Button>
        </Link>
        <div>
          <h2 className="text-lg font-semibold">
            {isEdit ? `Editando ${editCode ?? ''}` : 'Nueva Operación'}
          </h2>
          <p className="text-sm text-muted-foreground">
            {isEdit ? form.property_address : 'Completar los datos del contrato de alquiler'}
          </p>
        </div>
        <Button onClick={handleSave} disabled={saving} className="ml-auto gap-2">
          <Save size={16} />
          {saving ? 'Guardando...' : isEdit ? 'Guardar Cambios' : 'Guardar Operación'}
        </Button>
      </div>

      {/* Tipo de operación — Nuevo vs Renovación */}
      <div className="bg-card border border-border rounded-xl p-5">
        <p className="text-sm font-semibold text-foreground mb-3">Tipo de Operación</p>
        <div className="flex gap-3">
          <button
            type="button"
            onClick={() => setOperationType('nuevo')}
            className={cn(
              'flex-1 flex items-center justify-center gap-2 py-3 rounded-xl border-2 text-sm font-semibold transition-all',
              operationType === 'nuevo'
                ? 'border-blue-500 bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:text-blue-400'
                : 'border-border text-muted-foreground hover:border-blue-300'
            )}
          >
            <Sparkles size={16} />
            Contrato Nuevo
          </button>
          <button
            type="button"
            onClick={() => setOperationType('renovacion')}
            className={cn(
              'flex-1 flex items-center justify-center gap-2 py-3 rounded-xl border-2 text-sm font-semibold transition-all',
              operationType === 'renovacion'
                ? 'border-amber-500 bg-amber-50 text-amber-700 dark:bg-amber-900/20 dark:text-amber-400'
                : 'border-border text-muted-foreground hover:border-amber-300'
            )}
          >
            <RefreshCw size={16} />
            Renovación
          </button>
        </div>
      </div>

      {/* Responsable */}
      <Section title="Responsable" icon={<UserCheck size={16} />}>
        <Field label="Asignado a" full>
          <Select value={form.assigned_to} onValueChange={v => setForm(p => ({ ...p, assigned_to: v }))}>
            <SelectTrigger><SelectValue placeholder="Seleccionar usuario responsable..." /></SelectTrigger>
            <SelectContent>
              <SelectItem value="martin">Martín</SelectItem>
              <SelectItem value="admin">Administración</SelectItem>
              <SelectItem value="horacio">Horacio Acosta</SelectItem>
            </SelectContent>
          </Select>
        </Field>
      </Section>

      {/* Propiedad */}
      <Section title="Propiedad" icon={<Building2 size={16} />}>
        <Field label="Dirección *" full>
          <Input value={form.property_address} onChange={set('property_address')} placeholder="Av. Corrientes 1234, 5°B" />
        </Field>
        <Field label="Localidad">
          <Input value={form.property_locality} onChange={set('property_locality')} placeholder="CABA" />
        </Field>
        <Field label="Tipo de Inmueble">
          <Select value={form.property_type} onValueChange={v => setForm(p => ({ ...p, property_type: v }))}>
            <SelectTrigger><SelectValue placeholder="Seleccionar..." /></SelectTrigger>
            <SelectContent>
              {['departamento','casa','local','oficina','cochera','galpon','otro'].map(t => (
                <SelectItem key={t} value={t} className="capitalize">{t}</SelectItem>
              ))}
            </SelectContent>
          </Select>
        </Field>
        <Field label="Observaciones" full>
          <Textarea value={form.property_observations} onChange={set('property_observations')} rows={2} placeholder="Observaciones sobre la propiedad..." />
        </Field>
      </Section>

      {/* Propietario */}
      <Section title="Datos del Propietario" icon={<User size={16} />}>
        <Field label="Nombre y Apellido *">
          <Input value={form.owner_name} onChange={set('owner_name')} placeholder="García, Roberto" />
        </Field>
        <Field label="DNI">
          <Input value={form.owner_dni} onChange={set('owner_dni')} placeholder="12.345.678" />
        </Field>
        <Field label="Teléfono / WhatsApp">
          <Input value={form.owner_phone} onChange={set('owner_phone')} placeholder="11-4567-8901" type="tel" />
        </Field>
        <Field label="Email">
          <Input value={form.owner_email} onChange={set('owner_email')} type="email" placeholder="propietario@email.com" />
        </Field>
      </Section>

      {/* Inquilino */}
      <Section title="Datos del Inquilino" icon={<User size={16} />}>
        <Field label="Nombre y Apellido *">
          <Input value={form.tenant_name} onChange={set('tenant_name')} placeholder="López, María" />
        </Field>
        <Field label="DNI">
          <Input value={form.tenant_dni} onChange={set('tenant_dni')} placeholder="30.123.456" />
        </Field>
        <Field label="Teléfono / WhatsApp">
          <Input value={form.tenant_phone} onChange={set('tenant_phone')} placeholder="11-2345-6789" type="tel" />
        </Field>
        <Field label="Email">
          <Input value={form.tenant_email} onChange={set('tenant_email')} type="email" placeholder="inquilino@email.com" />
        </Field>
      </Section>

      {/* Garantía */}
      <Section title="Garantía" icon={<Shield size={16} />}>
        <Field label="Tipo de Garantía">
          <Select value={guaranteeType} onValueChange={setGuaranteeType}>
            <SelectTrigger><SelectValue placeholder="Seleccionar..." /></SelectTrigger>
            <SelectContent>
              <SelectItem value="propietaria">Propietaria</SelectItem>
              <SelectItem value="seguro_caucion">Seguro de Caución</SelectItem>
              <SelectItem value="bancaria">Bancaria</SelectItem>
              <SelectItem value="recibo_sueldo">Recibo de Sueldo</SelectItem>
              <SelectItem value="mixta">Mixta</SelectItem>
              <SelectItem value="otra">Otra</SelectItem>
            </SelectContent>
          </Select>
        </Field>

        {/* Campo empresa solo aparece si es Seguro de Caución */}
        {guaranteeType === 'seguro_caucion' && (
          <Field label="Empresa Aseguradora">
            <Input
              value={form.guarantee_company}
              onChange={set('guarantee_company')}
              placeholder="Ej: Garantizar, Asegura, Fianzas..."
            />
          </Field>
        )}

        <Field label="Observaciones" full>
          <Textarea value={form.guarantee_observations} onChange={set('guarantee_observations')} rows={2} placeholder="Detalles de la garantía..." />
        </Field>
      </Section>

      {/* Datos Contractuales */}
      <Section title="Datos Contractuales" icon={<FileText size={16} />}>
        <Field label="Fecha de Ingreso">
          <Input type="date" value={form.entry_date} onChange={set('entry_date')} />
        </Field>
        <Field label="Fecha de Inicio">
          <Input type="date" value={form.start_date} onChange={set('start_date')} />
        </Field>
        <Field label="Fecha de Finalización">
          <Input type="date" value={form.end_date} onChange={set('end_date')} />
        </Field>
        <Field label="Valor Inicial (ARS)">
          <Input type="number" value={form.initial_value} onChange={set('initial_value')} placeholder="280000" />
        </Field>
        <Field label="Tipo de Ajuste">
          <Select value={form.adjustment_type} onValueChange={v => setForm(p => ({ ...p, adjustment_type: v }))}>
            <SelectTrigger><SelectValue placeholder="Seleccionar..." /></SelectTrigger>
            <SelectContent>
              <SelectItem value="IPC">IPC</SelectItem>
              <SelectItem value="ICL">ICL</SelectItem>
              <SelectItem value="casa_propia">Casa Propia</SelectItem>
              <SelectItem value="fijo">Fijo</SelectItem>
              <SelectItem value="otro">Otro</SelectItem>
            </SelectContent>
          </Select>
        </Field>
        <Field label="Frecuencia de Ajuste">
          <Select value={form.adjustment_frequency} onValueChange={v => setForm(p => ({ ...p, adjustment_frequency: v }))}>
            <SelectTrigger><SelectValue placeholder="Seleccionar..." /></SelectTrigger>
            <SelectContent>
              <SelectItem value="mensual">Mensual</SelectItem>
              <SelectItem value="trimestral">Trimestral</SelectItem>
              <SelectItem value="cuatrimestral">Cuatrimestral</SelectItem>
              <SelectItem value="semestral">Semestral</SelectItem>
              <SelectItem value="anual">Anual</SelectItem>
            </SelectContent>
          </Select>
        </Field>
      </Section>

      <div className="flex justify-end gap-3 pb-6">
        <Link href="/operaciones">
          <Button variant="outline">Cancelar</Button>
        </Link>
        <Button onClick={handleSave} disabled={saving} className="gap-2">
          <Save size={16} />
          {saving ? 'Guardando...' : 'Guardar Operación'}
        </Button>
      </div>
    </div>
  )
}