'use client';

import { useState, useEffect } from 'react';
import { useSession } from 'next-auth/react';
import { useRouter } from 'next/navigation';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
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 { Switch } from '@/components/ui/switch';
import { 
  ArrowLeft, 
  Save, 
  Plus, 
  Trash2, 
  Eye, 
  Settings,
  Sparkles,
  FileText,
  Layout,
  Users,
  Calendar,
  Activity,
  Target,
  BookOpen,
  Trophy,
  RefreshCw
} from 'lucide-react';
import { toast } from 'sonner';

interface ContenidoWeb {
  id: string;
  tipo: string;
  clave: string;
  titulo: string | null;
  contenido: string | null;
  icono: string | null;
  enlace: string | null;
  orden: number;
  activo: boolean;
}

const TIPOS_CONTENIDO = [
  { value: 'HERO_TITULO', label: 'Título Principal (Hero)' },
  { value: 'HERO_DESCRIPCION', label: 'Descripción Hero' },
  { value: 'SECCION_TITULO', label: 'Título de Sección' },
  { value: 'FEATURE_CARD', label: 'Tarjeta de Característica' },
  { value: 'NOTICIA', label: 'Noticia' },
  { value: 'ANUNCIO', label: 'Anuncio' },
  { value: 'CONTACTO', label: 'Información de Contacto' }
];

const ICONOS_DISPONIBLES = [
  { value: 'Users', label: 'Usuarios', icon: Users },
  { value: 'Calendar', label: 'Calendario', icon: Calendar },
  { value: 'Activity', label: 'Actividad', icon: Activity },
  { value: 'Target', label: 'Objetivo', icon: Target },
  { value: 'BookOpen', label: 'Libro', icon: BookOpen },
  { value: 'Trophy', label: 'Trofeo', icon: Trophy },
  { value: 'FileText', label: 'Documento', icon: FileText },
  { value: 'Settings', label: 'Configuración', icon: Settings }
];

export default function CMSPage() {
  const { data: session, status } = useSession() || {};
  const router = useRouter();
  const [contenidos, setContenidos] = useState<ContenidoWeb[]>([]);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [editando, setEditando] = useState<ContenidoWeb | null>(null);
  const [nuevoContenido, setNuevoContenido] = useState(false);

  useEffect(() => {
    if (status === 'loading') return;
    if (!session?.user || session.user.rol !== 'COORDINADOR') {
      router.push('/dashboard');
      return;
    }
    fetchContenidos();
  }, [session, status, router]);

  const fetchContenidos = async () => {
    try {
      const res = await fetch('/api/cms');
      const data = await res.json();
      if (data.success) {
        setContenidos(data.contenidos);
      }
    } catch (error) {
      toast.error('Error cargando contenido');
    } finally {
      setLoading(false);
    }
  };

  const inicializarContenido = async () => {
    try {
      setSaving(true);
      const res = await fetch('/api/cms/inicializar', { method: 'POST' });
      const data = await res.json();
      
      if (data.success) {
        toast.success('Contenido inicializado correctamente');
        fetchContenidos();
      } else {
        toast.error(data.error || 'Error inicializando');
      }
    } catch (error) {
      toast.error('Error al inicializar contenido');
    } finally {
      setSaving(false);
    }
  };

  const guardarContenido = async (contenido: Partial<ContenidoWeb>) => {
    try {
      setSaving(true);
      const isNew = !contenido.id;
      
      const res = await fetch('/api/cms', {
        method: isNew ? 'POST' : 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(contenido)
      });
      
      const data = await res.json();
      
      if (data.success) {
        toast.success(isNew ? 'Contenido creado' : 'Contenido actualizado');
        setEditando(null);
        setNuevoContenido(false);
        fetchContenidos();
      } else {
        toast.error(data.error || 'Error guardando');
      }
    } catch (error) {
      toast.error('Error al guardar');
    } finally {
      setSaving(false);
    }
  };

  const eliminarContenido = async (id: string) => {
    if (!confirm('¿Está seguro de eliminar este contenido?')) return;
    
    try {
      const res = await fetch(`/api/cms/${id}`, { method: 'DELETE' });
      const data = await res.json();
      
      if (data.success) {
        toast.success('Contenido eliminado');
        fetchContenidos();
      } else {
        toast.error(data.error || 'Error eliminando');
      }
    } catch (error) {
      toast.error('Error al eliminar');
    }
  };

  const agruparPorTipo = () => {
    const grupos: Record<string, ContenidoWeb[]> = {};
    contenidos.forEach(c => {
      if (!grupos[c.tipo]) grupos[c.tipo] = [];
      grupos[c.tipo].push(c);
    });
    return grupos;
  };

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="animate-spin h-8 w-8 border-4 border-blue-500 border-t-transparent rounded-full"></div>
      </div>
    );
  }

  const grupos = agruparPorTipo();

  return (
    <div className="min-h-screen bg-gray-50 p-6">
      <div className="max-w-6xl mx-auto">
        {/* Header */}
        <div className="flex items-center justify-between mb-6">
          <div className="flex items-center gap-4">
            <Button variant="ghost" size="icon" onClick={() => router.push('/dashboard')}>
              <ArrowLeft className="h-5 w-5" />
            </Button>
            <div>
              <h1 className="text-2xl font-bold text-gray-900 flex items-center gap-2">
                <Layout className="h-6 w-6 text-blue-600" />
                Gestión de Contenido Web
              </h1>
              <p className="text-gray-600">Personaliza la página de bienvenida de la escuela</p>
            </div>
          </div>
          <div className="flex gap-2">
            <Button variant="outline" onClick={() => window.open('/', '_blank')}>
              <Eye className="h-4 w-4 mr-2" />
              Ver Página
            </Button>
            {contenidos.length === 0 && (
              <Button onClick={inicializarContenido} disabled={saving}>
                <Sparkles className="h-4 w-4 mr-2" />
                Inicializar Contenido
              </Button>
            )}
            <Button onClick={() => setNuevoContenido(true)}>
              <Plus className="h-4 w-4 mr-2" />
              Nuevo
            </Button>
          </div>
        </div>

        {/* Sin contenido */}
        {contenidos.length === 0 && !nuevoContenido && (
          <Card className="text-center py-12">
            <CardContent>
              <Layout className="h-16 w-16 mx-auto text-gray-400 mb-4" />
              <h3 className="text-xl font-semibold text-gray-700 mb-2">Sin contenido configurado</h3>
              <p className="text-gray-500 mb-4">
                Inicializa el contenido por defecto o crea contenido personalizado
              </p>
              <Button onClick={inicializarContenido} disabled={saving}>
                <Sparkles className="h-4 w-4 mr-2" />
                Inicializar con valores por defecto
              </Button>
            </CardContent>
          </Card>
        )}

        {/* Editor de nuevo contenido */}
        {(nuevoContenido || editando) && (
          <Card className="mb-6 border-blue-200 bg-blue-50/50">
            <CardHeader>
              <CardTitle>{editando ? 'Editar Contenido' : 'Nuevo Contenido'}</CardTitle>
            </CardHeader>
            <CardContent>
              <EditorContenido
                contenido={editando}
                onSave={guardarContenido}
                onCancel={() => { setEditando(null); setNuevoContenido(false); }}
                saving={saving}
              />
            </CardContent>
          </Card>
        )}

        {/* Lista de contenidos agrupados */}
        {Object.entries(grupos).map(([tipo, items]) => (
          <Card key={tipo} className="mb-4">
            <CardHeader className="py-3">
              <CardTitle className="text-lg flex items-center gap-2">
                {TIPOS_CONTENIDO.find(t => t.value === tipo)?.label || tipo}
                <span className="text-sm font-normal text-gray-500">({items.length})</span>
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-2">
                {items.sort((a, b) => a.orden - b.orden).map(item => (
                  <div 
                    key={item.id} 
                    className={`flex items-center justify-between p-3 rounded-lg border ${
                      item.activo ? 'bg-white' : 'bg-gray-100 opacity-60'
                    }`}
                  >
                    <div className="flex-1">
                      <div className="flex items-center gap-2">
                        {item.icono && getIconComponent(item.icono)}
                        <span className="font-medium">{item.titulo || item.clave}</span>
                        {!item.activo && (
                          <span className="text-xs bg-gray-200 px-2 py-0.5 rounded">Inactivo</span>
                        )}
                      </div>
                      {item.contenido && (
                        <p className="text-sm text-gray-600 mt-1 line-clamp-1">{item.contenido}</p>
                      )}
                    </div>
                    <div className="flex items-center gap-2">
                      <Button size="sm" variant="ghost" onClick={() => setEditando(item)}>
                        <Settings className="h-4 w-4" />
                      </Button>
                      <Button size="sm" variant="ghost" className="text-red-500" onClick={() => eliminarContenido(item.id)}>
                        <Trash2 className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}

function getIconComponent(iconName: string) {
  const icons: Record<string, React.ElementType> = {
    Users, Calendar, Activity, Target, BookOpen, Trophy, FileText, Settings
  };
  const Icon = icons[iconName];
  return Icon ? <Icon className="h-4 w-4 text-blue-600" /> : null;
}

interface EditorContenidoProps {
  contenido: ContenidoWeb | null;
  onSave: (c: Partial<ContenidoWeb>) => void;
  onCancel: () => void;
  saving: boolean;
}

function EditorContenido({ contenido, onSave, onCancel, saving }: EditorContenidoProps) {
  const [form, setForm] = useState({
    id: contenido?.id || '',
    tipo: contenido?.tipo || 'FEATURE_CARD',
    clave: contenido?.clave || '',
    titulo: contenido?.titulo || '',
    contenido: contenido?.contenido || '',
    icono: contenido?.icono || '',
    enlace: contenido?.enlace || '',
    orden: contenido?.orden || 0,
    activo: contenido?.activo ?? true
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!form.clave) {
      toast.error('La clave es requerida');
      return;
    }
    onSave(form);
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <Label>Tipo de Contenido</Label>
          <Select 
            value={form.tipo} 
            onValueChange={(v) => setForm({...form, tipo: v})}
            disabled={!!contenido}
          >
            <SelectTrigger>
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              {TIPOS_CONTENIDO.map(t => (
                <SelectItem key={t.value} value={t.value}>{t.label}</SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
        <div>
          <Label>Clave Única</Label>
          <Input 
            value={form.clave}
            onChange={(e) => setForm({...form, clave: e.target.value})}
            placeholder="ej: feature_nuevo"
            disabled={!!contenido}
          />
        </div>
      </div>

      <div>
        <Label>Título</Label>
        <Input 
          value={form.titulo}
          onChange={(e) => setForm({...form, titulo: e.target.value})}
          placeholder="Título del contenido"
        />
      </div>

      <div>
        <Label>Contenido / Descripción</Label>
        <Textarea 
          value={form.contenido}
          onChange={(e) => setForm({...form, contenido: e.target.value})}
          placeholder="Texto del contenido..."
          rows={3}
        />
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div>
          <Label>Icono</Label>
          <Select value={form.icono} onValueChange={(v) => setForm({...form, icono: v})}>
            <SelectTrigger>
              <SelectValue placeholder="Seleccionar icono" />
            </SelectTrigger>
            <SelectContent>
              {ICONOS_DISPONIBLES.map(i => (
                <SelectItem key={i.value} value={i.value}>
                  <div className="flex items-center gap-2">
                    <i.icon className="h-4 w-4" />
                    {i.label}
                  </div>
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
        <div>
          <Label>Orden</Label>
          <Input 
            type="number"
            value={form.orden}
            onChange={(e) => setForm({...form, orden: parseInt(e.target.value) || 0})}
          />
        </div>
        <div className="flex items-center gap-2 pt-6">
          <Switch 
            checked={form.activo}
            onCheckedChange={(v) => setForm({...form, activo: v})}
          />
          <Label>Activo</Label>
        </div>
      </div>

      <div className="flex justify-end gap-2 pt-4">
        <Button type="button" variant="outline" onClick={onCancel}>
          Cancelar
        </Button>
        <Button type="submit" disabled={saving}>
          {saving ? <RefreshCw className="h-4 w-4 animate-spin mr-2" /> : <Save className="h-4 w-4 mr-2" />}
          Guardar
        </Button>
      </div>
    </form>
  );
}