'use client'
import { useState } from 'react'
import { Bell, Save } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Skeleton } from '@/components/ui/Skeleton'
import { toast } from 'sonner'

interface NotifSetting {
  id: string
  label: string
  description: string
  enabled: boolean
  dias?: number
}

const INITIAL_SETTINGS: NotifSetting[] = [
  { id: 'venc_contrato', label: 'Vencimiento de contrato', description: 'Aviso antes de que venza un contrato', enabled: true, dias: 60 },
  { id: 'doc_pendiente', label: 'Documentación pendiente', description: 'Recordatorio si hay docs sin cargar después de X días', enabled: true, dias: 7 },
  { id: 'firma_pendiente', label: 'Firma pendiente', description: 'Alerta cuando el contrato está listo pero no firmado', enabled: true, dias: 3 },
  { id: 'ajuste_precio', label: 'Ajuste de precio próximo', description: 'Aviso antes de la fecha de ajuste ICL/IPC', enabled: false, dias: 30 },
  { id: 'nuevo_ingreso', label: 'Nuevo ingreso de operación', description: 'Notificación al equipo cuando se crea una operación', enabled: true },
  { id: 'contrato_firmado', label: 'Contrato firmado', description: 'Confirmación al equipo cuando se cierra una operación', enabled: true },
]

export function NotificacionesConfig({ loading }: { loading: boolean }) {
  const [settings, setSettings] = useState<NotifSetting[]>(INITIAL_SETTINGS)
  const [saving, setSaving] = useState(false)

  const toggle = (id: string) =>
    setSettings(prev => prev.map(s => s.id === id ? { ...s, enabled: !s.enabled } : s))

  const setDias = (id: string, dias: number) =>
    setSettings(prev => prev.map(s => s.id === id ? { ...s, dias } : s))

  const save = async () => {
    setSaving(true)
    await new Promise(r => setTimeout(r, 700))
    setSaving(false)
    toast.success('Configuración de notificaciones guardada')
  }

  if (loading) return <NotificacionesSkeleton />

  return (
    <div className="bg-card border border-border rounded-xl p-6 space-y-4">
      <div className="flex items-center gap-2">
        <Bell size={16} className="text-primary" />
        <h3 className="text-sm font-semibold">Notificaciones y Alertas</h3>
      </div>

      <div className="space-y-2">
        {settings.map(s => (
          <div key={s.id} className={`flex items-center gap-4 p-3.5 rounded-lg border transition-colors ${s.enabled ? 'border-primary/20 bg-primary/5' : 'border-border'}`}>
            {/* Toggle */}
            <button
              onClick={() => toggle(s.id)}
              className={`relative flex-shrink-0 w-10 h-5.5 rounded-full transition-colors ${s.enabled ? 'bg-primary' : 'bg-muted'}`}
              style={{ height: '22px' }}
            >
              <span className={`absolute top-0.5 w-4 h-4 bg-white rounded-full shadow transition-transform ${s.enabled ? 'translate-x-5' : 'translate-x-0.5'}`} />
            </button>

            <div className="flex-1 min-w-0">
              <p className="text-sm font-medium text-foreground">{s.label}</p>
              <p className="text-xs text-muted-foreground">{s.description}</p>
            </div>

            {s.dias !== undefined && s.enabled && (
              <div className="flex items-center gap-1.5 flex-shrink-0">
                <input
                  type="number"
                  value={s.dias}
                  onChange={e => setDias(s.id, Number(e.target.value))}
                  className="w-14 h-7 text-center text-sm border border-border rounded-md bg-background"
                  min={1}
                  max={365}
                />
                <span className="text-xs text-muted-foreground">días</span>
              </div>
            )}
          </div>
        ))}
      </div>

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

function NotificacionesSkeleton() {
  return (
    <div className="bg-card border border-border rounded-xl p-6 space-y-4">
      <Skeleton className="h-5 w-52" />
      {Array.from({ length: 5 }).map((_, i) => (
        <div key={i} className="flex items-center gap-4 p-3.5 rounded-lg border border-border">
          <Skeleton className="h-5 w-10 rounded-full" />
          <div className="flex-1 space-y-1.5">
            <Skeleton className="h-4 w-48" />
            <Skeleton className="h-3 w-64" />
          </div>
        </div>
      ))}
    </div>
  )
}