'use client';

import { useState } from 'react';

/**
 * The panel, at a readable size.
 *
 * Rendered by the same code path that serves the device, so this is not an
 * impression of the screen: it is the screen.
 *
 * With `timeTravel`, it also answers the question the shop actually asks
 * before a holiday — "what will the window say while I'm away?" — without
 * waiting until someone is standing in front of a locked door to find out.
 */
export default function ScreenPreview({
  className = '',
  timeTravel = false,
}: {
  className?: string;
  timeTravel?: boolean;
}) {
  const [at, setAt] = useState('');
  const [nonce, setNonce] = useState(() => Date.now());

  const source = at
    ? `/api/admin/preview?at=${encodeURIComponent(at)}&t=${nonce}`
    : `/api/admin/preview?t=${nonce}`;

  function jumpTo(date: Date) {
    setAt(toLocalInput(date));
    setNonce(Date.now());
  }

  return (
    <figure className={className}>
      <div className="overflow-hidden rounded-[var(--radius-md)] border border-[var(--line-strong)] bg-white">
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img
          key={source}
          src={source}
          alt={
            at
              ? `Aperçu de l’écran tel qu’il sera le ${at.replace('T', ' à ')}`
              : 'Aperçu de l’écran de la vitrine'
          }
          width={800}
          height={480}
          className="block h-auto w-full"
        />
      </div>

      {timeTravel ? (
        <div className="mt-3 flex flex-wrap items-end gap-x-3 gap-y-2">
          <label className="text-sm">
            <span className="block text-[var(--ink-muted)]">Afficher l’écran au</span>
            <input
              type="datetime-local"
              value={at}
              onChange={(event) => {
                setAt(event.target.value);
                setNonce(Date.now());
              }}
              className="mt-1 rounded-[var(--radius-sm)] border border-[var(--line-strong)] bg-[var(--surface)] px-2 py-1.5 text-base"
            />
          </label>

          <div className="flex flex-wrap gap-2 text-sm">
            <Jump label="Demain 10:00" onClick={() => jumpTo(tomorrowAt(10))} />
            <Jump label="Samedi 10:00" onClick={() => jumpTo(nextWeekdayAt(6, 10))} />
            <Jump label="Dans 1 mois" onClick={() => jumpTo(inDays(30, 10))} />
            {at ? (
              <button
                type="button"
                onClick={() => {
                  setAt('');
                  setNonce(Date.now());
                }}
                className="rounded-[var(--radius-sm)] border border-[var(--accent)] px-3 py-1.5 text-[var(--accent-ink)] hover:bg-[var(--accent-tint)]"
              >
                Revenir à maintenant
              </button>
            ) : null}
          </div>
        </div>
      ) : null}

      <figcaption className="mt-2 flex flex-wrap items-center gap-3 text-xs text-[var(--ink-muted)]">
        <span>
          {at
            ? 'Projection : l’écran tel qu’il sera à cette date, avec les horaires et fermetures enregistrés.'
            : '800 × 480, noir et blanc — rendu réellement envoyé à l’écran.'}
        </span>
        <button
          type="button"
          onClick={() => setNonce(Date.now())}
          className="underline-offset-2 hover:underline"
        >
          Rafraîchir
        </button>
      </figcaption>
    </figure>
  );
}

function Jump({ label, onClick }: { label: string; onClick: () => void }) {
  return (
    <button
      type="button"
      onClick={onClick}
      className="rounded-[var(--radius-sm)] border border-[var(--line-strong)] px-3 py-1.5 hover:bg-[var(--surface-muted)]"
    >
      {label}
    </button>
  );
}

/** `datetime-local` speaks local wall-clock time with no zone, so build one. */
function toLocalInput(date: Date): string {
  const pad = (value: number) => value.toString().padStart(2, '0');
  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(
    date.getHours(),
  )}:${pad(date.getMinutes())}`;
}

function tomorrowAt(hour: number): Date {
  return inDays(1, hour);
}

function inDays(days: number, hour: number): Date {
  const date = new Date();
  date.setDate(date.getDate() + days);
  date.setHours(hour, 0, 0, 0);
  return date;
}

/** The next occurrence of a weekday, 0 = Sunday. */
function nextWeekdayAt(weekday: number, hour: number): Date {
  const date = new Date();
  const ahead = (weekday - date.getDay() + 7) % 7 || 7;
  return inDays(ahead, hour);
}