'use client';

import { useEffect, useState } from 'react';
import type { WidgetProps } from '../widget-registry';
import { CLOCK_DATE_FACTOR, resolveClockTimeFontSizePt } from './clock-font-size';

/**
 * Digital clock widget displaying time in a configurable timezone.
 * Uses Intl.DateTimeFormat — never computes UTC offsets manually (RESEARCH).
 *
 * Config:
 * - timezone: IANA timezone string (default 'Europe/Berlin')
 * - showDate: boolean (default false) — show date below time
 * - timeFontSizePt: number | null (quick-260916-bwo) — feste Schriftgroesse der
 *   Uhrzeit in Punkt; leer/null = automatisch ueber Container-Queries mit der
 *   Kachelgroesse. Grenzen 8..200 in `clock-font-size.ts` (T-BWO-01).
 */
export function ClockWidget({ config }: WidgetProps) {
  const timezone = (config.timezone as string) || 'Europe/Berlin';
  const showDate = config.showDate === true;
  const fixedPt = resolveClockTimeFontSizePt(config);

  const [now, setNow] = useState(() => new Date());

  useEffect(() => {
    const timer = setInterval(() => {
      setNow(new Date());
    }, 1000);
    return () => clearInterval(timer);
  }, []);

  const timeFormatter = new Intl.DateTimeFormat('de-DE', {
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    timeZone: timezone,
  });

  const dateFormatter = new Intl.DateTimeFormat('de-DE', {
    day: '2-digit',
    month: 'long',
    year: 'numeric',
    timeZone: timezone,
  });

  return (
    <div className="flex h-full flex-col items-center justify-center gap-1 p-1">
      {/* Automatisch = CSS (Container-Query-Klasse, skaliert mit der Kachel),
          fest = Zahl als Inline-Style in pt. Die Trennung ist bewusst: jsdom
          verwirft clamp() im Inline-Style, der Browser bekommt die Klasse
          ohnehin — und "auto = Klasse, fest = Zahl" ist die einfachere Form. */}
      <time
        data-font-mode={fixedPt === null ? 'auto' : 'fixed'}
        className="font-semibold tabular-nums leading-none text-foreground text-[clamp(12px,min(20cqw,50cqh),400px)]"
        style={fixedPt === null ? undefined : { fontSize: `${fixedPt}pt` }}
        dateTime={now.toISOString()}
      >
        {timeFormatter.format(now)}
      </time>
      {showDate && (
        <span
          data-testid="clock-date"
          className="text-muted-foreground text-[clamp(10px,min(8cqw,20cqh),160px)]"
          style={fixedPt === null ? undefined : { fontSize: `${fixedPt * CLOCK_DATE_FACTOR}pt` }}
        >
          {dateFormatter.format(now)}
        </span>
      )}
    </div>
  );
}