'use client';

import { useState, useTransition } from 'react';

import { MESSAGE_MAX_CHARS } from '@/lib/screen/contract';

import {
  deleteTemplate,
  saveTemplate,
  setTemplateTranslation,
  translateTemplate,
} from './actions';

export type TemplateRow = {
  id: string;
  textFr: string;
  textEn: string | null;
  translationStatus: 'PENDING' | 'DONE' | 'MANUAL' | 'ERROR';
  sortOrder: number;
};

const STATUS: Record<TemplateRow['translationStatus'], { label: string; className: string }> = {
  PENDING: { label: 'traduction en attente', className: 'bg-[var(--surface-muted)] text-[var(--ink-muted)]' },
  DONE: { label: 'traduit', className: 'bg-[var(--success-tint)] text-[var(--success)]' },
  MANUAL: { label: 'traduction manuelle', className: 'bg-[var(--accent-tint)] text-[var(--accent-ink)]' },
  ERROR: { label: 'traduction en échec', className: 'bg-[var(--danger-tint)] text-[var(--danger)]' },
};

export default function TemplateManager({
  canEdit,
  templates,
}: {
  canEdit: boolean;
  templates: TemplateRow[];
}) {
  const [textFr, setTextFr] = useState('');
  const [pending, startTransition] = useTransition();
  const [message, setMessage] = useState<{ kind: 'ok' | 'error'; text: string } | null>(null);

  const remaining = MESSAGE_MAX_CHARS - textFr.length;

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

  function create() {
    setMessage(null);
    startTransition(async () => {
      const saved = await saveTemplate({ textFr, sortOrder: templates.length });
      if (!saved.ok) {
        setMessage({ kind: 'error', text: saved.error });
        return;
      }
      setTextFr('');
      setMessage({ kind: 'ok', text: 'Modèle enregistré. Traduction en cours…' });

      const translated = await translateTemplate(saved.value.id);
      setMessage(
        translated.ok
          ? { kind: 'ok', text: 'Modèle enregistré et traduit.' }
          : { kind: 'error', text: `Modèle enregistré, mais la traduction a échoué : ${translated.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">Nouveau modèle</h2>
          <label className="mt-4 block text-sm">
            <span className="block text-[var(--ink-muted)]">Texte en français</span>
            <input
              type="text"
              value={textFr}
              onChange={(event) => setTextFr(event.target.value)}
              placeholder="Fermeture exceptionnelle, retour demain"
              className="mt-1 w-full rounded-[var(--radius-sm)] border border-[var(--line-strong)] bg-[var(--surface)] px-3 py-2 text-base"
            />
          </label>
          <p
            className={`mt-1 text-sm ${remaining < 0 ? 'text-[var(--danger)]' : 'text-[var(--ink-muted)]'}`}
          >
            {remaining >= 0
              ? `${remaining} caractères restants.`
              : `${-remaining} caractères de trop : le message serait coupé sur l’écran.`}
          </p>
          <button
            type="button"
            disabled={pending || textFr.trim().length === 0 || remaining < 0}
            onClick={create}
            className="mt-4 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>
        </section>
      ) : null}

      <section>
        <h2 className="text-lg">Modèles enregistrés</h2>
        {templates.length === 0 ? (
          <p className="mt-3 text-sm text-[var(--ink-muted)]">
            Aucun modèle. Ceux que vous ajoutez ici seront proposés partout où l’on compose un
            message.
          </p>
        ) : (
          <ul className="mt-3 space-y-3">
            {templates.map((row) => (
              <TemplateCard
                key={row.id}
                row={row}
                canEdit={canEdit}
                pending={pending}
                run={run}
                startTransition={startTransition}
                setMessage={setMessage}
              />
            ))}
          </ul>
        )}
      </section>
    </div>
  );
}

function TemplateCard({
  row,
  canEdit,
  pending,
  run,
  startTransition,
  setMessage,
}: {
  row: TemplateRow;
  canEdit: boolean;
  pending: boolean;
  run: (work: () => Promise<{ ok: true } | { ok: false; error: string }>, success: string) => void;
  startTransition: (work: () => void) => void;
  setMessage: (value: { kind: 'ok' | 'error'; text: string } | null) => void;
}) {
  const [draftEn, setDraftEn] = useState(row.textEn ?? '');
  const badge = STATUS[row.translationStatus];

  return (
    <li className="rounded-[var(--radius-md)] border border-[var(--line)] bg-[var(--surface)] p-4">
      <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
        <p className="font-medium">{row.textFr}</p>
        <span className={`rounded-[var(--radius-sm)] px-2 py-0.5 text-xs ${badge.className}`}>
          {badge.label}
        </span>
      </div>

      {canEdit ? (
        <div className="mt-3 flex flex-wrap items-end gap-2">
          <label className="min-w-56 flex-1 text-sm">
            <span className="block text-[var(--ink-muted)]">Traduction anglaise</span>
            <input
              type="text"
              value={draftEn}
              onChange={(event) => setDraftEn(event.target.value)}
              className="mt-1 w-full rounded-[var(--radius-sm)] border border-[var(--line-strong)] bg-[var(--surface)] px-2 py-1.5 text-base"
            />
          </label>
          <button
            type="button"
            disabled={pending || draftEn === (row.textEn ?? '')}
            onClick={() =>
              run(() => setTemplateTranslation(row.id, draftEn), 'Traduction enregistrée.')
            }
            className="rounded-[var(--radius-sm)] border border-[var(--line-strong)] px-3 py-1.5 text-sm hover:bg-[var(--surface-muted)] disabled:opacity-40"
          >
            Enregistrer
          </button>
          <button
            type="button"
            disabled={pending}
            onClick={() => {
              setMessage(null);
              startTransition(async () => {
                const result = await translateTemplate(row.id);
                setMessage(
                  result.ok
                    ? { kind: 'ok', text: 'Traduction mise à jour.' }
                    : { kind: 'error', text: result.error },
                );
              });
            }}
            className="rounded-[var(--radius-sm)] border border-[var(--line-strong)] px-3 py-1.5 text-sm hover:bg-[var(--surface-muted)] disabled:opacity-40"
          >
            {row.translationStatus === 'ERROR' ? 'Réessayer' : 'Retraduire'}
          </button>
          <button
            type="button"
            disabled={pending}
            onClick={() => run(() => deleteTemplate(row.id), 'Modèle supprimé.')}
            className="ml-auto text-sm text-[var(--ink-muted)] underline-offset-2 hover:text-[var(--danger)] hover:underline disabled:opacity-40"
          >
            Supprimer
          </button>
        </div>
      ) : row.textEn ? (
        <p className="mt-2 text-sm text-[var(--ink-muted)]">{row.textEn}</p>
      ) : null}
    </li>
  );
}