'use client'
import { useState } from 'react'
import { Save, Building2 } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Skeleton } from '@/components/ui/Skeleton'
import { toast } from 'sonner'

interface InmobiliariaData {
  nombre: string
  direccion: string
  localidad: string
  telefono: string
  email: string
  sitio_web: string
  cuit: string
  matricula: string
}

const DEFAULT_DATA: InmobiliariaData = {
  nombre: 'Horacio E. Acosta',
  direccion: '',
  localidad: '',
  telefono: '',
  email: '',
  sitio_web: 'horacioeacosta.com',
  cuit: '',
  matricula: '',
}

export function InmobiliariaForm({ loading }: { loading: boolean }) {
  const [data, setData] = useState<InmobiliariaData>(DEFAULT_DATA)
  const [saving, setSaving] = useState(false)

  const set = (key: keyof InmobiliariaData) => (e: React.ChangeEvent<HTMLInputElement>) =>
    setData(prev => ({ ...prev, [key]: e.target.value }))

  const save = async () => {
    setSaving(true)
    await new Promise(r => setTimeout(r, 800))
    setSaving(false)
    toast.success('Datos de la inmobiliaria guardados')
  }

  if (loading) return <InmobiliariaFormSkeleton />

  return (
    <div className="bg-card border border-border rounded-xl p-6 space-y-5">
      <div className="flex items-center gap-2 mb-2">
        <Building2 size={16} className="text-primary" />
        <h3 className="text-sm font-semibold">Datos de la Inmobiliaria</h3>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div className="space-y-1.5">
          <Label>Nombre / Razón Social</Label>
          <Input value={data.nombre} onChange={set('nombre')} placeholder="Nombre completo" />
        </div>
        <div className="space-y-1.5">
          <Label>CUIT</Label>
          <Input value={data.cuit} onChange={set('cuit')} placeholder="20-12345678-9" />
        </div>
        <div className="space-y-1.5">
          <Label>Matrícula CUCICBA / CMCPSI</Label>
          <Input value={data.matricula} onChange={set('matricula')} placeholder="Nro. de matrícula" />
        </div>
        <div className="space-y-1.5">
          <Label>Teléfono</Label>
          <Input value={data.telefono} onChange={set('telefono')} placeholder="+54 11 XXXX-XXXX" />
        </div>
        <div className="space-y-1.5">
          <Label>Email</Label>
          <Input value={data.email} onChange={set('email')} placeholder="contacto@inmobiliaria.com" type="email" />
        </div>
        <div className="space-y-1.5">
          <Label>Sitio Web</Label>
          <Input value={data.sitio_web} onChange={set('sitio_web')} placeholder="www.sitio.com" />
        </div>
        <div className="space-y-1.5 sm:col-span-2">
          <Label>Dirección</Label>
          <Input value={data.direccion} onChange={set('direccion')} placeholder="Calle 123, Piso 2" />
        </div>
        <div className="space-y-1.5">
          <Label>Localidad</Label>
          <Input value={data.localidad} onChange={set('localidad')} placeholder="Buenos Aires" />
        </div>
      </div>

      <div className="flex justify-end pt-2">
        <Button onClick={save} disabled={saving} className="gap-2">
          <Save size={14} />
          {saving ? 'Guardando...' : 'Guardar Cambios'}
        </Button>
      </div>
    </div>
  )
}

function InmobiliariaFormSkeleton() {
  return (
    <div className="bg-card border border-border rounded-xl p-6 space-y-5">
      <Skeleton className="h-5 w-48" />
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        {Array.from({ length: 8 }).map((_, i) => (
          <div key={i} className="space-y-1.5">
            <Skeleton className="h-4 w-32" />
            <Skeleton className="h-9 w-full" />
          </div>
        ))}
      </div>
      <div className="flex justify-end">
        <Skeleton className="h-9 w-36" />
      </div>
    </div>
  )
}