import { useEffect, useMemo, useState } from "react";
import { useParams } from "react-router-dom";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import {
  Sparkles,
  Clock,
  CalendarDays,
  User,
  Check,
  ChevronRight,
  ChevronLeft,
  Phone,
  MapPin,
  CalendarCheck,
  PartyPopper,
  AlertCircle,
  Mail,
  RefreshCw,
  Info,
} from "lucide-react";
import {
  getBusiness,
  getSlots,
  book,
  type PublicService,
  type PublicSlot,
  type BookResponse,
} from "../../lib/publicApi";
import { Spinner } from "../../components/ui";
import { MonthCalendar } from "../../components/MonthCalendar";
import { cn, formatCurrency, formatDate, formatTime, hourInTz } from "../../lib/format";

function todayStr() {
  const d = new Date();
  const pad = (n: number) => String(n).padStart(2, "0");
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
}

function maxBookableDate() {
  const d = new Date();
  d.setMonth(d.getMonth() + 3);
  const pad = (n: number) => String(n).padStart(2, "0");
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
}

const FULL_STEPS = [
  { n: 1, label: "Servicio" },
  { n: 2, label: "Especialista" },
  { n: 3, label: "Horario" },
  { n: 4, label: "Datos" },
] as const;

function stepsFor(autoAssign: boolean) {
  return autoAssign
    ? FULL_STEPS.filter((s) => s.label !== "Especialista").map((s, i) => ({ n: i + 1, label: s.label, original: s.n }))
    : FULL_STEPS.map((s, i) => ({ n: i + 1, label: s.label, original: s.n }));
}

export default function BookingPage() {
  const { slug } = useParams<{ slug: string }>();

  const [step, setStep] = useState(1);
  const [serviceId, setServiceId] = useState<number | null>(null);
  const [employeeId, setEmployeeId] = useState<number | null>(null);
  const [selectedDate, setSelectedDate] = useState<string>(todayStr());
  const [selectedSlot, setSelectedSlot] = useState<PublicSlot | null>(null);
  const [client, setClient] = useState({ name: "", phone: "", email: "", notes: "" });
  const [result, setResult] = useState<BookResponse | null>(null);
  const [bookError, setBookError] = useState<string | null>(null);

  const queryClient = useQueryClient();

  const businessQuery = useQuery({
    queryKey: ["public", "business", slug],
    queryFn: () => getBusiness(slug!),
    enabled: !!slug,
    retry: 1,
  });

  const data = businessQuery.data;
  const business = data?.business;
  const services = data?.services ?? [];
  const employees = data?.employees ?? [];

  // Toda hora que ve el cliente se rinde en la zona del NEGOCIO. Si se cae a la del
  // navegador, alguien que reserva desde otro huso ve una hora que no es la de su cita.
  const tz = business?.timezone || "America/Mexico_City";
  const autoAssign = !!business?.auto_assign_specialist;
  const steps = useMemo(() => stepsFor(autoAssign), [autoAssign]);
  const stepCount = steps.length;
  const currentOriginal = steps.find((s) => s.n === step)?.original;

  const selectedService = useMemo<PublicService | undefined>(
    () => services.find((s) => s.id === serviceId),
    [services, serviceId]
  );

  // Un especialista que no ofrece el servicio hace que /slots responda 400. Antes se
  // listaban todos, así que el cliente podía elegir a alguien imposible y solo se
  // enteraba un paso después, con un mensaje que le pedía cambiar la fecha.
  const eligibleEmployees = useMemo(
    () => (serviceId == null ? [] : employees.filter((e) => e.service_ids.includes(serviceId))),
    [employees, serviceId]
  );

  const slotsQuery = useQuery({
    queryKey: ["public", "slots", slug, serviceId, selectedDate, employeeId],
    queryFn: () => getSlots(slug!, serviceId!, selectedDate, employeeId ?? undefined),
    enabled: currentOriginal === 3 && !!serviceId && !!selectedDate && !result,
  });

  const slots = slotsQuery.data?.slots ?? [];

  const bookMut = useMutation({
    mutationFn: (payload: Parameters<typeof book>[1]) => book(slug!, payload),
    onSuccess: (res) => {
      setBookError(null);
      setResult(res);
      window.scrollTo({ top: 0, behavior: "smooth" });
    },
    onError: (err: Error) => {
      setBookError(err?.message || "No pudimos completar tu reserva. Inténtalo de nuevo.");
      setResult(null);
      queryClient.invalidateQueries({ queryKey: ["public", "slots", slug] });
      window.scrollTo({ top: 0, behavior: "smooth" });
    },
  });

  useEffect(() => {
    window.scrollTo({ top: 0, behavior: "smooth" });
  }, [step]);

  const reset = () => {
    setStep(1);
    setServiceId(null);
    setEmployeeId(null);
    setSelectedDate(todayStr());
    setSelectedSlot(null);
    setClient({ name: "", phone: "", email: "", notes: "" });
    setResult(null);
    setBookError(null);
    bookMut.reset();
  };

  if (!slug) {
    return <CenteredMessage title="Enlace inválido" description="Falta el identificador del negocio." />;
  }

  if (businessQuery.isLoading) {
    return (
      <div className="flex min-h-screen items-center justify-center bg-[#f6f7fb]">
        <div className="flex flex-col items-center gap-3 text-slate-500">
          <Spinner className="h-6 w-6 text-brand-500" />
          <span className="text-sm font-medium">Cargando reservas…</span>
        </div>
      </div>
    );
  }

  if (businessQuery.isError || !business || !data) {
    return (
      <CenteredMessage
        title="No encontramos este negocio"
        description={businessQuery.error instanceof Error ? businessQuery.error.message : "El enlace puede ser incorrecto o el negocio no está disponible."}
      />
    );
  }

  const hasPolicy =
    (business.cancel_penalty_pct ?? 0) > 0 || !!business.require_deposit;
  const policyNote = (
    <PolicyNote
      cancelWindowHours={business.cancel_window_hours}
      cancelPenaltyPct={business.cancel_penalty_pct}
      requireDeposit={business.require_deposit}
      depositPct={business.deposit_pct}
    />
  );

  if (result) {
    return (
      <Confirmation
        result={result}
        businessName={business.name}
        clientName={client.name.trim()}
        hasPolicy={hasPolicy}
        policy={policyNote}
        onReset={reset}
      />
    );
  }

  if (!business.booking_enabled) {
    return (
      <div className="flex min-h-screen flex-col bg-[#f6f7fb]">
        <TopBar name={business.name} industry={business.industry} step={0} stepCount={4} steps={[]} />
        <main className="flex flex-1 items-center justify-center px-5 py-10">
          <div className="card w-full max-w-md p-8 text-center shadow-card animate-slide-up">
            <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-amber-100 text-amber-600">
              <AlertCircle className="h-7 w-7" />
            </div>
            <h1 className="mt-4 text-xl font-extrabold text-slate-900">Reservas desactivadas</h1>
            <p className="mt-2 text-sm text-slate-500">
              {business.name} no está recibiendo reservas en línea en este momento.
            </p>
            {business.phone && (
              <a href={`tel:${business.phone}`} className="btn btn-primary mx-auto mt-5">
                <Phone className="h-4 w-4" /> Llamar al {business.phone}
              </a>
            )}
          </div>
        </main>
      </div>
    );
  }

  const goNext = () => setStep((s) => Math.min(stepCount, s + 1));
  const goBack = () => setStep((s) => Math.max(1, s - 1));

  const pickService = (id: number) => {
    if (serviceId !== id) {
      setServiceId(id);
      setSelectedSlot(null);
      setBookError(null);
      // El especialista elegido puede no ofrecer el servicio nuevo: soltarlo en vez
      // de arrastrar una combinación que el servidor rechazará.
      const stillValid = employees.some((e) => e.id === employeeId && e.service_ids.includes(id));
      if (!stillValid) setEmployeeId(null);
    }
  };

  const pickEmployee = (id: number | null) => {
    setEmployeeId(id);
    setSelectedSlot(null);
    setBookError(null);
  };

  const pickSlot = (slot: PublicSlot) => {
    setSelectedSlot(slot);
    setStep((s) => Math.min(stepCount, s + 1));
  };

  const handleBook = () => {
    if (!selectedService || !selectedSlot) return;
    if (!client.name.trim()) return;
    setBookError(null);
    bookMut.mutate({
      service_id: selectedService.id,
      employee_id: autoAssign ? undefined : selectedSlot.employee_id,
      start_at: selectedSlot.iso,
      client: {
        name: client.name.trim(),
        email: client.email.trim() || undefined,
        phone: client.phone.trim() || undefined,
        notes: client.notes.trim() || undefined,
      },
    });
  };

  const canContinue =
    (currentOriginal === 1 && !!serviceId) ||
    currentOriginal === 2 ||
    (currentOriginal === 3 && !!selectedSlot) ||
    (currentOriginal === 4 && client.name.trim().length > 0);

  const currency = business.currency_symbol || "$";
  const primaryLabel = currentOriginal === 4 ? "Confirmar reserva" : "Continuar";
  const onPrimary = currentOriginal === 4 ? handleBook : goNext;

  return (
    <div className="flex min-h-screen flex-col bg-gradient-to-b from-brand-50/50 via-[#f6f7fb] to-[#f6f7fb]">
      <TopBar name={business.name} industry={business.industry} step={step} stepCount={stepCount} steps={steps} />

      <main className={cn(
        "mx-auto w-full flex-1 px-4 pb-32 pt-5 sm:px-6 md:pb-28",
        currentOriginal === 3 ? "max-w-5xl" : "max-w-2xl"
      )}>
        {currentOriginal === 1 && <Hero business={business} />}

        <div className="mt-4">
          {currentOriginal === 1 && (
            <StepShell
              icon={<Sparkles className="h-4 w-4" />}
              title="Elige un servicio"
              subtitle="Selecciona el servicio que deseas reservar."
            >
              <ServiceGrid
                services={services}
                currency={currency}
                selectedId={serviceId}
                onPick={pickService}
              />
            </StepShell>
          )}

          {currentOriginal === 2 && (
            <StepShell
              icon={<User className="h-4 w-4" />}
              title="Elige un especialista"
              subtitle="¿Tienes una preferencia? O déjalo en cualquiera."
            >
              <EmployeeList
                employees={eligibleEmployees}
                selectedId={employeeId}
                onPick={pickEmployee}
                serviceName={selectedService?.name}
              />
            </StepShell>
          )}

          {currentOriginal === 3 && selectedService && (
            <StepShell
              icon={<CalendarDays className="h-4 w-4" />}
              title="Elige fecha y hora"
              subtitle={`${selectedService.name} · ${selectedService.duration_min} min · ${formatCurrency(selectedService.price, currency)}`}
            >
              <DateTimePicker
                date={selectedDate}
                onDate={(d) => {
                  setSelectedDate(d);
                  setSelectedSlot(null);
                  setBookError(null);
                }}
                min={todayStr()}
                max={maxBookableDate()}
                slots={slots}
                loading={slotsQuery.isLoading}
                isError={slotsQuery.isError}
                errorMessage={slotsQuery.error instanceof Error ? slotsQuery.error.message : undefined}
                selectedSlot={selectedSlot}
                onPick={pickSlot}
                tz={tz}
              />
            </StepShell>
          )}

          {currentOriginal === 4 && selectedService && selectedSlot && (
            <StepShell
              icon={<CalendarCheck className="h-4 w-4" />}
              title="Tus datos"
              subtitle="Necesitamos algunos datos para confirmar tu cita."
            >
              {bookError && (
                <div className="mb-4 flex items-start gap-3 rounded-2xl bg-rose-600 px-4 py-3 text-white shadow-soft animate-slide-up">
                  <AlertCircle className="mt-0.5 h-5 w-5 shrink-0" />
                  <div className="min-w-0 flex-1">
                    <p className="text-sm font-bold leading-snug">{bookError}</p>
                    <button
                      type="button"
                      onClick={() => {
                        setBookError(null);
                        setSelectedSlot(null);
                        setStep(steps.find((s) => s.original === 3)?.n ?? 3);
                        queryClient.invalidateQueries({ queryKey: ["public", "slots", slug] });
                      }}
                      className="mt-2 inline-flex items-center gap-1.5 rounded-lg bg-white/20 px-2.5 py-1 text-xs font-bold backdrop-blur transition-colors hover:bg-white/30"
                    >
                      <RefreshCw className="h-3.5 w-3.5" /> Intentar de nuevo
                    </button>
                  </div>
                </div>
              )}
              <DetailsForm
                client={client}
                setClient={setClient}
                policy={policyNote}
                summary={
                  <>
                    <SummaryRow label="Servicio" value={selectedService.name} />
                    <SummaryRow label="Fecha" value={formatDate(selectedSlot.iso, { weekday: "long", timeZone: tz })} />
                    <SummaryRow label="Hora" value={formatTime(selectedSlot.iso, tz)} />
                    {!autoAssign && <SummaryRow label="Especialista" value={selectedSlot.employee_name} />}
                  </>
                }
              />
            </StepShell>
          )}
        </div>
      </main>

      <ActionBar
        hidden={!!result}
        step={step}
        stepCount={stepCount}
        goBack={goBack}
        onPrimary={onPrimary}
        primaryLabel={primaryLabel}
        canContinue={canContinue}
        busy={bookMut.isPending}
        priceLabel={
          selectedService ? formatCurrency(selectedService.price, currency) : undefined
        }
        serviceName={selectedService?.name}
        slotLabel={selectedSlot ? `${formatDate(selectedSlot.iso, { weekday: "short", day: "numeric", month: "short", timeZone: tz })} · ${formatTime(selectedSlot.iso, tz)}` : undefined}
      />

      <FooterNote name={business.name} />
    </div>
  );
}

function TopBar({ name, industry, step, stepCount, steps }: { name: string; industry: string; step: number; stepCount: number; steps: { n: number; label: string }[]; }) {
  const current = steps.find((s) => s.n === step);
  return (
    <header className="sticky top-0 z-30 border-b border-slate-200/70 bg-white/85 backdrop-blur-md">
      <div className="mx-auto flex w-full max-w-5xl items-center justify-between gap-3 px-4 py-3 sm:px-6">
        <div className="flex min-w-0 items-center gap-2.5">
          <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-brand-500 to-brand-700 text-white shadow-soft">
            <Sparkles className="h-4 w-4" />
          </div>
          <div className="min-w-0">
            <div className="truncate text-sm font-extrabold text-slate-900">{name}</div>
            <div className="truncate text-[11px] text-slate-500">{industry}</div>
          </div>
        </div>

        {step > 0 && (
          <div className="flex items-center gap-1.5">
            <span className="hidden text-[11px] font-semibold uppercase tracking-wide text-slate-400 sm:inline">
              Paso {step} de {stepCount}
            </span>
            <div className="hidden items-center gap-1 md:flex">
              {steps.map((s) => (
                <div
                  key={s.n}
                  className={cn(
                    "flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-semibold transition-colors",
                    s.n === step
                      ? "bg-brand-500 text-white"
                      : s.n < step
                      ? "bg-brand-50 text-brand-700"
                      : "bg-slate-100 text-slate-400"
                  )}
                >
                  {s.n < step ? <Check className="h-3 w-3" /> : <span>{s.n}</span>}
                  <span>{s.label}</span>
                </div>
              ))}
            </div>
            <div className="flex items-center gap-1.5 rounded-full bg-brand-50 px-3 py-1 text-xs font-bold text-brand-700 md:hidden">
              <span>{step}</span>
              <span className="font-semibold text-brand-400">/</span>
              <span className="text-brand-400">{stepCount}</span>
              <span className="text-brand-300">·</span>
              <span>{current?.label}</span>
            </div>
          </div>
        )}
      </div>
    </header>
  );
}

function Hero({ business }: { business: { name: string; industry: string; phone: string | null; address: string | null } }) {
  return (
    <section className="overflow-hidden rounded-2xl bg-gradient-to-br from-brand-600 via-brand-600 to-brand-800 p-6 text-white shadow-card animate-fade-in sm:p-8">
      <div className="relative z-10">
        <span className="inline-flex items-center gap-1.5 rounded-full bg-white/15 px-3 py-1 text-xs font-semibold backdrop-blur">
          <Sparkles className="h-3 w-3" /> Reservas en línea
        </span>
        <h1 className="mt-3 text-2xl font-extrabold leading-tight tracking-tight sm:text-3xl">
          {business.name}
        </h1>
        <p className="mt-1.5 max-w-md text-sm text-brand-100">
          Reserva tu cita en {business.industry.toLowerCase()} en pocos segundos. Sin llamadas, sin esperas.
        </p>
        {(business.address || business.phone) && (
          <div className="mt-4 flex flex-wrap gap-2 text-xs">
            {business.address && (
              <span className="inline-flex items-center gap-1.5 rounded-lg bg-white/10 px-2.5 py-1.5 backdrop-blur">
                <MapPin className="h-3.5 w-3.5" /> {business.address}
              </span>
            )}
            {business.phone && (
              <span className="inline-flex items-center gap-1.5 rounded-lg bg-white/10 px-2.5 py-1.5 backdrop-blur">
                <Phone className="h-3.5 w-3.5" /> {business.phone}
              </span>
            )}
          </div>
        )}
      </div>
    </section>
  );
}

function StepShell({
  icon,
  title,
  subtitle,
  children,
}: {
  icon: React.ReactNode;
  title: string;
  subtitle?: string;
  children: React.ReactNode;
}) {
  return (
    <div className="animate-slide-up">
      <div className="mb-4 flex items-center gap-2.5">
        <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-brand-50 text-brand-600">
          {icon}
        </div>
        <div>
          <h2 className="text-base font-extrabold text-slate-900 sm:text-lg">{title}</h2>
          {subtitle && <p className="text-xs text-slate-500 sm:text-sm">{subtitle}</p>}
        </div>
      </div>
      {children}
    </div>
  );
}

function ServiceGrid({
  services,
  currency,
  selectedId,
  onPick,
}: {
  services: PublicService[];
  currency: string;
  selectedId: number | null;
  onPick: (id: number) => void;
}) {
  if (services.length === 0) {
    return (
      <div className="card p-8 text-center text-sm text-slate-500">
        Este negocio aún no tiene servicios disponibles para reservar.
      </div>
    );
  }
  return (
    <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
      {services.map((s) => {
        const active = s.id === selectedId;
        return (
          <button
            key={s.id}
            type="button"
            onClick={() => onPick(s.id)}
            className={cn(
              "group relative flex flex-col gap-2 rounded-2xl border p-4 text-left transition-all",
              active
                ? "border-brand-500 bg-brand-50/60 shadow-soft ring-2 ring-brand-500/20"
                : "border-slate-200 bg-white hover:border-brand-300 hover:shadow-soft"
            )}
          >
            <div className="flex items-start justify-between gap-2">
              <span
                className="inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-bold text-white"
                style={{ background: s.color || "#3b66ff" }}
              >
                {s.category}
              </span>
              {active && (
                <span className="flex h-5 w-5 items-center justify-center rounded-full bg-brand-500 text-white">
                  <Check className="h-3 w-3" />
                </span>
              )}
            </div>
            <div>
              <div className="font-bold text-slate-900">{s.name}</div>
              {s.description && (
                <p className="mt-0.5 line-clamp-2 text-xs text-slate-500">{s.description}</p>
              )}
            </div>
            <div className="mt-1 flex items-center justify-between">
              <span className="inline-flex items-center gap-1 text-xs font-medium text-slate-500">
                <Clock className="h-3.5 w-3.5" /> {s.duration_min} min
              </span>
              <span className="text-base font-extrabold text-brand-700">
                {formatCurrency(s.price, currency)}
              </span>
            </div>
          </button>
        );
      })}
    </div>
  );
}

function EmployeeList({
  employees,
  selectedId,
  onPick,
  serviceName,
}: {
  employees: { id: number; name: string; role: string; color: string }[];
  selectedId: number | null;
  onPick: (id: number | null) => void;
  serviceName?: string;
}) {
  const anyActive = selectedId === null;
  return (
    <div className="space-y-2.5">
      <button
        type="button"
        onClick={() => onPick(null)}
        className={cn(
          "flex w-full items-center gap-3 rounded-2xl border p-3.5 text-left transition-all",
          anyActive
            ? "border-brand-500 bg-brand-50/60 shadow-soft ring-2 ring-brand-500/20"
            : "border-slate-200 bg-white hover:border-brand-300"
        )}
      >
        <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-brand-500 to-brand-700 text-white">
          <Sparkles className="h-5 w-5" />
        </div>
        <div className="min-w-0 flex-1">
          <div className="font-bold text-slate-900">Cualquiera</div>
          <div className="text-xs text-slate-500">Asigna al especialista disponible</div>
        </div>
        {anyActive && (
          <span className="flex h-5 w-5 items-center justify-center rounded-full bg-brand-500 text-white">
            <Check className="h-3 w-3" />
          </span>
        )}
      </button>

      {employees.length === 0 && (
        <p className="rounded-2xl border border-slate-200 bg-slate-50 p-3.5 text-sm text-slate-600">
          {serviceName
            ? `Para ${serviceName} asignamos al especialista disponible.`
            : "Asignamos al especialista disponible."}
        </p>
      )}

      {employees.map((e) => {
        const active = e.id === selectedId;
        return (
          <button
            key={e.id}
            type="button"
            onClick={() => onPick(e.id)}
            className={cn(
              "flex w-full items-center gap-3 rounded-2xl border p-3.5 text-left transition-all",
              active
                ? "border-brand-500 bg-brand-50/60 shadow-soft ring-2 ring-brand-500/20"
                : "border-slate-200 bg-white hover:border-brand-300"
            )}
          >
            <div
              className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full text-sm font-bold text-white"
              style={{ background: e.color || "#3b66ff" }}
            >
              {e.name.split(" ").filter(Boolean).slice(0, 2).map((p) => p[0]?.toUpperCase()).join("")}
            </div>
            <div className="min-w-0 flex-1">
              <div className="truncate font-bold text-slate-900">{e.name}</div>
              <div className="truncate text-xs text-slate-500">{e.role}</div>
            </div>
            {active && (
              <span className="flex h-5 w-5 items-center justify-center rounded-full bg-brand-500 text-white">
                <Check className="h-3 w-3" />
              </span>
            )}
          </button>
        );
      })}
    </div>
  );
}

function DateTimePicker({
  date,
  onDate,
  min,
  max,
  slots,
  loading,
  isError,
  errorMessage,
  selectedSlot,
  onPick,
  tz,
}: {
  date: string;
  onDate: (d: string) => void;
  min: string;
  max?: string;
  slots: PublicSlot[];
  loading: boolean;
  isError: boolean;
  errorMessage?: string;
  selectedSlot: PublicSlot | null;
  onPick: (s: PublicSlot) => void;
  tz: string;
}) {
  // La hora sale del instante `iso` resuelto en la tz del negocio. Antes se parseaba
  // `s.time`, ya localizado: es-MX rinde "05:00 p.m." y `/PM/i` no casa con "p.m.",
  // así que TODOS los slots de la tarde se agrupaban bajo "Mañana".
  const { morning, afternoon } = useMemo(() => {
    const morning: PublicSlot[] = [];
    const afternoon: PublicSlot[] = [];
    for (const s of slots) {
      (hourInTz(s.iso, tz) < 12 ? morning : afternoon).push(s);
    }
    return { morning, afternoon };
  }, [slots, tz]);

  return (
    <div className="md:grid md:grid-cols-[minmax(0,1fr)_minmax(0,1.1fr)] md:items-start md:gap-8">
      {/* Columna izquierda: calendario */}
      <div className="card p-4">
        <label className="label flex items-center gap-1.5">
          <CalendarDays className="h-3.5 w-3.5 text-slate-400" /> Fecha
        </label>
        <MonthCalendar value={date} min={min} max={max} onSelect={(d) => onDate(d)} />
        <div className="mt-3 flex flex-wrap items-center gap-3 text-[11px] text-slate-500">
          <span className="inline-flex items-center gap-1"><span className="h-2 w-2 rounded-full bg-accent-500" /> Con cupo</span>
          <span className="inline-flex items-center gap-1"><span className="h-2 w-2 rounded-full bg-brand-400" /> Hoy</span>
        </div>
      </div>

      {/* Columna derecha: horarios */}
      <div className="mt-4 md:mt-0">
        <label className="label flex items-center gap-1.5">
          <Clock className="h-3.5 w-3.5 text-slate-400" /> Horario disponible
        </label>
        <div className="card p-4">
          {loading && (
            <div className="flex items-center justify-center gap-2 py-8 text-slate-400">
              <Spinner className="text-brand-500" />
              <span className="text-sm font-medium">Buscando horarios…</span>
            </div>
          )}
          {!loading && isError && (
            <div className="flex flex-col items-center gap-2 py-8 text-center">
              <AlertCircle className="h-6 w-6 text-rose-400" />
              {/* Se muestra el motivo real del servidor. El texto fijo anterior
                  ("intenta otra fecha") mandaba al cliente a probar días al azar
                  cuando el problema era el especialista, y ninguna fecha lo resolvía. */}
              <p className="text-sm font-medium text-slate-700">
                {errorMessage || "No pudimos cargar los horarios."}
              </p>
              <p className="text-xs text-slate-400">Prueba con otro especialista u otra fecha.</p>
            </div>
          )}
          {!loading && !isError && slots.length === 0 && (
            <div className="flex flex-col items-center gap-2 py-8 text-center">
              <CalendarDays className="h-6 w-6 text-slate-300" />
              <p className="text-sm font-medium text-slate-600">Sin horarios disponibles</p>
              <p className="text-xs text-slate-400">Prueba con otra fecha o especialista.</p>
            </div>
          )}
          {!loading && !isError && slots.length > 0 && (
            <div className="space-y-4">
              <SlotGroup title="Mañana" slots={morning} selectedSlot={selectedSlot} onPick={onPick} tz={tz} />
              <SlotGroup title="Tarde" slots={afternoon} selectedSlot={selectedSlot} onPick={onPick} tz={tz} />
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

function SlotGroup({
  title,
  slots,
  selectedSlot,
  onPick,
  tz,
}: {
  title: string;
  slots: PublicSlot[];
  selectedSlot: PublicSlot | null;
  onPick: (s: PublicSlot) => void;
  tz: string;
}) {
  if (slots.length === 0) return null;
  return (
    <div>
      <div className="mb-2 flex items-center gap-2">
        <span className="rounded-full bg-accent-50 px-2 py-0.5 text-[11px] font-bold uppercase tracking-wide text-accent-700">{title}</span>
        <span className="text-[11px] font-medium text-slate-400">{slots.length} opciones</span>
      </div>
      <div className="grid grid-cols-3 gap-2 sm:grid-cols-4">
        {slots.map((slot) => {
          const active = selectedSlot?.iso === slot.iso && selectedSlot?.employee_id === slot.employee_id;
          return (
            <button
              key={`${slot.iso}-${slot.employee_id}`}
              type="button"
              onClick={() => onPick(slot)}
              className={cn(
                "rounded-xl border px-2 py-2.5 text-sm font-bold transition-all",
                active
                  ? "border-brand-500 bg-brand-500 text-white shadow-soft"
                  : "border-slate-200 bg-white text-slate-700 hover:border-brand-400 hover:bg-brand-50"
              )}
            >
              {formatTime(slot.iso, tz)}
            </button>
          );
        })}
      </div>
    </div>
  );
}

function DetailsForm({
  client,
  setClient,
  summary,
  policy,
}: {
  client: { name: string; phone: string; email: string; notes: string };
  setClient: (c: { name: string; phone: string; email: string; notes: string }) => void;
  summary: React.ReactNode;
  policy?: React.ReactNode;
}) {
  return (
    <div className="space-y-4">
      <div className="card divide-y divide-slate-100 p-2">{summary}</div>
      {policy}
      <div className="card p-4">
        <div className="grid gap-3">
          <div>
            <label className="label">Nombre completo *</label>
            <div className="relative">
              <User className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
              <input
                className="input pl-10"
                value={client.name}
                onChange={(e) => setClient({ ...client, name: e.target.value })}
                placeholder="Tu nombre"
                autoFocus
              />
            </div>
          </div>
          <div className="grid gap-3 sm:grid-cols-2">
            <div>
              <label className="label">Teléfono</label>
              <div className="relative">
                <Phone className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
                <input
                  className="input pl-10"
                  inputMode="tel"
                  value={client.phone}
                  onChange={(e) => setClient({ ...client, phone: e.target.value })}
                  placeholder="+52 …"
                />
              </div>
            </div>
            <div>
              <label className="label">Correo</label>
              <div className="relative">
                <Mail className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
                <input
                  type="email"
                  className="input pl-10"
                  value={client.email}
                  onChange={(e) => setClient({ ...client, email: e.target.value })}
                  placeholder="tucorreo@email.com"
                />
              </div>
            </div>
          </div>
          <div>
            <label className="label">Notas (opcional)</label>
            <textarea
              className="textarea"
              rows={2}
              value={client.notes}
              onChange={(e) => setClient({ ...client, notes: e.target.value })}
              placeholder="Preferencias, alergias, indicaciones…"
            />
          </div>
        </div>
      </div>
    </div>
  );
}

function PolicyNote({
  cancelWindowHours,
  cancelPenaltyPct,
  requireDeposit,
  depositPct,
}: {
  cancelWindowHours: number;
  cancelPenaltyPct: number;
  requireDeposit: boolean | number;
  depositPct: number;
}) {
  const lines: string[] = [];
  if ((cancelPenaltyPct ?? 0) > 0) {
    lines.push(`Cancela con al menos ${cancelWindowHours ?? 0} h de anticipación. Si no, aplica un cargo del ${cancelPenaltyPct}%.`);
  }
  if (requireDeposit) {
    lines.push(`Se solicita un depósito del ${depositPct ?? 0}% (te lo indicará el negocio al pagar).`);
  }
  if (lines.length === 0) return null;
  return (
    <div className="flex items-start gap-2 rounded-xl bg-amber-50 px-3 py-2.5 text-xs text-amber-800">
      <Info className="mt-0.5 h-3.5 w-3.5 shrink-0 text-amber-500" />
      <div className="space-y-0.5">
        {lines.map((l) => (
          <p key={l}>{l}</p>
        ))}
      </div>
    </div>
  );
}

function SummaryRow({ label, value }: { label: string; value: string }) {
  return (
    <div className="flex items-center justify-between gap-3 px-3 py-2.5">
      <span className="text-xs font-semibold uppercase tracking-wide text-slate-400">{label}</span>
      <span className="text-right text-sm font-bold text-slate-800">{value}</span>
    </div>
  );
}

function ActionBar({
  hidden,
  step,
  stepCount,
  goBack,
  onPrimary,
  primaryLabel,
  canContinue,
  busy,
  priceLabel,
  serviceName,
  slotLabel,
}: {
  hidden: boolean;
  step: number;
  stepCount: number;
  goBack: () => void;
  onPrimary: () => void;
  primaryLabel: string;
  canContinue: boolean;
  busy: boolean;
  priceLabel?: string;
  serviceName?: string;
  slotLabel?: string;
}) {
  if (hidden) return null;
  return (
    <div className="sticky bottom-0 z-30 border-t border-slate-200/70 bg-white/90 backdrop-blur-md">
      <div className="mx-auto flex w-full max-w-5xl items-center gap-3 px-4 py-3 sm:px-6">
        {step > 1 && (
          <button onClick={goBack} className="btn btn-ghost shrink-0" type="button">
            <ChevronLeft className="h-4 w-4" /> <span className="hidden sm:inline">Atrás</span>
          </button>
        )}
        <div className="min-w-0 flex-1">
          {serviceName ? (
            <>
              <div className="truncate text-sm font-bold text-slate-900">{serviceName}</div>
              <div className="truncate text-xs text-slate-500">
                {slotLabel ? slotLabel : priceLabel}
              </div>
            </>
          ) : (
            <div className="text-sm font-medium text-slate-400">
              {step === 1 ? "Selecciona un servicio" : `Paso ${step} de ${stepCount} · Continúa para reservar`}
            </div>
          )}
        </div>
        <button
          onClick={onPrimary}
          disabled={!canContinue || busy}
          className="btn btn-primary shrink-0"
          type="button"
        >
          {busy ? <Spinner /> : <>{primaryLabel} <ChevronRight className="h-4 w-4" /></>}
        </button>
      </div>
    </div>
  );
}

function FooterNote({ name }: { name: string }) {
  return (
    <div className="border-t border-slate-200/60 bg-white/50 px-4 py-3 text-center text-[11px] text-slate-400">
      Reserva en línea · {name} · powered by AgendaMax
    </div>
  );
}

function Confirmation({
  result,
  businessName,
  clientName,
  hasPolicy,
  policy,
  onReset,
}: {
  result: BookResponse;
  businessName: string;
  clientName: string;
  hasPolicy: boolean;
  policy?: React.ReactNode;
  onReset: () => void;
}) {
  const { appointment } = result;
  const currency = result.business.currency_symbol || "$";
  const showRisk = result.risk_flag === true || (result.no_show_count ?? 0) >= 2;
  return (
    <div className="flex min-h-screen flex-col bg-gradient-to-b from-brand-50/60 to-[#f6f7fb]">
      <TopBar name={businessName} industry="Reserva confirmada" step={0} stepCount={4} steps={[]} />
      <main className="flex flex-1 items-center justify-center px-5 py-10">
        <div className="w-full max-w-md animate-slide-up">
          <div className="card overflow-hidden p-0 text-center shadow-card">
            <div className="relative overflow-hidden bg-gradient-to-br from-emerald-500 to-emerald-600 px-6 py-8 text-white">
              <div className="absolute -right-10 -top-10 h-40 w-40 rounded-full bg-white/15 blur-2xl" />
              <div className="relative z-10 mx-auto flex h-16 w-16 items-center justify-center rounded-2xl bg-white/20 backdrop-blur">
                <PartyPopper className="h-8 w-8" />
              </div>
              <h1 className="relative z-10 mt-3 text-xl font-extrabold">¡Reserva confirmada!</h1>
              <p className="relative z-10 mt-1 text-sm text-emerald-50">
                Te esperamos en {businessName}.
              </p>
            </div>

            <div className="border-b border-slate-100 bg-slate-50/60 px-5 py-3 text-center">
              <p className="text-sm font-bold text-slate-800">
                {result.client_created === false
                  ? `¡Gracias por volver, ${clientName}! 👋`
                  : `¡Hola, ${clientName}! Tu cita quedó confirmada.`}
              </p>
            </div>

            <div className="space-y-1 p-5 text-left">
              <SummaryRow label="Servicio" value={appointment.service_name} />
              <div className="h-px bg-slate-100" />
              <SummaryRow label="Fecha" value={formatDate(appointment.start_at, { weekday: "long" })} />
              <div className="h-px bg-slate-100" />
              <SummaryRow label="Hora" value={formatTime(appointment.start_at)} />
              <div className="h-px bg-slate-100" />
              <SummaryRow label="Especialista" value={appointment.employee_name} />
              {appointment.reasons && appointment.reasons.length > 0 && (
                <div className="px-3 pb-2 pt-1">
                  <div className="flex flex-wrap gap-1.5">
                    {appointment.reasons.map((r) => (
                      <span key={r} className="inline-flex items-center gap-1 rounded-full bg-brand-50 px-2 py-0.5 text-[11px] font-bold text-brand-700">
                        <Sparkles className="h-3 w-3" /> {r}
                      </span>
                    ))}
                  </div>
                </div>
              )}
              <div className="h-px bg-slate-100" />
              <div className="flex items-center justify-between gap-3 px-3 py-3">
                <span className="text-xs font-semibold uppercase tracking-wide text-slate-400">Total</span>
                <span className="text-lg font-extrabold text-brand-700">
                  {formatCurrency(appointment.price, currency)}
                </span>
              </div>
            </div>
          </div>

          {showRisk && (
            <div className="mt-4 flex items-start gap-2.5 rounded-2xl bg-amber-50 px-4 py-3 text-amber-800 ring-1 ring-amber-200">
              <Info className="mt-0.5 h-4 w-4 shrink-0 text-amber-500" />
              <p className="text-xs font-medium leading-relaxed">
                Notamos ausencias previas sin avisar. Te enviaremos un recordatorio; reserva y no asistir puede generar un cargo según la política del negocio.
              </p>
            </div>
          )}
          {hasPolicy && policy ? <div className="mt-4">{policy}</div> : null}

          <button onClick={onReset} className="btn btn-secondary mt-4 w-full" type="button">
            <ChevronLeft className="h-4 w-4" /> Reservar otra cita
          </button>
          <p className="mt-3 text-center text-xs text-slate-400">
            Guarda esta página o toma una captura con los datos de tu cita.
          </p>
        </div>
      </main>
    </div>
  );
}

function CenteredMessage({ title, description }: { title: string; description: string }) {
  return (
    <div className="flex min-h-screen items-center justify-center bg-[#f6f7fb] px-5">
      <div className="card w-full max-w-md p-8 text-center shadow-card">
        <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-2xl bg-rose-100 text-rose-500">
          <AlertCircle className="h-6 w-6" />
        </div>
        <h1 className="mt-3 text-lg font-extrabold text-slate-900">{title}</h1>
        <p className="mt-1.5 text-sm text-slate-500">{description}</p>
      </div>
    </div>
  );
}