'use client';

import { useState, useTransition } from 'react';

import TemplatePicker, { type Template } from '@/app/admin/components/TemplatePicker';
import { countDays } from '@/lib/schedule/vacations';

import { createVacation, deleteVacation, translateVacationLabel } from './actions';

export type VacationRow = {
  id: string;
  startDate: string;
  endDate: string;
  labelFr: string;
  labelEn: string | null;
  isCurrent: boolean;
};

export default function VacationManager({
  canEdit,
  periods,
  templates,
}: {
  canEdit: boolean;
  periods: VacationRow[];
  templates: Template[];
}) {
  const [startDate, setStartDate] = useState('');
  const [endDate, setEndDate] = useState('');
  const [labelFr, setLabelFr] = useState('');
  const [pending, startTransition] = useTransition();
  const [message, setMessage] = useState<{ kind: 'ok' | 'error'; text: string } | null>(null);

  function run(work: () => Promise<{ ok: true } | { ok: false; error: string }>, success: string) {
    setMessage(null);
    startTransition(async () => {
      const result = await work();
      if (result.ok) {
        setMessage({ kind: 'ok', text: success });
        setStartDate('');
        setEndDate('');
        setLabelFr('');
      } else {
        setMessage({ kind: 'error', text: result.error });
      }
    });
  }

  return (
    <div className="mt-8 space-y-8">
      {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}

      {canEdit ? (
        <section className="rounded-[var(--radius-md)] border border-[var(--line)] bg-[var(--surface)] p-5">
          <h2 className="text-lg">Nouvelle période de fermeture</h2>

          <div className="mt-4 flex flex-wrap items-end gap-3">
            <label className="text-sm">
              <span className="block text-[var(--ink-muted)]">Du</span>
              <input
                type="date"
                value={startDate}
                onChange={(event) => {
                  setStartDate(event.target.value);
                  if (!endDate) {
                    setEndDate(event.target.value);
                  }
                }}
                className="mt-1 rounded-[var(--radius-sm)] border border-[var(--line-strong)] bg-[var(--surface)] px-2 py-2 text-base"
              />
            </label>
            <label className="text-sm">
              <span className="block text-[var(--ink-muted)]">Au (inclus)</span>
              <input
                type="date"
                value={endDate}
                onChange={(event) => setEndDate(event.target.value)}
                className="mt-1 rounded-[var(--radius-sm)] border border-[var(--line-strong)] bg-[var(--surface)] px-2 py-2 text-base"
              />
            </label>
            <label className="min-w-56 flex-1 text-sm">
              <span className="block text-[var(--ink-muted)]">Libellé affiché sur l’écran</span>
              <input
                type="text"
                value={labelFr}
                maxLength={80}
                placeholder="Congés d’été"
                onChange={(event) => setLabelFr(event.target.value)}
                className="mt-1 w-full rounded-[var(--radius-sm)] border border-[var(--line-strong)] bg-[var(--surface)] px-2 py-2 text-base"
              />
            </label>
            <TemplatePicker templates={templates} onPick={setLabelFr} disabled={pending} />
          </div>

          <div className="mt-4 flex flex-wrap items-center gap-3">
            <button
              type="button"
              disabled={pending || !startDate || !endDate || labelFr.trim().length === 0}
              onClick={() =>
                run(async () => {
                  const created = await createVacation({ startDate, endDate, labelFr });
                  if (created.ok) {
                    // After the fact: the dates matter more than the English,
                    // and the translation service is measured in seconds.
                    await translateVacationLabel(created.id);
                  }
                  return created;
                }, 'Période de fermeture enregistrée.')
              }
              className="rounded-[var(--radius-md)] bg-[var(--accent)] px-4 py-2.5 font-medium text-[var(--on-accent)] transition-colors hover:bg-[var(--accent-hover)] disabled:opacity-40"
            >
              {pending ? 'Enregistrement…' : 'Ajouter'}
            </button>

            {startDate && endDate && startDate <= endDate ? (
              <p className="text-sm text-[var(--ink-muted)]">
                {countDays({ startDate, endDate })} jour
                {countDays({ startDate, endDate }) > 1 ? 's' : ''} de fermeture.
              </p>
            ) : null}
          </div>
        </section>
      ) : null}

      <section>
        <h2 className="text-lg">Périodes enregistrées</h2>
        {periods.length === 0 ? (
          <p className="mt-3 text-sm text-[var(--ink-muted)]">Aucune fermeture prévue.</p>
        ) : (
          <ul className="mt-3 divide-y divide-[var(--line)] overflow-hidden rounded-[var(--radius-md)] border border-[var(--line)] bg-[var(--surface)]">
            {periods.map((period) => (
              <li key={period.id} className="flex flex-wrap items-center gap-x-3 gap-y-1 px-4 py-3">
                <span className="font-medium">{period.labelFr}</span>
                <span className="text-sm text-[var(--ink-muted)]">
                  du {period.startDate} au {period.endDate} ·{' '}
                  {countDays({ startDate: period.startDate, endDate: period.endDate })} jours
                </span>
                {period.isCurrent ? (
                  <span className="rounded-[var(--radius-sm)] bg-[var(--accent-tint)] px-2 py-0.5 text-xs text-[var(--accent-ink)]">
                    en cours
                  </span>
                ) : null}
                {period.labelEn ? (
                  <span className="text-sm text-[var(--ink-muted)]">« {period.labelEn} »</span>
                ) : (
                  <span className="text-xs text-[var(--ink-muted)]">traduction à venir</span>
                )}

                {canEdit ? (
                  <button
                    type="button"
                    disabled={pending}
                    onClick={() => run(() => deleteVacation(period.id), 'Période supprimée.')}
                    className="ml-auto text-sm text-[var(--ink-muted)] underline-offset-2 hover:text-[var(--danger)] hover:underline disabled:opacity-40"
                  >
                    Supprimer
                  </button>
                ) : null}
              </li>
            ))}
          </ul>
        )}
      </section>
    </div>
  );
}