'use client';

import { useState } from 'react';
import { DashboardShell } from '@/components/layouts/dashboard-shell';
import { Card, CardContent, CardHeader, CardTitle, Button, Input, Label } from '@horux/shared-ui';
import { useEventos, useCreateEvento, useUpdateEvento, useDeleteEvento } from '@/lib/hooks/use-calendario';
import { useAuthStore } from '@/stores/auth-store';
import {
  Calendar, ChevronLeft, ChevronRight, Check, Clock, FileText,
  CreditCard, Plus, X, Pencil, Trash2, Lock, Globe, AlertTriangle,
} from 'lucide-react';
import { cn } from '@horux/shared-ui';
import type { EventoFiscal } from '@horux/shared';

const meses = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];

const tipoIcons: Record<string, any> = {
  declaracion: FileText,
  pago: CreditCard,
  obligacion: Clock,
  informativa: FileText,
  custom: Calendar,
  'obligacion-pendiente': Clock,
  'obligacion-completada': Check,
  'obligacion-atrasada': AlertTriangle,
};

const tipoColors: Record<string, string> = {
  declaracion: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
  pago: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
  obligacion: 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200',
  informativa: 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200',
  custom: 'bg-violet-100 text-violet-800 dark:bg-violet-900 dark:text-violet-200',
  'obligacion-pendiente': 'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200',
  'obligacion-completada': 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
  'obligacion-atrasada': 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200',
};

interface RecordatorioForm {
  titulo: string;
  descripcion: string;
  fechaLimite: string;
  notas: string;
  privado: boolean;
}

const emptyForm: RecordatorioForm = {
  titulo: '',
  descripcion: '',
  fechaLimite: '',
  notas: '',
  privado: false,
};

export default function CalendarioPage() {
  const [año, setAño] = useState(new Date().getFullYear());
  const [mes, setMes] = useState(new Date().getMonth() + 1);
  const { data: eventos, isLoading } = useEventos(año);
  const createEvento = useCreateEvento();
  const updateEvento = useUpdateEvento();
  const deleteEvento = useDeleteEvento();
  const { user } = useAuthStore();

  const [showForm, setShowForm] = useState(false);
  const [editingId, setEditingId] = useState<number | null>(null);
  const [form, setForm] = useState<RecordatorioForm>(emptyForm);

  const canEdit = ['owner', 'cfo', 'contador', 'auxiliar', 'supervisor'].includes(user?.role || '');

  const handlePrevMonth = () => {
    if (mes === 1) { setMes(12); setAño(año - 1); }
    else setMes(mes - 1);
  };

  const handleNextMonth = () => {
    if (mes === 12) { setMes(1); setAño(año + 1); }
    else setMes(mes + 1);
  };

  const handleToggleComplete = (evento: EventoFiscal) => {
    if (!evento.id) return;
    if (evento.tipo === 'custom') {
      updateEvento.mutate({ id: evento.id, data: { completado: !evento.completado } });
    }
  };

  const handleOpenCreate = () => {
    setEditingId(null);
    const defaultDate = `${año}-${String(mes).padStart(2, '0')}-15`;
    setForm({ ...emptyForm, fechaLimite: defaultDate });
    setShowForm(true);
  };

  const handleOpenEdit = (evento: EventoFiscal) => {
    if (!evento.id || evento.tipo !== 'custom') return;
    setEditingId(evento.id);
    setForm({
      titulo: evento.titulo,
      descripcion: evento.descripcion || '',
      fechaLimite: evento.fechaLimite,
      notas: evento.notas || '',
      privado: (evento as any).privado ?? false,
    });
    setShowForm(true);
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      if (editingId) {
        await updateEvento.mutateAsync({
          id: editingId,
          data: { titulo: form.titulo, descripcion: form.descripcion, fechaLimite: form.fechaLimite, notas: form.notas, privado: form.privado } as any,
        });
      } else {
        await createEvento.mutateAsync({
          titulo: form.titulo,
          descripcion: form.descripcion,
          tipo: 'custom',
          fechaLimite: form.fechaLimite,
          recurrencia: 'unica',
          notas: form.notas,
          privado: form.privado,
        } as any);
      }
      setShowForm(false);
      setForm(emptyForm);
      setEditingId(null);
    } catch {
      alert('Error al guardar recordatorio');
    }
  };

  const handleDelete = async (id: number) => {
    if (!confirm('¿Eliminar este recordatorio?')) return;
    try {
      await deleteEvento.mutateAsync(id);
    } catch {
      alert('Error al eliminar');
    }
  };

  const handleCancelForm = () => {
    setShowForm(false);
    setForm(emptyForm);
    setEditingId(null);
  };

  // Generate calendar days
  const firstDay = new Date(año, mes - 1, 1).getDay();
  const daysInMonth = new Date(año, mes, 0).getDate();
  const days = Array.from({ length: 42 }, (_, i) => {
    const day = i - firstDay + 1;
    if (day < 1 || day > daysInMonth) return null;
    return day;
  });

  const getEventosForDay = (day: number) => {
    return eventos?.filter(e => {
      const fecha = new Date(e.fechaLimite + 'T00:00:00');
      return fecha.getFullYear() === año && fecha.getMonth() + 1 === mes && fecha.getDate() === day;
    }) || [];
  };

  const eventosDelMes = eventos?.filter(e => {
    const f = new Date(e.fechaLimite + 'T00:00:00');
    return f.getFullYear() === año && f.getMonth() + 1 === mes;
  }) || [];

  return (
    <DashboardShell title="Calendario Fiscal">
      {/* Modal de crear/editar */}
      {showForm && (
        <Card className="mb-4">
          <CardHeader>
            <div className="flex items-center justify-between">
              <CardTitle className="text-base">
                {editingId ? 'Editar Recordatorio' : 'Nuevo Recordatorio'}
              </CardTitle>
              <Button variant="ghost" size="icon" onClick={handleCancelForm}>
                <X className="h-4 w-4" />
              </Button>
            </div>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleSubmit} className="space-y-4">
              <div className="grid gap-4 md:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="titulo">Título</Label>
                  <Input
                    id="titulo"
                    value={form.titulo}
                    onChange={e => setForm({ ...form, titulo: e.target.value })}
                    placeholder="Reunión con contador"
                    required
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="fechaLimite">Fecha</Label>
                  <Input
                    id="fechaLimite"
                    type="date"
                    value={form.fechaLimite}
                    onChange={e => setForm({ ...form, fechaLimite: e.target.value })}
                    required
                  />
                </div>
              </div>
              <div className="space-y-2">
                <Label htmlFor="descripcion">Descripción (opcional)</Label>
                <Input
                  id="descripcion"
                  value={form.descripcion}
                  onChange={e => setForm({ ...form, descripcion: e.target.value })}
                  placeholder="Revisión de declaración mensual"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="notas">Notas (opcional)</Label>
                <Input
                  id="notas"
                  value={form.notas}
                  onChange={e => setForm({ ...form, notas: e.target.value })}
                  placeholder="Llevar estados de cuenta"
                />
              </div>
              <div className="flex items-center gap-3">
                <button
                  type="button"
                  onClick={() => setForm({ ...form, privado: !form.privado })}
                  className={cn(
                    'flex items-center gap-2 px-3 py-2 rounded-lg border text-sm transition-colors',
                    form.privado
                      ? 'border-orange-300 bg-orange-50 text-orange-700 dark:border-orange-700 dark:bg-orange-950 dark:text-orange-300'
                      : 'border-green-300 bg-green-50 text-green-700 dark:border-green-700 dark:bg-green-950 dark:text-green-300'
                  )}
                >
                  {form.privado ? <Lock className="h-4 w-4" /> : <Globe className="h-4 w-4" />}
                  {form.privado ? 'Privado' : 'Público'}
                </button>
                <span className="text-xs text-muted-foreground">
                  {form.privado ? 'Solo tú puedes verlo' : 'Visible para todo el equipo'}
                </span>
              </div>
              <div className="flex gap-2 justify-end">
                <Button type="button" variant="outline" onClick={handleCancelForm}>
                  Cancelar
                </Button>
                <Button type="submit" disabled={createEvento.isPending || updateEvento.isPending}>
                  {editingId
                    ? (updateEvento.isPending ? 'Guardando...' : 'Guardar')
                    : (createEvento.isPending ? 'Creando...' : 'Crear Recordatorio')}
                </Button>
              </div>
            </form>
          </CardContent>
        </Card>
      )}

      <div className="grid gap-4 lg:grid-cols-3">
        {/* Calendar */}
        <Card className="lg:col-span-2">
          <CardHeader className="flex flex-row items-center justify-between">
            <CardTitle className="flex items-center gap-2">
              <Calendar className="h-5 w-5" />
              {meses[mes - 1]} {año}
            </CardTitle>
            <div className="flex gap-1">
              {canEdit && !showForm && (
                <Button variant="outline" size="sm" onClick={handleOpenCreate} className="mr-2">
                  <Plus className="h-4 w-4 mr-1" />
                  Recordatorio
                </Button>
              )}
              <Button variant="outline" size="icon" onClick={handlePrevMonth}>
                <ChevronLeft className="h-4 w-4" />
              </Button>
              <Button variant="outline" size="icon" onClick={handleNextMonth}>
                <ChevronRight className="h-4 w-4" />
              </Button>
            </div>
          </CardHeader>
          <CardContent>
            {/* Leyenda de colores por estado de obligación */}
            <div className="flex items-center gap-3 flex-wrap text-xs text-muted-foreground mb-3 pb-2 border-b">
              <span className="inline-flex items-center gap-1.5">
                <span className="h-2.5 w-2.5 rounded bg-amber-400" />
                Pendiente
              </span>
              <span className="inline-flex items-center gap-1.5">
                <span className="h-2.5 w-2.5 rounded bg-green-500" />
                Completada
              </span>
              <span className="inline-flex items-center gap-1.5">
                <span className="h-2.5 w-2.5 rounded bg-red-500" />
                Atrasada
              </span>
              <span className="inline-flex items-center gap-1.5 ml-2">
                <span className="h-2.5 w-2.5 rounded bg-violet-400" />
                Recordatorio custom
              </span>
            </div>
            <div className="grid grid-cols-7 gap-1">
              {['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'].map(d => (
                <div key={d} className="text-center text-xs md:text-sm font-medium text-muted-foreground py-1 md:py-2">
                  <span className="md:hidden">{d.charAt(0)}</span>
                  <span className="hidden md:inline">{d}</span>
                </div>
              ))}
              {days.map((day, i) => {
                const dayEventos = day ? getEventosForDay(day) : [];
                const isToday = day === new Date().getDate() && mes === new Date().getMonth() + 1 && año === new Date().getFullYear();
                return (
                  <div
                    key={i}
                    className={cn(
                      'min-h-[60px] md:min-h-[80px] p-0.5 md:p-1 border rounded-md',
                      day ? 'bg-background' : 'bg-muted/30',
                      isToday && 'ring-2 ring-primary'
                    )}
                  >
                    {day && (
                      <>
                        <div className={cn('text-xs md:text-sm font-medium', isToday && 'text-primary')}>{day}</div>
                        <div className="space-y-1 mt-1">
                          {dayEventos.slice(0, 2).map((e, idx) => {
                            const Icon = tipoIcons[e.tipo] || Calendar;
                            return (
                              <div
                                key={`${e.id}-${idx}`}
                                className={cn(
                                  'text-xs px-1 py-0.5 rounded truncate flex items-center gap-1',
                                  tipoColors[e.tipo],
                                  e.completado && 'opacity-50 line-through',
                                  e.tipo === 'custom' && canEdit && 'cursor-pointer'
                                )}
                                title={e.titulo}
                                onClick={() => e.tipo === 'custom' && canEdit && handleOpenEdit(e)}
                              >
                                <Icon className="h-3 w-3 flex-shrink-0" />
                                <span className="truncate">{e.titulo}</span>
                              </div>
                            );
                          })}
                          {dayEventos.length > 2 && (
                            <div className="text-xs text-muted-foreground">+{dayEventos.length - 2} más</div>
                          )}
                        </div>
                      </>
                    )}
                  </div>
                );
              })}
            </div>
          </CardContent>
        </Card>

        {/* Event List */}
        <Card>
          <CardHeader>
            <CardTitle>Eventos del Mes</CardTitle>
          </CardHeader>
          <CardContent>
            {isLoading ? (
              <div className="text-center py-4 text-muted-foreground">Cargando...</div>
            ) : eventosDelMes.length === 0 ? (
              <div className="text-center py-4 text-muted-foreground">No hay eventos este mes</div>
            ) : (
              <div className="space-y-3">
                {eventosDelMes.map((evento, idx) => {
                  const Icon = tipoIcons[evento.tipo] || FileText;
                  const isCustom = evento.tipo === 'custom';
                  return (
                    <div
                      key={`${evento.fechaLimite}-${evento.titulo}-${idx}`}
                      className={cn(
                        'p-3 rounded-lg border',
                        evento.completado && 'opacity-50'
                      )}
                    >
                      <div className="flex items-start gap-2">
                        <div className={cn('p-1.5 rounded', tipoColors[evento.tipo] || 'bg-muted')}>
                          <Icon className="h-4 w-4" />
                        </div>
                        <div className="flex-1 min-w-0">
                          <div className="flex items-center gap-1">
                            <h4 className={cn('font-medium text-sm truncate', evento.completado && 'line-through')}>
                              {evento.titulo}
                            </h4>
                            {isCustom && (evento as any).privado && (
                              <Lock className="h-3 w-3 text-muted-foreground flex-shrink-0" />
                            )}
                          </div>
                          {evento.descripcion && (
                            <p className="text-xs text-muted-foreground mt-0.5 truncate">{evento.descripcion}</p>
                          )}
                          <p className="text-xs text-muted-foreground mt-1">
                            {new Date(evento.fechaLimite + 'T00:00:00').toLocaleDateString('es-MX', {
                              day: 'numeric',
                              month: 'short',
                            })}
                          </p>
                        </div>
                        {isCustom && canEdit && (
                          <div className="flex gap-1 flex-shrink-0">
                            <Button
                              variant="ghost" size="icon" className="h-7 w-7"
                              onClick={() => handleToggleComplete(evento)}
                              title={evento.completado ? 'Marcar pendiente' : 'Marcar completado'}
                            >
                              <Check className={cn('h-3.5 w-3.5', evento.completado && 'text-green-600')} />
                            </Button>
                            <Button
                              variant="ghost" size="icon" className="h-7 w-7"
                              onClick={() => handleOpenEdit(evento)}
                            >
                              <Pencil className="h-3.5 w-3.5" />
                            </Button>
                            <Button
                              variant="ghost" size="icon" className="h-7 w-7 text-destructive"
                              onClick={() => evento.id && handleDelete(evento.id)}
                            >
                              <Trash2 className="h-3.5 w-3.5" />
                            </Button>
                          </div>
                        )}
                      </div>
                    </div>
                  );
                })}
              </div>
            )}
          </CardContent>
        </Card>
      </div>
    </DashboardShell>
  );
}