'use client';

import { useState, useEffect, useCallback } from 'react';
import { Save, Loader2, MapPin, Clock, CheckCircle } from 'lucide-react';
import { COMUNIDADES_AUTONOMAS } from '@/lib/configuracion/constants';

interface Config {
  id: string;
  comunidadAutonoma: string | null;
  municipio: string | null;
  provincia: string | null;
  margenDesplazamiento: number;
}

export default function GeneralTab() {
  const [config, setConfig] = useState<Config | null>(null);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [saved, setSaved] = useState(false);
  const [form, setForm] = useState({
    comunidadAutonoma: '',
    municipio: '',
    provincia: '',
    margenDesplazamiento: 10,
    enviarEmailAgendar: false,
    enviarEmailReagendar: false,
    plantillaAgendar: '',
    plantillaReagendar: '',
  });

  const fetchConfig = useCallback(async () => {
    try {
      const res = await fetch('/api/configuracion');
      const data = await res.json();
      if (data.success && data.config) {
        setConfig(data.config);
        setForm({
          comunidadAutonoma: data.config.comunidadAutonoma || '',
          municipio: data.config.municipio || '',
          provincia: data.config.provincia || '',
          margenDesplazamiento: data.config.margenDesplazamiento || 10,
          enviarEmailAgendar: data.config.enviarEmailAgendar || false,
          enviarEmailReagendar: data.config.enviarEmailReagendar || false,
          plantillaAgendar: data.config.plantillaAgendar || '',
          plantillaReagendar: data.config.plantillaReagendar || '',
        });
      }
    } catch (err) {
      console.error('Error cargando configuración:', err);
    } finally {
      setLoading(false);
    }
  }, []);

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

  const handleSave = async () => {
    setSaving(true);
    setSaved(false);
    try {
      const res = await fetch('/api/configuracion', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      });
      const data = await res.json();
      if (data.success) {
        setConfig(data.config);
        setSaved(true);
        setTimeout(() => setSaved(false), 3000);
      }
    } catch (err) {
      console.error('Error guardando:', err);
    } finally {
      setSaving(false);
    }
  };

  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 pb-20">
      {/* Ubicación de la empresa */}
      <div className="bg-white rounded-xl border border-gray-200 p-6">
        <div className="flex items-center gap-2 mb-4">
          <MapPin className="w-5 h-5 text-[#1a365d]" />
          <h3 className="text-lg font-semibold text-gray-900">Ubicación de la empresa</h3>
        </div>
        <p className="text-sm text-gray-500 mb-4">
          Define la comunidad autónoma y municipio para cargar automáticamente los festivos correspondientes.
        </p>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Comunidad Autónoma</label>
            <select
              value={form.comunidadAutonoma}
              onChange={(e) => setForm({ ...form, comunidadAutonoma: 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] bg-white text-gray-900"
            >
              <option value="">Seleccionar...</option>
              {Object.entries(COMUNIDADES_AUTONOMAS).map(([code, name]) => (
                <option key={code} value={code}>{name}</option>
              ))}
            </select>
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Provincia</label>
            <input
              type="text"
              value={form.provincia}
              onChange={(e) => setForm({ ...form, provincia: e.target.value })}
              placeholder="Ej: Valencia"
              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] bg-white text-gray-900"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Municipio</label>
            <input
              type="text"
              value={form.municipio}
              onChange={(e) => setForm({ ...form, municipio: e.target.value })}
              placeholder="Ej: Torrent"
              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] bg-white text-gray-900"
            />
          </div>
        </div>
      </div>

      {/* Parámetros operativos */}
      <div className="bg-white rounded-xl border border-gray-200 p-6">
        <div className="flex items-center gap-2 mb-4">
          <Clock className="w-5 h-5 text-[#1a365d]" />
          <h3 className="text-lg font-semibold text-gray-900">Parámetros operativos</h3>
        </div>

        <div className="max-w-sm">
          <label className="block text-sm font-medium text-gray-700 mb-1">
            Margen de desplazamiento entre citas (minutos)
          </label>
          <p className="text-xs text-gray-500 mb-2">
            Tiempo extra que se añade al cálculo de desplazamiento entre dos citas consecutivas (Google Maps + este margen).
          </p>
          <input
            type="number"
            min={0}
            max={120}
            step={5}
            value={form.margenDesplazamiento}
            onChange={(e) => setForm({ ...form, margenDesplazamiento: parseInt(e.target.value) || 0 })}
            className="w-32 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-[#1a365d]/20 focus:border-[#1a365d] bg-white text-gray-900"
          />
        </div>
      </div>

      {/* Notificaciones por Email */}
      <div className="bg-white rounded-xl border border-gray-200 p-6">
        <div className="flex items-center gap-2 mb-4">
          <CheckCircle className="w-5 h-5 text-[#1a365d]" />
          <h3 className="text-lg font-semibold text-gray-900">Notificaciones por Email</h3>
        </div>

        <div className="space-y-6">
          <div className="flex flex-col gap-4">
            <div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg border">
              <div>
                <h4 className="text-sm font-medium text-gray-900">Enviar correo al agendar</h4>
                <p className="text-xs text-gray-500">Enviar notificación automáticamente al cliente cuando se crea una cita.</p>
              </div>
              <label className="relative inline-flex items-center cursor-pointer">
                <input type="checkbox" checked={form.enviarEmailAgendar} onChange={e => setForm({ ...form, enviarEmailAgendar: e.target.checked })} className="sr-only peer" />
                <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:width-5 after:transition-all peer-checked:bg-[#1a365d]"></div>
              </label>
            </div>

            <div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg border">
              <div>
                <h4 className="text-sm font-medium text-gray-900">Enviar correo al reagendar</h4>
                <p className="text-xs text-gray-500">Enviar notificación automáticamente al cliente cuando se cambia la fecha u hora.</p>
              </div>
              <label className="relative inline-flex items-center cursor-pointer">
                <input type="checkbox" checked={form.enviarEmailReagendar} onChange={e => setForm({ ...form, enviarEmailReagendar: e.target.checked })} className="sr-only peer" />
                <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:width-5 after:transition-all peer-checked:bg-[#1a365d]"></div>
              </label>
            </div>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Plantilla: Nueva Cita</label>
              <p className="text-xs text-gray-500 mb-2">Variables: {'{{cliente}}, {{fecha}}, {{hora}}, {{tecnico}}'}</p>
              <textarea
                value={form.plantillaAgendar}
                onChange={e => setForm({ ...form, plantillaAgendar: e.target.value })}
                rows={5}
                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] bg-white text-gray-900 font-mono"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Plantilla: Cambio de Cita</label>
              <p className="text-xs text-gray-500 mb-2">Variables: {'{{cliente}}, {{fecha}}, {{hora}}, {{tecnico}}'}</p>
              <textarea
                value={form.plantillaReagendar}
                onChange={e => setForm({ ...form, plantillaReagendar: e.target.value })}
                rows={5}
                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] bg-white text-gray-900 font-mono"
              />
            </div>
          </div>
        </div>
      </div>

      {/* Botón guardar */}
      <div className="flex items-center gap-3">
        <button
          onClick={handleSave}
          disabled={saving}
          className="flex items-center gap-2 px-6 py-2.5 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" />}
          Guardar configuración
        </button>
        {saved && (
          <span className="flex items-center gap-1 text-sm text-green-600">
            <CheckCircle className="w-4 h-4" />
            Guardado correctamente
          </span>
        )}
      </div>
    </div>
  );
}