'use client';

import { useState, useEffect, useCallback } from 'react';
import { useQueryClient } from '@tanstack/react-query';
import {
  Button,
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  Input,
  Label,
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
  cn,
} from '@horux/shared-ui';
import { useContribuyenteStore } from '@/stores/contribuyente-store';
import { apiClient } from '@/lib/api/client';
import { Header } from '@/components/layouts/header';
import { TareasTab } from '@/components/obligaciones/tareas-tab';
import { Plus, Trash2, RotateCcw, Sparkles, ChevronDown, Building2 } from 'lucide-react';

interface Obligacion {
  id: string;
  catalogoId: string | null;
  nombre: string;
  fundamento: string | null;
  frecuencia: string | null;
  fechaLimite: string | null;
  categoria: string | null;
  activa: boolean;
  esRecomendada: boolean;
  esCustom: boolean;
}

interface CatalogoItem {
  id: string;
  nombre: string;
  fundamento: string;
  frecuencia: string;
  fechaLimite: string;
  categoria: string;
  aplica: string;
}

export default function ObligacionesPage() {
  const queryClient = useQueryClient();
  const { selectedContribuyenteId, selectedContribuyenteRfc, selectedContribuyenteNombre } =
    useContribuyenteStore();
  const [obligaciones, setObligaciones] = useState<Obligacion[]>([]);
  const [catalogo, setCatalogo] = useState<CatalogoItem[]>([]);
  const [loading, setLoading] = useState(false);
  const [showAdd, setShowAdd] = useState(false);
  const [showRemoved, setShowRemoved] = useState(false);
  const [addMode, setAddMode] = useState<'catalogo' | 'custom'>('catalogo');
  const [customForm, setCustomForm] = useState({
    nombre: '',
    fundamento: '',
    frecuencia: '',
    fechaLimite: '',
    categoria: '',
  });
  const [selectedCatalogoId, setSelectedCatalogoId] = useState('');
  const [activeTab, setActiveTab] = useState<'obligaciones' | 'tareas'>('obligaciones');

  const fetchObligaciones = useCallback(async () => {
    if (!selectedContribuyenteId) return;
    setLoading(true);
    try {
      const { data } = await apiClient.get(
        `/contribuyentes/${selectedContribuyenteId}/obligaciones`
      );
      setObligaciones(data.data);
    } catch {
      setObligaciones([]);
    } finally {
      setLoading(false);
    }
  }, [selectedContribuyenteId]);

  useEffect(() => {
    fetchObligaciones();
  }, [fetchObligaciones]);

  useEffect(() => {
    apiClient
      .get('/contribuyentes/catalogo-obligaciones')
      .then(({ data }) => setCatalogo(data.data))
      .catch(() => {});
  }, []);

  const handleInit = async () => {
    if (!selectedContribuyenteId || !selectedContribuyenteRfc) return;
    try {
      await apiClient.post(
        `/contribuyentes/${selectedContribuyenteId}/obligaciones/init`,
        {
          rfc: selectedContribuyenteRfc,
          regimenes: [],
          tieneNomina: false,
        }
      );
      await fetchObligaciones();
      invalidateRelated();
    } catch (err: unknown) {
      const e = err as { response?: { data?: { message?: string } } };
      alert(e.response?.data?.message || 'Error al generar recomendaciones');
    }
  };

  const handleAdd = async () => {
    if (!selectedContribuyenteId) return;
    try {
      if (addMode === 'catalogo' && selectedCatalogoId) {
        const item = catalogo.find((c) => c.id === selectedCatalogoId);
        if (!item) return;
        await apiClient.post(`/contribuyentes/${selectedContribuyenteId}/obligaciones`, {
          catalogoId: item.id,
          nombre: item.nombre,
          fundamento: item.fundamento,
          frecuencia: item.frecuencia,
          fechaLimite: item.fechaLimite,
          categoria: item.categoria,
        });
      } else if (addMode === 'custom' && customForm.nombre) {
        await apiClient.post(
          `/contribuyentes/${selectedContribuyenteId}/obligaciones`,
          customForm
        );
      }
      setShowAdd(false);
      setSelectedCatalogoId('');
      setCustomForm({ nombre: '', fundamento: '', frecuencia: '', fechaLimite: '', categoria: '' });
      await fetchObligaciones();
    } catch (err: unknown) {
      const e = err as { response?: { data?: { message?: string } } };
      alert(e.response?.data?.message || 'Error al agregar obligación');
    }
  };

  const invalidateRelated = () => {
    queryClient.invalidateQueries({ queryKey: ['alertas-manuales'] });
    queryClient.invalidateQueries({ queryKey: ['alertas-automaticas'] });
    queryClient.invalidateQueries({ queryKey: ['alertas'] });
    queryClient.invalidateQueries({ queryKey: ['eventos'] });
  };

  const handleRemove = async (id: string) => {
    await apiClient.delete(
      `/contribuyentes/${selectedContribuyenteId}/obligaciones/${id}`
    );
    await fetchObligaciones();
    invalidateRelated();
  };

  const handleRestore = async (id: string) => {
    await apiClient.post(
      `/contribuyentes/${selectedContribuyenteId}/obligaciones/${id}/restore`
    );
    await fetchObligaciones();
    invalidateRelated();
  };

  if (!selectedContribuyenteId) {
    return (
      <div className="p-6 max-w-4xl mx-auto">
        <Card>
          <CardContent className="flex flex-col items-center justify-center py-12 text-center">
            <Building2 className="h-12 w-12 text-muted-foreground mb-4" />
            <h3 className="text-lg font-semibold">Selecciona un contribuyente</h3>
            <p className="text-sm text-muted-foreground mt-1">
              Usa el selector de RFCs en el header para elegir un contribuyente.
            </p>
          </CardContent>
        </Card>
      </div>
    );
  }

  const activas = obligaciones.filter((o) => o.activa);
  const removidas = obligaciones.filter((o) => !o.activa);
  const categorias = [...new Set(activas.map((o) => o.categoria || 'Sin categoría'))];

  const frecuenciaBadge = (f: string | null) => {
    const colors: Record<string, string> = {
      mensual: 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300',
      bimestral: 'bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-300',
      trimestral: 'bg-orange-100 text-orange-700 dark:bg-orange-900 dark:text-orange-300',
      anual: 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300',
      eventual: 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300',
    };
    return f ? (
      <span className={cn('text-xs px-2 py-0.5 rounded-full', colors[f] || colors['eventual'])}>
        {f}
      </span>
    ) : null;
  };

  return (
    <>
      <Header title="Obligaciones Fiscales" />
      <div className="p-6 max-w-4xl mx-auto space-y-6">
        {/* Subtítulo */}
        <p className="text-sm text-muted-foreground">
          {selectedContribuyenteNombre} — {selectedContribuyenteRfc}
        </p>

        {/* Tabs */}
        <div className="flex border-b">
          <button
            onClick={() => setActiveTab('obligaciones')}
            className={cn(
              'px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors',
              activeTab === 'obligaciones'
                ? 'border-primary text-primary'
                : 'border-transparent text-muted-foreground hover:text-foreground',
            )}
          >
            Obligaciones
          </button>
          <button
            onClick={() => setActiveTab('tareas')}
            className={cn(
              'px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors',
              activeTab === 'tareas'
                ? 'border-primary text-primary'
                : 'border-transparent text-muted-foreground hover:text-foreground',
            )}
          >
            Tareas
          </button>
        </div>

        {activeTab === 'tareas' ? (
          <TareasTab contribuyenteId={selectedContribuyenteId ?? null} />
        ) : (
          <>
        <div className="flex items-center justify-end gap-2">
          {activas.length === 0 && (
            <Button
              onClick={handleInit}
              variant="outline"
              className="flex items-center gap-2"
            >
              <Sparkles className="h-4 w-4" /> Generar recomendaciones
            </Button>
          )}
          <Button onClick={() => setShowAdd(true)} className="flex items-center gap-2">
            <Plus className="h-4 w-4" /> Agregar
          </Button>
        </div>

      {/* Active obligations */}
      {loading ? (
        <p className="text-muted-foreground">Cargando...</p>
      ) : activas.length === 0 ? (
        <Card>
          <CardContent className="flex flex-col items-center justify-center py-12 text-center">
            <Sparkles className="h-12 w-12 text-muted-foreground mb-4" />
            <h3 className="text-lg font-semibold">Sin obligaciones configuradas</h3>
            <p className="text-sm text-muted-foreground mt-1 mb-4">
              Importa las obligaciones desde la Constancia de Situación Fiscal (CSF) o agrega manualmente.
            </p>
            <Button onClick={handleInit} className="flex items-center gap-2">
              <Sparkles className="h-4 w-4" /> Generar recomendaciones
            </Button>
          </CardContent>
        </Card>
      ) : (
        <div className="space-y-6">
          {categorias.map((cat) => (
            <div key={cat}>
              <h2 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide mb-3">
                {cat}
              </h2>
              <div className="space-y-2">
                {activas
                  .filter((o) => (o.categoria || 'Sin categoría') === cat)
                  .map((ob) => (
                    <Card key={ob.id}>
                      <CardContent className="flex items-center justify-between py-3 px-5">
                        <div className="flex-1 min-w-0">
                          <div className="flex items-center gap-2 flex-wrap">
                            <p className="font-medium text-sm">{ob.nombre}</p>
                            {frecuenciaBadge(ob.frecuencia)}
                            {ob.esRecomendada && (
                              <span className="text-xs text-amber-600 dark:text-amber-400">
                                ★ Recomendada
                              </span>
                            )}
                            {ob.esCustom && (
                              <span className="text-xs text-purple-600 dark:text-purple-400">
                                ✎ Custom
                              </span>
                            )}
                          </div>
                          <div className="flex gap-4 mt-1">
                            {ob.fundamento && (
                              <p className="text-xs text-muted-foreground">{ob.fundamento}</p>
                            )}
                            {ob.fechaLimite && (
                              <p className="text-xs text-muted-foreground">
                                📅 {ob.fechaLimite}
                              </p>
                            )}
                          </div>
                        </div>
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={() => handleRemove(ob.id)}
                          className="text-destructive hover:text-destructive ml-2 shrink-0"
                        >
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </CardContent>
                    </Card>
                  ))}
              </div>
            </div>
          ))}
        </div>
      )}

      {/* Removed obligations */}
      {removidas.length > 0 && (
        <div>
          <button
            onClick={() => setShowRemoved(!showRemoved)}
            className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
          >
            <ChevronDown
              className={cn('h-4 w-4 transition-transform', showRemoved && 'rotate-180')}
            />
            {removidas.length} obligaciones desactivadas
          </button>
          {showRemoved && (
            <div className="mt-2 space-y-2">
              {removidas.map((ob) => (
                <Card key={ob.id} className="opacity-50">
                  <CardContent className="flex items-center justify-between py-3 px-5">
                    <div>
                      <p className="font-medium text-sm line-through">{ob.nombre}</p>
                      <p className="text-xs text-muted-foreground">{ob.categoria}</p>
                    </div>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => handleRestore(ob.id)}
                    >
                      <RotateCcw className="h-4 w-4" />
                    </Button>
                  </CardContent>
                </Card>
              ))}
            </div>
          )}
        </div>
      )}

      {/* Add dialog */}
      <Dialog open={showAdd} onOpenChange={setShowAdd}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Agregar obligación fiscal</DialogTitle>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div className="flex gap-2">
              <Button
                variant={addMode === 'catalogo' ? 'default' : 'outline'}
                size="sm"
                onClick={() => setAddMode('catalogo')}
              >
                Del catálogo
              </Button>
              <Button
                variant={addMode === 'custom' ? 'default' : 'outline'}
                size="sm"
                onClick={() => setAddMode('custom')}
              >
                Personalizada
              </Button>
            </div>

            {addMode === 'catalogo' ? (
              <div className="max-h-64 overflow-y-auto space-y-1 border rounded-md p-1">
                {catalogo.length === 0 ? (
                  <p className="text-sm text-muted-foreground text-center py-4">
                    Cargando catálogo...
                  </p>
                ) : (
                  catalogo.map((item) => {
                    const yaAgregada = obligaciones.some(
                      (o) => o.catalogoId === item.id && o.activa
                    );
                    return (
                      <button
                        key={item.id}
                        disabled={yaAgregada}
                        onClick={() => setSelectedCatalogoId(item.id)}
                        className={cn(
                          'w-full text-left p-3 rounded-md text-sm transition-colors',
                          yaAgregada
                            ? 'opacity-30 cursor-not-allowed'
                            : selectedCatalogoId === item.id
                            ? 'bg-primary/10 border border-primary'
                            : 'hover:bg-accent'
                        )}
                      >
                        <p className="font-medium">{item.nombre}</p>
                        <p className="text-xs text-muted-foreground">
                          {item.categoria} · {item.frecuencia} · {item.fechaLimite}
                        </p>
                      </button>
                    );
                  })
                )}
              </div>
            ) : (
              <div className="space-y-3">
                <div>
                  <Label>Nombre *</Label>
                  <Input
                    value={customForm.nombre}
                    onChange={(e) =>
                      setCustomForm((p) => ({ ...p, nombre: e.target.value }))
                    }
                    placeholder="Nombre de la obligación"
                  />
                </div>
                <div>
                  <Label>Fundamento legal</Label>
                  <Input
                    value={customForm.fundamento}
                    onChange={(e) =>
                      setCustomForm((p) => ({ ...p, fundamento: e.target.value }))
                    }
                    placeholder="Art. X LISR"
                  />
                </div>
                <div className="grid grid-cols-2 gap-2">
                  <div>
                    <Label>Frecuencia</Label>
                    <Input
                      value={customForm.frecuencia}
                      onChange={(e) =>
                        setCustomForm((p) => ({ ...p, frecuencia: e.target.value }))
                      }
                      placeholder="mensual, anual..."
                    />
                  </div>
                  <div>
                    <Label>Fecha límite</Label>
                    <Input
                      value={customForm.fechaLimite}
                      onChange={(e) =>
                        setCustomForm((p) => ({ ...p, fechaLimite: e.target.value }))
                      }
                      placeholder="Día 17 del mes..."
                    />
                  </div>
                </div>
                <div>
                  <Label>Categoría</Label>
                  <Input
                    value={customForm.categoria}
                    onChange={(e) =>
                      setCustomForm((p) => ({ ...p, categoria: e.target.value }))
                    }
                    placeholder="Federal mensual, Anual..."
                  />
                </div>
              </div>
            )}
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowAdd(false)}>
              Cancelar
            </Button>
            <Button
              onClick={handleAdd}
              disabled={
                addMode === 'catalogo' ? !selectedCatalogoId : !customForm.nombre
              }
            >
              Agregar
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
          </>
        )}
      </div>
    </>
  );
}