import type { FC } from 'react';
import { useEffect, useMemo, useRef, useState } from 'react';
import { useSearchParams } from 'react-router-dom';
import { Phone, MapPin, Mail, Globe, Save, Building2, ArrowRightLeft, Percent, Check, Calculator, Palette } from 'lucide-react';
import Layout from '../components/Layout';
import UsuariosPanel from '../components/UsuariosPanel';
import RolesPanel from '../components/RolesPanel';
import RecetasPanel from '../components/RecetasPanel';
import CatalogoPanel from '../components/CatalogoPanel';
import AuditoriaPanel from '../components/AuditoriaPanel';
import TicketDesigner from '../components/TicketDesigner';
import ImpactoModal from '../components/ImpactoModal';
import SucursalesPanel from '../components/SucursalesPanel';
import CategoriasPanel from '../components/CategoriasPanel';
import RecursosPanel from '../components/RecursosPanel';
import TerminologiaPanel from '../components/TerminologiaPanel';
import ReservasOnlinePanel from '../components/ReservasOnlinePanel';
import PortalClientePanel from '../components/PortalClientePanel';
import NotificacionesPanel from '../components/NotificacionesPanel';
import NotificacionesEnviadasPanel from '../components/NotificacionesEnviadasPanel';
import FormulariosPanel from '../components/FormulariosPanel';
import MembresiasPanel from '../components/MembresiasPanel';
import ComprasPanel from '../components/ComprasPanel';
import ComisionesPanel from '../components/ComisionesPanel';
import LealtadPanel from '../components/LealtadPanel';
import PropinasPanel from '../components/PropinasPanel';
import CampanasPanel from '../components/CampanasPanel';
import EncuestasPanel from '../components/EncuestasPanel';
import LicenciaPanel from '../components/LicenciaPanel';
import ApiKeysPanel from '../components/ApiKeysPanel';
import WebhooksPanel from '../components/WebhooksPanel';
import { Card, Button, Input, PageHeader, toast } from '../components/ui';
import { odooApi, type Doctor, type ClinicSettings, type ImpuestosSettings, BRAND_DEFAULT, CLINIC_SETTINGS_DEFAULT, IMPUESTOS_DEFAULT, RESERVAS_ONLINE_DEFAULT, ANTICIPO_DEFAULT, MEMBRESIAS_DEFAULT, COBRO_AUTOMATICO_DEFAULT, NOTIFICACIONES_DEFAULT } from '../services/odoo';
import { useAuth } from '../lib/auth';
import { publicarClinicSettings } from '../lib/clinic-settings';
import { useI18n } from '../lib/i18n';
import { LanguageSelect } from '../components/LanguageSelect';

const TABS = [
  { key: 'clinica', label: 'Clínica' },
  { key: 'reservas', label: 'Reservas en línea' },
  { key: 'portal', label: 'Portal del cliente' },
  { key: 'notificaciones', label: 'Notificaciones' },
  { key: 'notif_enviadas', label: 'Notificaciones enviadas' },
  { key: 'formularios', label: 'Formularios' },
  { key: 'sucursales', label: 'Sucursales' },
  { key: 'categorias', label: 'Categorías' },
  { key: 'recursos', label: 'Recursos' },
  { key: 'membresias', label: 'Membresías' },
  { key: 'compras', label: 'Compras' },
  { key: 'comisiones', label: 'Comisiones' },
  { key: 'lealtad', label: 'Lealtad' },
  { key: 'propinas', label: 'Propinas' },
  { key: 'campanas', label: 'Campañas' },
  { key: 'encuestas', label: 'Encuestas' },
  { key: 'terminologia', label: 'Terminología' },
  { key: 'usuarios', label: 'Usuarios' },
  { key: 'roles', label: 'Roles' },
  { key: 'recetas', label: 'Recetas' },
  { key: 'catalogos', label: 'Catálogos' },
  { key: 'tickets', label: 'Tickets' },
  { key: 'licencia', label: 'Licencia' },
  { key: 'api', label: 'API' },
  { key: 'webhooks', label: 'Webhooks' },
  { key: 'auditoria', label: 'Auditoría' },
] as const;

// Secciones que ve gerencia (admin del sistema ve todas).
const TABS_GERENCIA = ['reservas', 'portal', 'notificaciones', 'notif_enviadas', 'formularios', 'sucursales', 'categorias', 'recursos', 'membresias', 'compras', 'comisiones', 'lealtad', 'propinas', 'campanas', 'encuestas', 'terminologia', 'usuarios', 'roles', 'tickets', 'licencia', 'webhooks'];

const SUBCATALOGOS = [
  { key: 'diagnosticos', label: 'Diagnósticos' },
  { key: 'procedimientos', label: 'Procedimientos' },
] as const;

// Clave histórica del navegador: antes los ajustes de la clínica vivían solo en
// localStorage. Se migran al backend una vez y deja de usarse.
const LEGACY_STORAGE_KEY = 'skeen_clinic_settings';

const Configuracion: FC = () => {
  const { user, brand, setBrand, can } = useAuth();
  const { t } = useI18n();
  // Clave i18n de una pestaña: 'notif_enviadas' -> 'config.tabs.notifEnviadas'.
  const tabKey = (k: string) => 'config.tabs.' + k.replace(/_([a-z])/g, (_, c: string) => c.toUpperCase());
  // Gerencia gestiona catálogos, usuarios y roles; la sección "Clínica" (datos
  // de contacto, tipo de cambio y comisiones) queda para administración del sistema.
  const esAdmin = user?.role === 'admin';
  // Cada pestaña requiere su permiso por acción (Configuración › Roles › Permisos).
  const TABS_PERM: Record<string, string> = {
    usuarios: 'config.usuarios',
    roles: 'config.roles',
    auditoria: 'config.auditoria',
    notificaciones: 'notificaciones.editar',
    notif_enviadas: 'notificaciones.ver',
    formularios: 'formularios.ver',
    membresias: 'membresias.editar',
    compras: 'compras.editar',
    comisiones: 'comisiones.editar',
    lealtad: 'lealtad.configurar',
    propinas: 'propinas.configurar',
    campanas: 'campanas.gestionar',
    encuestas: 'encuestas.gestionar',
    recursos: 'recursos.editar',
    licencia: 'config.editar',
    api: 'api.claves',
    webhooks: 'webhooks.editar',
  };
  const tabsVisibles = useMemo(
    () => (esAdmin ? TABS : TABS.filter((t) => TABS_GERENCIA.includes(t.key)))
      .filter((t) => can(TABS_PERM[t.key] || 'config.editar')),
    [esAdmin, can],
  );
  const [searchParams, setSearchParams] = useSearchParams();
  const tabPedida = searchParams.get('tab') || 'clinica';
  const tab = tabsVisibles.some((t) => t.key === tabPedida) ? tabPedida : (tabsVisibles[0]?.key || 'clinica');
  const setTab = (t: string) => setSearchParams({ tab: t });
  const [subcatalogo, setSubcatalogo] = useState<string>(() => {
    const sub = searchParams.get('sub');
    return sub === 'procedimientos' ? 'procedimientos' : 'diagnosticos';
  });
  const [settings, setSettings] = useState<ClinicSettings>(CLINIC_SETTINGS_DEFAULT);
  const [loading, setLoading] = useState(true);

  // Ajustes de la clínica desde el backend. Migración de una sola vez: si este
  // navegador tiene los datos viejos en localStorage y el backend sigue con los
  // defaults (contacto vacío), se precargan y se suben; después se deja de usar
  // localStorage como fuente de verdad.
  useEffect(() => {
    let alive = true;
    odooApi.getClinicSettings()
      .then(async (res) => {
        if (!alive || res.status !== 'success') return;
        let next = res.settings;
        try {
          const raw = localStorage.getItem(LEGACY_STORAGE_KEY);
          if (raw) {
            const legacy = JSON.parse(raw) as Partial<{ name: string; phone: string; email: string; address: string; website: string }>;
            const backendVacio = !next.telefono && !next.email && !next.direccion && !next.web;
            const legacyTieneDatos = Boolean(legacy?.phone || legacy?.email || legacy?.address || legacy?.website);
            if (backendVacio && legacyTieneDatos) {
              next = {
                ...next,
                telefono: legacy?.phone || next.telefono,
                email: legacy?.email || next.email,
                direccion: legacy?.address || next.direccion,
                web: legacy?.website || next.web,
              };
              const up = await odooApi.putClinicSettings({ ...next, motivo: 'Migración desde localStorage' });
              if (up.status === 'success') next = up.settings;
            }
            localStorage.removeItem(LEGACY_STORAGE_KEY);
          }
        } catch {
          localStorage.removeItem(LEGACY_STORAGE_KEY);
        }
        if (alive) setSettings({
          ...CLINIC_SETTINGS_DEFAULT,
          ...next,
          impuestos: { ...IMPUESTOS_DEFAULT, ...(next.impuestos || {}) },
          reservas_online: {
            ...RESERVAS_ONLINE_DEFAULT,
            ...(next.reservas_online || {}),
            anticipo: { ...ANTICIPO_DEFAULT, ...((next.reservas_online || {}).anticipo || {}) },
          },
          notificaciones: { ...NOTIFICACIONES_DEFAULT, ...(next.notificaciones || {}) },
          membresias: {
            ...MEMBRESIAS_DEFAULT,
            ...(next.membresias || {}),
            cobro_automatico: { ...COBRO_AUTOMATICO_DEFAULT, ...((next.membresias || {}).cobro_automatico || {}) },
          },
        });
      })
      .catch(() => {
        toast.error('No se pudieron cargar los ajustes de la clínica');
      })
      .finally(() => {
        if (alive) setLoading(false);
      });
    return () => { alive = false; };
  }, []);

  const save = async () => {
    try {
      const res = await odooApi.putClinicSettings({ ...settings, motivo: 'Ajustes desde Configuración' });
      if (res.status === 'success') {
        setSettings(res.settings);
        publicarClinicSettings(res.settings);
      }
      toast.success('Configuración guardada');
    } catch (err) {
      const msg = (err as { response?: { data?: { message?: string } } })?.response?.data?.message;
      toast.error(msg || 'Error al guardar configuración');
    }
  };

  const update = (field: keyof ClinicSettings, value: string) => {
    setSettings((prev) => ({ ...prev, [field]: value }));
  };

  const updateImpuesto = (patch: Partial<ImpuestosSettings>) => {
    setSettings((prev) => ({
      ...prev,
      impuestos: { ...IMPUESTOS_DEFAULT, ...prev.impuestos, ...patch },
    }));
  };

  // ---- Tipo de cambio USD/MXN ----
  const [tcCurrent, setTcCurrent] = useState<{ rate: number; date: string; source: string } | null>(null);
  const [tcInput, setTcInput] = useState('');
  const [tcSaving, setTcSaving] = useState(false);
  // ---- Identidad de la clínica (brand white-label) ----
  const [brandForm, setBrandForm] = useState({
    nombre: '', pie: '', logo_claro: '', logo_oscuro: '', url_publica: '', primario: '', acento: '',
  });
  const [brandSaving, setBrandSaving] = useState(false);
  const brandCargadoRef = useRef(false);
  useEffect(() => {
    if (brandCargadoRef.current || !brand.nombre) return;
    brandCargadoRef.current = true;
    setBrandForm({
      nombre: brand.nombre === BRAND_DEFAULT.nombre ? '' : brand.nombre,
      pie: brand.pie === BRAND_DEFAULT.pie ? '' : brand.pie,
      logo_claro: brand.logo_claro === BRAND_DEFAULT.logo_claro ? '' : brand.logo_claro,
      logo_oscuro: brand.logo_oscuro === BRAND_DEFAULT.logo_oscuro ? '' : brand.logo_oscuro,
      url_publica: brand.url_publica || '',
      primario: brand.colores?.primario || '',
      acento: brand.colores?.acento || '',
    });
  }, [brand]);

  const saveBrand = async () => {
    setBrandSaving(true);
    try {
      const res = await odooApi.putBrand({
        brand: {
          nombre: brandForm.nombre.trim() || BRAND_DEFAULT.nombre,
          pie: brandForm.pie.trim() || BRAND_DEFAULT.pie,
          logo_claro: brandForm.logo_claro.trim() || BRAND_DEFAULT.logo_claro,
          logo_oscuro: brandForm.logo_oscuro.trim() || BRAND_DEFAULT.logo_oscuro,
          url_publica: brandForm.url_publica.trim(),
          colores: { primario: brandForm.primario.trim(), acento: brandForm.acento.trim() },
        },
        motivo: 'Identidad desde Configuración',
      });
      setBrand(res.brand);
      toast.success('Identidad de la clínica actualizada (se ve al recargar en los demás equipos)');
    } catch (err) {
      const msg = (err as { response?: { data?: { message?: string } } })?.response?.data?.message;
      toast.error(msg || 'No se pudo guardar la identidad de la clínica');
    } finally {
      setBrandSaving(false);
    }
  };

  useEffect(() => {
    if (!esAdmin) return;
    odooApi.getExchangeRate()
      .then((res) => {
        if (res.current) {
          setTcCurrent(res.current);
          setTcInput(String(res.current.rate));
        }
      })
      .catch(() => {/* odoo no disponible, ignorar */});
  }, []);

  const saveTc = async () => {
    const rate = parseFloat(tcInput);
    if (!rate || rate <= 0) {
      toast.error('Ingresa un tipo de cambio válido');
      return;
    }
    setTcSaving(true);
    try {
      const res = await odooApi.setExchangeRate(rate, 'manual');
      setTcCurrent(res.exchange_rate);
      toast.success(`Tipo de cambio actualizado: ${rate.toFixed(2)} MXN/USD`);
    } catch {
      toast.error('No se pudo guardar el tipo de cambio');
    } finally {
      setTcSaving(false);
    }
  };

  // ---- Comisiones de médicos ----
  const [commissionDefault, setCommissionDefault] = useState('');
  const [commissionDefaultSaving, setCommissionDefaultSaving] = useState(false);
  const [doctors, setDoctors] = useState<Doctor[]>([]);
  const [commissionInputs, setCommissionInputs] = useState<Record<number, string>>({});
  const [commissionSavingId, setCommissionSavingId] = useState<number | null>(null);
  const [commissionSavedId, setCommissionSavedId] = useState<number | null>(null);
  const [impactoOpen, setImpactoOpen] = useState(false);

  useEffect(() => {
    if (!esAdmin) return;
    odooApi.getCommissionDefault()
      .then((res) => setCommissionDefault(String(res.commission_pct ?? 0)))
      .catch(() => {/* odoo no disponible, ignorar */});
    odooApi.getDoctors()
      .then((res) => {
        if (res.status === 'success') {
          setDoctors(res.doctors);
          setCommissionInputs(Object.fromEntries(res.doctors.map((d) => [d.id, String(d.commission_pct ?? 0)])));
        }
      })
      .catch(() => {/* odoo no disponible, ignorar */});
  }, []);

  const validPct = (raw: string): number | null => {
    const pct = parseFloat(raw);
    if (Number.isNaN(pct) || pct < 0 || pct > 100) return null;
    return pct;
  };

  const saveCommissionDefault = async () => {
    const pct = validPct(commissionDefault);
    if (pct === null) {
      toast.error('El porcentaje debe estar entre 0 y 100');
      return;
    }
    setCommissionDefaultSaving(true);
    try {
      await odooApi.setCommissionDefault(pct);
      toast.success(`Comisión global actualizada: ${pct}%`);
    } catch {
      toast.error('No se pudo guardar la comisión global');
    } finally {
      setCommissionDefaultSaving(false);
    }
  };

  const saveDoctorCommission = async (id: number) => {
    const pct = validPct(commissionInputs[id] ?? '');
    if (pct === null) {
      toast.error('El porcentaje debe estar entre 0 y 100');
      return;
    }
    setCommissionSavingId(id);
    try {
      await odooApi.setDoctorCommission(id, pct);
      setDoctors((prev) => prev.map((d) => (d.id === id ? { ...d, commission_pct: pct } : d)));
      setCommissionSavedId(id);
      setTimeout(() => setCommissionSavedId((cur) => (cur === id ? null : cur)), 2000);
    } catch {
      toast.error('No se pudo guardar la comisión del médico');
    } finally {
      setCommissionSavingId(null);
    }
  };

  return (
    <Layout title={t('config.title')} subtitle={t('config.subtitle')}>
      <PageHeader title={t('config.title')} subtitle={t('config.pageSubtitle')} />

      {/* Tabs de secciones */}
      <div className="flex flex-wrap gap-1.5 mb-6">
        {tabsVisibles.map((tabItem) => (
          <button
            key={tabItem.key}
            type="button"
            onClick={() => setTab(tabItem.key)}
            className={`px-4 py-2 text-sm font-medium rounded-full transition ${
              tab === tabItem.key ? 'bg-theme-accent text-theme-inverse' : 'bg-theme-accent-bg text-theme-heading hover:bg-theme-bg'
            }`}
          >
            {t(tabKey(tabItem.key))}
          </button>
        ))}
      </div>

      {tabsVisibles.length === 0 ? (
        <Card>
          <Card.Body>
            <p className="text-sm text-theme-muted">{t('config.noPermission')}</p>
          </Card.Body>
        </Card>
      ) : tab === 'usuarios' ? (
        <Card>
          <Card.Body>
            <UsuariosPanel />
          </Card.Body>
        </Card>
      ) : tab === 'roles' ? (
        <Card>
          <Card.Body>
            <RolesPanel />
          </Card.Body>
        </Card>
      ) : tab === 'recetas' ? (
        <Card>
          <Card.Body>
            <RecetasPanel />
          </Card.Body>
        </Card>
      ) : tab === 'tickets' ? (
        <TicketDesigner />
      ) : tab === 'auditoria' ? (
        <AuditoriaPanel />
      ) : tab === 'catalogos' ? (
        <Card>
          <Card.Body>
            <div className="flex flex-wrap gap-1.5 mb-4">
              {SUBCATALOGOS.map((s) => (
                <button
                  key={s.key}
                  type="button"
                  onClick={() => setSubcatalogo(s.key)}
                  className={`px-3 py-1.5 text-sm font-medium rounded-full transition ${
                    subcatalogo === s.key ? 'bg-theme-accent text-theme-inverse' : 'bg-theme-accent-bg text-theme-heading hover:bg-theme-bg'
                  }`}
                >
                  {t(`config.tabs.${s.key}`)}
                </button>
              ))}
            </div>
            <CatalogoPanel kind={subcatalogo as 'diagnosticos' | 'procedimientos'} titulo={t(`config.tabs.${subcatalogo}`)} />
          </Card.Body>
        </Card>
      ) : tab === 'sucursales' ? (
        <Card>
          <Card.Body>
            <SucursalesPanel />
          </Card.Body>
        </Card>
      ) : tab === 'categorias' ? (
        <Card>
          <Card.Body>
            <CategoriasPanel />
          </Card.Body>
        </Card>
      ) : tab === 'recursos' ? (
        <Card>
          <Card.Body>
            <RecursosPanel settings={settings} onSaved={setSettings} />
          </Card.Body>
        </Card>
      ) : tab === 'membresias' ? (
        <Card>
          <Card.Body>
            <MembresiasPanel settings={settings} onSaved={setSettings} />
          </Card.Body>
        </Card>
      ) : tab === 'compras' ? (
        <Card>
          <Card.Body>
            <ComprasPanel settings={settings} onSaved={setSettings} />
          </Card.Body>
        </Card>
      ) : tab === 'comisiones' ? (
        <Card>
          <Card.Body>
            <ComisionesPanel settings={settings} onSaved={setSettings} />
          </Card.Body>
        </Card>
      ) : tab === 'lealtad' ? (
        <Card>
          <Card.Body>
            <LealtadPanel settings={settings} onSaved={setSettings} />
          </Card.Body>
        </Card>
      ) : tab === 'propinas' ? (
        <Card>
          <Card.Body>
            <PropinasPanel settings={settings} onSaved={setSettings} />
          </Card.Body>
        </Card>
      ) : tab === 'campanas' ? (
        <Card>
          <Card.Body>
            <CampanasPanel settings={settings} onSaved={setSettings} />
          </Card.Body>
        </Card>
      ) : tab === 'encuestas' ? (
        <Card>
          <Card.Body>
            <EncuestasPanel settings={settings} onSaved={setSettings} />
          </Card.Body>
        </Card>
      ) : tab === 'terminologia' ? (
        <Card>
          <Card.Body>
            <TerminologiaPanel />
          </Card.Body>
        </Card>
      ) : tab === 'reservas' ? (
        <Card>
          <Card.Body>
            <ReservasOnlinePanel settings={settings} onSaved={setSettings} />
          </Card.Body>
        </Card>
      ) : tab === 'portal' ? (
        <Card>
          <Card.Body>
            <PortalClientePanel settings={settings} onSaved={setSettings} />
          </Card.Body>
        </Card>
      ) : tab === 'notificaciones' ? (
        <Card>
          <Card.Body>
            <NotificacionesPanel settings={settings} onSaved={setSettings} />
          </Card.Body>
        </Card>
      ) : tab === 'notif_enviadas' ? (
        <Card>
          <Card.Body>
            <NotificacionesEnviadasPanel />
          </Card.Body>
        </Card>
      ) : tab === 'formularios' ? (
        <Card>
          <Card.Body>
            <FormulariosPanel />
          </Card.Body>
        </Card>
      ) : tab === 'licencia' ? (
        <LicenciaPanel />
      ) : tab === 'api' ? (
        <ApiKeysPanel />
      ) : tab === 'webhooks' ? (
        <WebhooksPanel />
      ) : (
      <>
      <Card className="mb-4 sm:mb-6">
        <Card.Body>
          <h3 className="font-heading text-xl text-theme-heading mb-1">{t('config.idiomaTitle')}</h3>
          <p className="text-sm text-theme-muted mb-3">{t('config.idiomaBody')}</p>
          <div className="max-w-xs">
            <LanguageSelect />
          </div>
        </Card.Body>
      </Card>
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6">
        <Card>
          <Card.Body>
            <h3 className="font-heading text-xl text-theme-heading mb-4">{t('config.clinicInfo')}</h3>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <a
                href={`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(settings.direccion)}`}
                target="_blank"
                rel="noreferrer"
                className="p-4 bg-theme-bg rounded-xl flex items-start space-x-3 hover:bg-theme-bg transition"
              >
                <div className="w-10 h-10 rounded-full bg-theme-surface flex items-center justify-center text-theme-muted shadow-sm shrink-0">
                  <MapPin size={18} />
                </div>
                <div className="min-w-0">
                  <p className="text-sm font-medium text-theme-heading">Dirección</p>
                  <p className="text-sm text-theme-muted truncate">{settings.direccion}</p>
                </div>
              </a>

              <a
                href={`tel:${settings.telefono}`}
                className="p-4 bg-theme-bg rounded-xl flex items-start space-x-3 hover:bg-theme-bg transition"
              >
                <div className="w-10 h-10 rounded-full bg-theme-surface flex items-center justify-center text-theme-muted shadow-sm shrink-0">
                  <Phone size={18} />
                </div>
                <div className="min-w-0">
                  <p className="text-sm font-medium text-theme-heading">Teléfono</p>
                  <p className="text-sm text-theme-muted truncate">{settings.telefono}</p>
                </div>
              </a>

              <a
                href={`mailto:${settings.email}`}
                className="p-4 bg-theme-bg rounded-xl flex items-start space-x-3 hover:bg-theme-bg transition"
              >
                <div className="w-10 h-10 rounded-full bg-theme-surface flex items-center justify-center text-theme-muted shadow-sm shrink-0">
                  <Mail size={18} />
                </div>
                <div className="min-w-0">
                  <p className="text-sm font-medium text-theme-heading">Email</p>
                  <p className="text-sm text-theme-muted truncate">{settings.email}</p>
                </div>
              </a>

              <a
                href={settings.web}
                target="_blank"
                rel="noreferrer"
                className="p-4 bg-theme-bg rounded-xl flex items-start space-x-3 hover:bg-theme-bg transition"
              >
                <div className="w-10 h-10 rounded-full bg-theme-surface flex items-center justify-center text-theme-muted shadow-sm shrink-0">
                  <Globe size={18} />
                </div>
                <div className="min-w-0">
                  <p className="text-sm font-medium text-theme-heading">Sitio web</p>
                  <p className="text-sm text-theme-muted truncate">{(settings.web || '').replace(/^https?:\/\//, '')}</p>
                </div>
              </a>
            </div>
          </Card.Body>
        </Card>

        <Card>
          <Card.Body>
            <h3 className="font-heading text-xl text-theme-heading mb-4 flex items-center">
              <Building2 size={20} className="mr-2" />
              {t('config.settings')}
            </h3>
            {loading ? (
              <p className="text-sm text-theme-muted">Cargando...</p>
            ) : (
              <div className="space-y-4">
                <Input
                  label="Nombre de la clínica"
                  value={settings.nombre}
                  onChange={(e) => update('nombre', e.target.value)}
                />
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  <Input
                    label="Teléfono"
                    value={settings.telefono}
                    onChange={(e) => update('telefono', e.target.value)}
                  />
                  <Input
                    label="RFC"
                    value={settings.rfc}
                    onChange={(e) => update('rfc', e.target.value)}
                    placeholder="Opcional"
                  />
                </div>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  <Input
                    label="Email"
                    type="email"
                    value={settings.email}
                    onChange={(e) => update('email', e.target.value)}
                  />
                  <Input
                    label="Sitio web"
                    value={settings.web}
                    onChange={(e) => update('web', e.target.value)}
                    placeholder="https://..."
                  />
                </div>
                <Input
                  label="Dirección"
                  value={settings.direccion}
                  onChange={(e) => update('direccion', e.target.value)}
                />
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  <Input
                    label="Horario de apertura"
                    type="time"
                    value={settings.horario_apertura}
                    onChange={(e) => update('horario_apertura', e.target.value)}
                  />
                  <Input
                    label="Horario de cierre"
                    type="time"
                    value={settings.horario_cierre}
                    onChange={(e) => update('horario_cierre', e.target.value)}
                  />
                </div>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  <Input
                    label="Zona horaria"
                    value={settings.zona_horaria}
                    onChange={(e) => update('zona_horaria', e.target.value)}
                    placeholder="America/Tijuana"
                  />
                  <Input
                    label="URL pública"
                    value={settings.url_publica}
                    onChange={(e) => update('url_publica', e.target.value)}
                    placeholder="https://..."
                  />
                </div>
                <Input
                  label="Nota del ticket"
                  value={settings.nota_ticket}
                  onChange={(e) => update('nota_ticket', e.target.value)}
                  placeholder="Se imprime al pie del ticket"
                />
                <p className="text-xs text-theme-muted">
                  Moneda base: <span className="font-medium text-theme-heading">{settings.moneda_base || 'MXN'}</span>
                </p>

                {/* Impuestos (por instancia). Apagados = comportamiento de
                    siempre: sin cálculo, sin desglose y sin renglón en tickets. */}
                <div className="border border-theme-border rounded-xl p-3 space-y-3">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <Percent size={16} className="text-theme-muted" />
                      <span className="text-sm font-medium text-theme-heading">Impuestos</span>
                    </div>
                    <label className="flex items-center gap-2 text-sm text-theme-muted cursor-pointer">
                      <input
                        type="checkbox"
                        checked={settings.impuestos.activo}
                        onChange={(e) => updateImpuesto({ activo: e.target.checked })}
                        className="h-4 w-4 rounded border-theme-border-strong"
                      />
                      Calcular impuestos
                    </label>
                  </div>
                  <p className="text-xs text-theme-muted">
                    {settings.impuestos.activo
                      ? 'El impuesto se muestra y se cobra en POS, tickets y reportes.'
                      : 'Apagado: los totales, tickets y reportes salen exactamente como hoy.'}
                  </p>
                  {settings.impuestos.activo && (
                    <>
                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <Input
                          label="Nombre del impuesto"
                          value={settings.impuestos.nombre}
                          onChange={(e) => updateImpuesto({ nombre: e.target.value })}
                          placeholder="IVA"
                        />
                        <Input
                          label="Tasa por defecto (%)"
                          type="number"
                          min={0}
                          max={100}
                          step={0.01}
                          value={String(settings.impuestos.tasa_default)}
                          onChange={(e) => updateImpuesto({ tasa_default: parseFloat(e.target.value) || 0 })}
                        />
                      </div>
                      <Input
                        label="Opciones de tasa (%)"
                        value={settings.impuestos.tasa_opciones.join(', ')}
                        onChange={(e) => {
                          const opciones = e.target.value
                            .split(',')
                            .map((v) => parseFloat(v.trim()))
                            .filter((v) => !Number.isNaN(v) && v >= 0 && v <= 100);
                          updateImpuesto({ tasa_opciones: opciones.length ? opciones : [0] });
                        }}
                        placeholder="0, 8, 16"
                      />
                      <label className="flex items-center gap-2 text-sm text-theme-muted cursor-pointer">
                        <input
                          type="checkbox"
                          checked={settings.impuestos.precios_incluyen_impuesto}
                          onChange={(e) => updateImpuesto({ precios_incluyen_impuesto: e.target.checked })}
                          className="h-4 w-4 rounded border-theme-border-strong"
                        />
                        Los precios capturados ya incluyen impuesto
                      </label>
                    </>
                  )}
                </div>

                <div className="pt-2">
                  <Button onClick={save}>
                    <Save size={16} className="mr-2" />
                    Guardar ajustes
                  </Button>
                </div>
              </div>
            )}
          </Card.Body>
        </Card>

        {/* Identidad de la clínica (white-label): nombre, pie y logos que ve
            el usuario en login, menú lateral, impresos y títulos. Solo admin. */}
        {esAdmin && (
        <Card>
          <Card.Body>
            <h3 className="font-heading text-xl text-theme-heading mb-1">{t('config.clinicIdentity')}</h3>
            <p className="text-sm text-theme-muted mb-4">
              Nombre, pie de página y logos que aparecen en el inicio de sesión, el menú y los
              documentos impresos. Dejar un campo vacío vuelve al valor por omisión.
            </p>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <Input
                label="Nombre comercial"
                value={brandForm.nombre}
                onChange={(e) => setBrandForm((f) => ({ ...f, nombre: e.target.value }))}
                placeholder={BRAND_DEFAULT.nombre}
              />
              <Input
                label="Pie de página (login / documentos)"
                value={brandForm.pie}
                onChange={(e) => setBrandForm((f) => ({ ...f, pie: e.target.value }))}
                placeholder={BRAND_DEFAULT.pie}
              />
              <Input
                label="Logo fondo oscuro (ruta o URL)"
                value={brandForm.logo_claro}
                onChange={(e) => setBrandForm((f) => ({ ...f, logo_claro: e.target.value }))}
                placeholder={BRAND_DEFAULT.logo_claro}
              />
              <Input
                label="Logo fondo claro (ruta o URL)"
                value={brandForm.logo_oscuro}
                onChange={(e) => setBrandForm((f) => ({ ...f, logo_oscuro: e.target.value }))}
                placeholder={BRAND_DEFAULT.logo_oscuro}
              />
              <Input
                label="URL pública de la instancia"
                value={brandForm.url_publica}
                onChange={(e) => setBrandForm((f) => ({ ...f, url_publica: e.target.value }))}
                placeholder="https://..."
              />
            </div>

            {/* Colores de marca: vacíos = se conserva el color del tema activo. */}
            <div className="mt-5">
              <p className="text-sm font-medium text-theme-heading mb-1 flex items-center">
                <Palette size={16} className="mr-2" /> Colores de marca
              </p>
              <p className="text-xs text-theme-muted mb-3">
                Si se definen, pisan el color del tema en los tres temas. Dejarlos vacíos conserva el color original.
              </p>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                {([
                  { key: 'primario' as const, label: 'Color primario' },
                  { key: 'acento' as const, label: 'Color de acento' },
                ]).map(({ key, label }) => (
                  <div key={key}>
                    <label className="block text-xs font-medium text-theme-muted mb-1.5">{label}</label>
                    <div className="flex items-center gap-2">
                      <input
                        type="color"
                        value={brandForm[key] || (key === 'primario' ? '#eda588' : '#c7bcdd')}
                        onChange={(e) => setBrandForm((f) => ({ ...f, [key]: e.target.value }))}
                        className="h-10 w-12 shrink-0 rounded-lg border border-theme-border-strong bg-theme-surface cursor-pointer"
                        aria-label={label}
                      />
                      <Input
                        value={brandForm[key]}
                        onChange={(e) => setBrandForm((f) => ({ ...f, [key]: e.target.value }))}
                        placeholder="Vacío = color del tema"
                      />
                      {brandForm[key] && (
                        <Button variant="ghost" size="sm" onClick={() => setBrandForm((f) => ({ ...f, [key]: '' }))} title={t('config.useThemeColor')}>
                          Limpiar
                        </Button>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <div className="flex items-center gap-3 mt-4">
              {(brandForm.logo_claro || brandForm.logo_oscuro) && (
                <div className="flex items-center gap-2">
                  {brandForm.logo_claro && (
                    <span className="inline-flex items-center justify-center w-24 h-10 rounded-lg bg-[#1A1A1A] border border-theme-border">
                      <img src={brandForm.logo_claro} alt="logo oscuro" className="max-h-7 max-w-[88px] object-contain" />
                    </span>
                  )}
                  {brandForm.logo_oscuro && (
                    <span className="inline-flex items-center justify-center w-24 h-10 rounded-lg bg-white border border-theme-border">
                      <img src={brandForm.logo_oscuro} alt="logo claro" className="max-h-7 max-w-[88px] object-contain" />
                    </span>
                  )}
                </div>
              )}
              <Button onClick={saveBrand} loading={brandSaving}>
                Guardar identidad
              </Button>
            </div>
          </Card.Body>
        </Card>
        )}

        <Card className="lg:col-span-2">
          <Card.Body>
            <h3 className="font-heading text-xl text-theme-heading mb-1 flex items-center">
              <ArrowRightLeft size={20} className="mr-2" />
              {t('config.exchangeRate')}
            </h3>
            <p className="text-sm text-theme-muted mb-4">
              Se usa para convertir ventas en dólares. Vigente:
              {tcCurrent ? (
                <span className="font-semibold text-theme-heading"> {Number(tcCurrent.rate).toFixed(2)} MXN por 1 USD <span className="font-normal text-theme-muted">({tcCurrent.date})</span></span>
              ) : (
                <span className="text-theme-muted"> sin definir</span>
              )}
            </p>
            <div className="flex flex-col sm:flex-row items-start sm:items-end gap-3 max-w-md">
              <div className="flex-1 w-full">
                <Input
                  label="Nuevo tipo de cambio (MXN por 1 USD)"
                  type="number"
                  step="0.01"
                  min="0"
                  value={tcInput}
                  onChange={(e) => setTcInput(e.target.value)}
                  placeholder="17.25"
                />
              </div>
              <Button onClick={saveTc} disabled={tcSaving}>
                <Save size={16} className="mr-2" />
                {tcSaving ? t('common.saving') : t('config.updateRate')}
              </Button>
            </div>
          </Card.Body>
        </Card>

        <Card className="lg:col-span-2">
          <Card.Body>
            <h3 className="font-heading text-xl text-theme-heading mb-1 flex items-center">
              <Percent size={20} className="mr-2" />
              {t('config.commissions')}
            </h3>
            <p className="text-sm text-theme-muted mb-4">
              Porcentaje de comisión sobre las ventas atribuidas a cada médico (visible en su página "Mis ventas").
            </p>
            <div className="mb-5 p-4 bg-theme-bg rounded-xl flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
              <div>
                <p className="text-sm font-medium text-theme-heading">¿Cuánto costaría esta configuración?</p>
                <p className="text-xs text-theme-muted">
                  Simula la comisión de cada médico con las ventas atribuidas reales de un mes, sin guardar nada.
                </p>
              </div>
              <Button variant="outline" onClick={() => setImpactoOpen(true)}>
                <Calculator size={16} className="mr-2" />
                Ver efecto
              </Button>
            </div>
            <div className="flex flex-col sm:flex-row items-start sm:items-end gap-3 max-w-md mb-6">
              <div className="flex-1 w-full">
                <Input
                  label="% global por defecto"
                  type="number"
                  step="0.5"
                  min="0"
                  max="100"
                  value={commissionDefault}
                  onChange={(e) => setCommissionDefault(e.target.value)}
                  placeholder="0"
                />
                <p className="text-xs text-theme-muted mt-1">Se aplica a médicos sin porcentaje propio (con 0%).</p>
              </div>
              <Button onClick={saveCommissionDefault} disabled={commissionDefaultSaving}>
                <Save size={16} className="mr-2" />
                {commissionDefaultSaving ? t('common.saving') : t('common.save')}
              </Button>
            </div>
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead className="bg-theme-bg">
                  <tr>
                    <th className="text-left p-3 text-xs font-medium text-theme-muted uppercase">Médico</th>
                    <th className="text-left p-3 text-xs font-medium text-theme-muted uppercase">Tipo</th>
                    <th className="text-left p-3 text-xs font-medium text-theme-muted uppercase">% actual</th>
                    <th className="text-left p-3 text-xs font-medium text-theme-muted uppercase w-40">Nuevo %</th>
                    <th className="text-left p-3 text-xs font-medium text-theme-muted uppercase w-32">Acción</th>
                  </tr>
                </thead>
                <tbody className="divide-y">
                  {doctors.map((d) => (
                    <tr key={d.id} className="hover:bg-theme-bg">
                      <td className="p-3 text-sm font-medium text-theme-heading">{d.name}</td>
                      <td className="p-3 text-sm text-theme-muted">
                        {(d.staff_type ?? 'doctor') === 'cosmetologa' ? 'Cosmetóloga' : 'Doctor'}
                      </td>
                      <td className="p-3 text-sm text-theme-muted">
                        {d.commission_pct ? `${d.commission_pct}%` : '0% (usa el global)'}
                      </td>
                      <td className="p-3">
                        <Input
                          type="number"
                          step="0.5"
                          min="0"
                          max="100"
                          value={commissionInputs[d.id] ?? ''}
                          onChange={(e) => setCommissionInputs((prev) => ({ ...prev, [d.id]: e.target.value }))}
                        />
                      </td>
                      <td className="p-3">
                        {commissionSavedId === d.id ? (
                          <span className="inline-flex items-center text-sm text-emerald-600">
                            <Check size={16} className="mr-1" /> Guardado
                          </span>
                        ) : (
                          <Button
                            size="sm"
                            variant="outline"
                            onClick={() => saveDoctorCommission(d.id)}
                            disabled={commissionSavingId === d.id}
                          >
                            {commissionSavingId === d.id ? t('common.saving') : t('common.save')}
                          </Button>
                        )}
                      </td>
                    </tr>
                  ))}
                  {doctors.length === 0 && (
                    <tr>
                      <td colSpan={5} className="p-4 text-sm text-theme-muted text-center">No hay médicos dados de alta.</td>
                    </tr>
                  )}
                </tbody>
              </table>
            </div>
          </Card.Body>
        </Card>
      </div>
      </>
      )}

      <ImpactoModal
        isOpen={impactoOpen}
        onClose={() => setImpactoOpen(false)}
        comisionGlobal={parseFloat(commissionDefault) || 0}
      />
    </Layout>
  );
};

export default Configuracion;