'use client';

import { useState, useEffect, useCallback } from 'react';
import { Plus, Loader2, Clock, Trash2, Edit2, X, Save, Coffee } from 'lucide-react';

interface Horario {
  id: string;
  nombre: string;
  fechaInicio: string;
  fechaFin: string;
  horaEntrada: string;
  horaSalida: string;
  horaEntrada2: string | null;
  horaSalida2: string | null;
  horaComidaInicio: string;
  horaComidaFin: string;
  activo: boolean;
}

const emptyForm = {
  nombre: '',
  fechaInicio: '',
  fechaFin: '',
  horaEntrada: '08:00',
  horaSalida: '15:00',
  horaEntrada2: '',
  horaSalida2: '',
  horaComidaInicio: '14:00',
  horaComidaFin: '15:00',
  jornadaPartida: false,
};

export default function HorariosTab() {
  const [horarios, setHorarios] = useState<Horario[]>([]);
  const [loading, setLoading] = useState(true);
  const [showForm, setShowForm] = useState(false);
  const [editingId, setEditingId] = useState<string | null>(null);
  const [form, setForm] = useState({ ...emptyForm });
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState('');

  const fetchHorarios = useCallback(async () => {
    try {
      const res = await fetch('/api/configuracion/horarios');
      const data = await res.json();
      if (data.success) setHorarios(data.horarios);
    } catch (err) {
      console.error('Error cargando horarios:', err);
    } finally {
      setLoading(false);
    }
  }, []);

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

  const handleSubmit = async () => {
    if (!form.nombre || !form.fechaInicio || !form.fechaFin || !form.horaEntrada || !form.horaSalida) {
      setError('Completa todos los campos obligatorios');
      return;
    }
    setSaving(true);
    setError('');
    try {
      const payload = {
        nombre: form.nombre,
        fechaInicio: form.fechaInicio,
        fechaFin: form.fechaFin,
        horaEntrada: form.horaEntrada,
        horaSalida: form.horaSalida,
        horaEntrada2: form.jornadaPartida ? form.horaEntrada2 : null,
        horaSalida2: form.jornadaPartida ? form.horaSalida2 : null,
        horaComidaInicio: form.horaComidaInicio,
        horaComidaFin: form.horaComidaFin,
      };

      const url = editingId ? `/api/configuracion/horarios/${editingId}` : '/api/configuracion/horarios';
      const method = editingId ? 'PUT' : 'POST';
      const res = await fetch(url, {
        method,
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });
      const data = await res.json();
      if (data.success) {
        setShowForm(false);
        setEditingId(null);
        setForm({ ...emptyForm });
        fetchHorarios();
      } else {
        setError(data.error || 'Error guardando');
      }
    } catch (err) {
      console.error('Error:', err);
      setError('Error de conexión');
    } finally {
      setSaving(false);
    }
  };

  const handleEdit = (h: Horario) => {
    setEditingId(h.id);
    setForm({
      nombre: h.nombre,
      fechaInicio: h.fechaInicio.split('T')[0],
      fechaFin: h.fechaFin.split('T')[0],
      horaEntrada: h.horaEntrada,
      horaSalida: h.horaSalida,
      horaEntrada2: h.horaEntrada2 || '',
      horaSalida2: h.horaSalida2 || '',
      horaComidaInicio: h.horaComidaInicio,
      horaComidaFin: h.horaComidaFin,
      jornadaPartida: !!(h.horaEntrada2 && h.horaSalida2),
    });
    setShowForm(true);
    setError('');
  };

  const handleDelete = async (id: string) => {
    if (!confirm('¿Eliminar este horario?')) return;
    try {
      await fetch(`/api/configuracion/horarios/${id}`, { method: 'DELETE' });
      fetchHorarios();
    } catch (err) {
      console.error('Error eliminando:', err);
    }
  };

  const formatDate = (d: string) => {
    const date = new Date(d);
    return date.toLocaleDateString('es-ES', { day: '2-digit', month: 'short', year: 'numeric' });
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center py-12">
        <Loader2 className="w-6 h-6 animate-spin text-gray-400" />
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div className="bg-white rounded-xl border border-gray-200 p-6">
        <div className="flex items-center justify-between mb-4">
          <div className="flex items-center gap-2">
            <Clock className="w-5 h-5 text-[#1a365d]" />
            <h3 className="text-lg font-semibold text-gray-900">Horarios Laborales</h3>
          </div>
          <button
            onClick={() => {
              setShowForm(true);
              setEditingId(null);
              setForm({ ...emptyForm });
              setError('');
            }}
            className="flex items-center gap-2 px-4 py-2 bg-[#1a365d] text-white rounded-lg text-sm font-medium hover:bg-[#2d4a7c] transition"
          >
            <Plus className="w-4 h-4" />
            Nuevo horario
          </button>
        </div>

        <p className="text-sm text-gray-500 mb-4">
          Define períodos de jornada laboral (intensiva o partida) con sus horarios y rangos de fechas.
        </p>

        {/* Lista de horarios */}
        {horarios.length === 0 ? (
          <div className="text-center py-8 text-gray-400">
            <Clock className="w-10 h-10 mx-auto mb-2 opacity-50" />
            <p>No hay horarios definidos</p>
            <p className="text-xs">Crea un horario para definir la jornada laboral</p>
          </div>
        ) : (
          <div className="space-y-3">
            {horarios.map((h) => (
              <div key={h.id} className={`border rounded-lg p-4 ${h.activo ? 'border-gray-200 bg-white' : 'border-gray-100 bg-gray-50 opacity-60'}`}>
                <div className="flex items-start justify-between">
                  <div>
                    <div className="flex items-center gap-2">
                      <h4 className="font-medium text-gray-900">{h.nombre}</h4>
                      {h.activo ? (
                        <span className="text-xs px-2 py-0.5 bg-green-100 text-green-700 rounded-full">Activo</span>
                      ) : (
                        <span className="text-xs px-2 py-0.5 bg-gray-100 text-gray-500 rounded-full">Inactivo</span>
                      )}
                    </div>
                    <p className="text-sm text-gray-500 mt-1">
                      {formatDate(h.fechaInicio)} — {formatDate(h.fechaFin)}
                    </p>
                    <div className="flex items-center gap-4 mt-2 text-sm">
                      <span className="flex items-center gap-1 text-gray-700">
                        <Clock className="w-3.5 h-3.5" />
                        {h.horaEntrada} - {h.horaSalida}
                      </span>
                      {h.horaEntrada2 && h.horaSalida2 && (
                        <span className="flex items-center gap-1 text-gray-700">
                          <Clock className="w-3.5 h-3.5" />
                          {h.horaEntrada2} - {h.horaSalida2}
                        </span>
                      )}
                      <span className="flex items-center gap-1 text-orange-600">
                        <Coffee className="w-3.5 h-3.5" />
                        Comida: {h.horaComidaInicio} - {h.horaComidaFin}
                      </span>
                    </div>
                  </div>
                  <div className="flex gap-1">
                    <button onClick={() => handleEdit(h)} className="p-1.5 text-gray-400 hover:text-[#1a365d] hover:bg-gray-100 rounded-lg transition">
                      <Edit2 className="w-4 h-4" />
                    </button>
                    <button onClick={() => handleDelete(h.id)} className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition">
                      <Trash2 className="w-4 h-4" />
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* Modal/Formulario */}
      {showForm && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-xl max-w-lg w-full max-h-[90vh] overflow-y-auto">
            <div className="flex items-center justify-between p-4 border-b">
              <h3 className="font-semibold text-gray-900">
                {editingId ? 'Editar horario' : 'Nuevo horario laboral'}
              </h3>
              <button onClick={() => { setShowForm(false); setEditingId(null); }} className="p-1 hover:bg-gray-100 rounded-lg">
                <X className="w-5 h-5" />
              </button>
            </div>

            <div className="p-4 space-y-4">
              {error && <div className="text-sm text-red-600 bg-red-50 p-2 rounded-lg">{error}</div>}

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Nombre del período *</label>
                <input
                  type="text"
                  value={form.nombre}
                  onChange={(e) => setForm({ ...form, nombre: e.target.value })}
                  placeholder="Ej: Jornada intensiva verano"
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-[#1a365d]/20 focus:border-[#1a365d]"
                />
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Fecha inicio *</label>
                  <input
                    type="date"
                    value={form.fechaInicio}
                    onChange={(e) => setForm({ ...form, fechaInicio: e.target.value })}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-[#1a365d]/20 focus:border-[#1a365d]"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Fecha fin *</label>
                  <input
                    type="date"
                    value={form.fechaFin}
                    onChange={(e) => setForm({ ...form, fechaFin: e.target.value })}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-[#1a365d]/20 focus:border-[#1a365d]"
                  />
                </div>
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Hora entrada (mañana) *</label>
                  <input
                    type="time"
                    value={form.horaEntrada}
                    onChange={(e) => setForm({ ...form, horaEntrada: e.target.value })}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-[#1a365d]/20 focus:border-[#1a365d]"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Hora salida (mañana) *</label>
                  <input
                    type="time"
                    value={form.horaSalida}
                    onChange={(e) => setForm({ ...form, horaSalida: e.target.value })}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-[#1a365d]/20 focus:border-[#1a365d]"
                  />
                </div>
              </div>

              <div className="flex items-center gap-2">
                <input
                  type="checkbox"
                  id="jornadaPartida"
                  checked={form.jornadaPartida}
                  onChange={(e) => setForm({ ...form, jornadaPartida: e.target.checked })}
                  className="rounded border-gray-300"
                />
                <label htmlFor="jornadaPartida" className="text-sm font-medium text-gray-700">
                  Jornada partida (añadir segundo tramo por la tarde)
                </label>
              </div>

              {form.jornadaPartida && (
                <div className="grid grid-cols-2 gap-3 pl-4 border-l-2 border-[#1a365d]/20">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Hora entrada (tarde)</label>
                    <input
                      type="time"
                      value={form.horaEntrada2}
                      onChange={(e) => setForm({ ...form, horaEntrada2: e.target.value })}
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-[#1a365d]/20 focus:border-[#1a365d]"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Hora salida (tarde)</label>
                    <input
                      type="time"
                      value={form.horaSalida2}
                      onChange={(e) => setForm({ ...form, horaSalida2: e.target.value })}
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-[#1a365d]/20 focus:border-[#1a365d]"
                    />
                  </div>
                </div>
              )}

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    <Coffee className="w-3.5 h-3.5 inline mr-1" />
                    Hora inicio comida
                  </label>
                  <input
                    type="time"
                    value={form.horaComidaInicio}
                    onChange={(e) => setForm({ ...form, horaComidaInicio: e.target.value })}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-[#1a365d]/20 focus:border-[#1a365d]"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    <Coffee className="w-3.5 h-3.5 inline mr-1" />
                    Hora fin comida
                  </label>
                  <input
                    type="time"
                    value={form.horaComidaFin}
                    onChange={(e) => setForm({ ...form, horaComidaFin: e.target.value })}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-[#1a365d]/20 focus:border-[#1a365d]"
                  />
                </div>
              </div>
            </div>

            <div className="flex justify-end gap-2 p-4 border-t">
              <button
                onClick={() => { setShowForm(false); setEditingId(null); }}
                className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition"
              >
                Cancelar
              </button>
              <button
                onClick={handleSubmit}
                disabled={saving}
                className="flex items-center gap-2 px-4 py-2 bg-[#1a365d] text-white rounded-lg text-sm font-medium hover:bg-[#2d4a7c] disabled:opacity-50 transition"
              >
                {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
                {editingId ? 'Actualizar' : 'Crear'}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}