'use client';

import { useState, useTransition } from 'react';

import { runHolidaySync, setHolidayClosure } from './actions';

export type HolidayRow = {
  id: string;
  date: string;
  label: string;
  nameFr: string;
  nameEn: string;
  nationwide: boolean;
  isAutoClosed: boolean;
};

export default function HolidayManager({
  canEdit,
  holidays,
  lastSuccessAt,
  lastError,
  subdivisionCode,
}: {
  canEdit: boolean;
  holidays: HolidayRow[];
  lastSuccessAt: string | null;
  lastError: string | null;
  subdivisionCode: string;
}) {
  const [pending, startTransition] = useTransition();
  const [message, setMessage] = useState<{ kind: 'ok' | 'error'; text: string } | null>(null);
  const [closures, setClosures] = useState<Record<string, boolean>>(
    Object.fromEntries(holidays.map((holiday) => [holiday.id, holiday.isAutoClosed])),
  );

  function toggle(id: string, next: boolean) {
    setClosures((current) => ({ ...current, [id]: next }));
    setMessage(null);
    startTransition(async () => {
      const result = await setHolidayClosure(id, next);
      if (!result.ok) {
        // Put the switch back: the database is the truth, not the checkbox.
        setClosures((current) => ({ ...current, [id]: !next }));
        setMessage({ kind: 'error', text: result.error });
      }
    });
  }

  function sync() {
    setMessage(null);
    startTransition(async () => {
      const result = await runHolidaySync();
      setMessage(
        result.ok
          ? { kind: 'ok', text: `Calendrier à jour. ${result.value.summary}` }
          : { kind: 'error', text: result.error },
      );
    });
  }

  return (
    <div className="mt-8 space-y-6">
      {message ? (
        <p
          role="status"
          className={`rounded-[var(--radius-md)] px-4 py-3 text-sm ${
            message.kind === 'ok'
              ? 'bg-[var(--success-tint)] text-[var(--success)]'
              : 'bg-[var(--danger-tint)] text-[var(--danger)]'
          }`}
        >
          {message.text}
        </p>
      ) : null}

      <section className="flex flex-wrap items-center gap-x-4 gap-y-2 rounded-[var(--radius-md)] border border-[var(--line)] bg-[var(--surface)] px-4 py-3 text-sm">
        <span className="text-[var(--ink-muted)]">
          Canton <span className="font-mono">{subdivisionCode}</span>
        </span>
        <span className="text-[var(--ink-muted)]">
          {lastSuccessAt
            ? `Dernière synchronisation réussie : ${lastSuccessAt}`
            : 'Jamais synchronisé.'}
        </span>
        {lastError ? (
          <span className="text-[var(--danger)]">Dernière tentative en échec : {lastError}</span>
        ) : null}

        {canEdit ? (
          <button
            type="button"
            disabled={pending}
            onClick={sync}
            className="ml-auto rounded-[var(--radius-sm)] border border-[var(--line-strong)] px-3 py-1.5 hover:bg-[var(--surface-muted)] disabled:opacity-40"
          >
            {pending ? 'Synchronisation…' : 'Synchroniser maintenant'}
          </button>
        ) : null}
      </section>

      {holidays.length === 0 ? (
        <p className="text-sm text-[var(--ink-muted)]">
          Aucun jour férié en cache. Lancez une synchronisation.
        </p>
      ) : (
        <ul className="divide-y divide-[var(--line)] overflow-hidden rounded-[var(--radius-md)] border border-[var(--line)] bg-[var(--surface)]">
          {holidays.map((holiday) => (
            <li key={holiday.id} className="flex flex-wrap items-center gap-x-3 gap-y-1 px-4 py-3">
              <span className="min-w-44 font-medium">{holiday.label}</span>
              <span>{holiday.nameFr}</span>
              <span className="text-sm text-[var(--ink-muted)]">{holiday.nameEn}</span>
              {!holiday.nationwide ? (
                <span className="rounded-[var(--radius-sm)] bg-[var(--surface-muted)] px-2 py-0.5 text-xs text-[var(--ink-muted)]">
                  cantonal
                </span>
              ) : null}

              <label className="ml-auto flex items-center gap-2 text-sm">
                <input
                  type="checkbox"
                  className="size-4 accent-[var(--accent)]"
                  checked={closures[holiday.id] ?? holiday.isAutoClosed}
                  disabled={!canEdit || pending}
                  onChange={(event) => toggle(holiday.id, event.target.checked)}
                />
                boutique fermée
              </label>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}