'use client';

import { Copy, History, Trash2 } from 'lucide-react';
import { useEffect, useRef, useState } from 'react';
import { cn } from '@/lib/utils';
import type { DraftSummary } from '@/lib/db/draft-repo';

/**
 * Eine Zeile in der Drafts/Recent-Liste.
 *
 * UX-Details:
 *  - Active-Indicator als 3px linke Akzent-Border in Workspace-Farbe (sichtbares "wo bin ich").
 *  - Hover bringt drei Mini-Actions ein (Versionen / Duplizieren / Löschen).
 *  - Pulse-on-Update: wenn `updatedAt` sich ändert (Auto-Save), bekommt das Item für ~700ms
 *    einen grünen linken Pulse — visuelles Feedback "dein Tippen ist angekommen".
 *  - Hat-Output-Indikator (grüner Punkt) zeigt, ob bereits eine Mail generiert wurde.
 */
export function DraftItem({
  draft,
  active,
  showBrandBadge = false,
  onSelect,
  onOpenVersions,
  onDuplicate,
  onDelete,
}: {
  draft: DraftSummary;
  active: boolean;
  showBrandBadge?: boolean;
  onSelect: (id: string) => void;
  onOpenVersions: (id: string) => void;
  onDuplicate: (id: string) => void;
  onDelete: (id: string) => void;
}) {
  // Pulse-on-Update — wir vergleichen die letzte gesehene updatedAt mit der aktuellen.
  // Beim ersten Render NICHT pulsen (sonst pulst alles beim initialen Mount).
  const prevUpdatedRef = useRef<string | null>(null);
  const [pulse, setPulse] = useState(false);
  useEffect(() => {
    const stamp = String(draft.updatedAt);
    if (prevUpdatedRef.current !== null && prevUpdatedRef.current !== stamp) {
      setPulse(true);
      const t = setTimeout(() => setPulse(false), 700);
      return () => clearTimeout(t);
    }
    prevUpdatedRef.current = stamp;
  }, [draft.updatedAt]);

  const updatedRel = formatRelative(new Date(draft.updatedAt));
  return (
    <div
      data-active={active}
      className={cn(
        'group relative flex items-center gap-2 px-3 py-1.5 text-xs cursor-pointer',
        'transition-colors duration-500',
        // Pulse: kurzer Background-Flash auf Update — 600ms transition zurück sieht aus wie Pulse,
        // ohne von @keyframes abhängig zu sein (das Tailwind-4/Turbopack-CSS-Issue umgehend).
        pulse
          ? 'bg-emerald-100 dark:bg-emerald-900/40'
          : active
            ? 'bg-zinc-100 dark:bg-zinc-900'
            : 'hover:bg-zinc-100 dark:hover:bg-zinc-900',
      )}
      onClick={() => onSelect(draft.id)}
    >
      {/* Aktiv-Indikator: linke Akzent-Border in Workspace-Farbe */}
      <span
        aria-hidden
        className={cn(
          'absolute left-0 top-1 bottom-1 w-[3px] rounded-r transition-opacity',
          active ? 'opacity-100' : 'opacity-0',
        )}
        style={{ backgroundColor: draft.brandPrimaryColor }}
      />
      {showBrandBadge && (
        <span
          aria-hidden
          className="h-2 w-2 shrink-0 rounded-full"
          style={{ backgroundColor: draft.brandPrimaryColor }}
          title={draft.brandName}
        />
      )}
      <div className="min-w-0 flex-1">
        <div className="truncate font-medium text-zinc-800 dark:text-zinc-200">
          {draft.name || 'Unbenannter Entwurf'}
          {draft.hasOutput && (
            <span className="ml-1.5 inline-block h-1.5 w-1.5 rounded-full bg-emerald-500" title="Mail bereits generiert" />
          )}
        </div>
        <div className="truncate text-[10px] text-zinc-500 dark:text-zinc-500">
          {updatedRel}
        </div>
      </div>
      <div className="flex items-center gap-0.5 opacity-0 transition-opacity duration-150 group-hover:opacity-100 focus-within:opacity-100">
        <ActionBtn label="Versionen" onClick={(e) => { e.stopPropagation(); onOpenVersions(draft.id); }}>
          <History className="h-3.5 w-3.5" />
        </ActionBtn>
        <ActionBtn label="Duplizieren" onClick={(e) => { e.stopPropagation(); onDuplicate(draft.id); }}>
          <Copy className="h-3.5 w-3.5" />
        </ActionBtn>
        <ActionBtn label="Löschen" danger onClick={(e) => {
          e.stopPropagation();
          onDelete(draft.id);
        }}>
          <Trash2 className="h-3.5 w-3.5" />
        </ActionBtn>
      </div>
    </div>
  );
}

function ActionBtn({
  label,
  onClick,
  danger = false,
  children,
}: {
  label: string;
  onClick: (e: React.MouseEvent) => void;
  danger?: boolean;
  children: React.ReactNode;
}) {
  return (
    <button
      type="button"
      title={label}
      onClick={onClick}
      className={cn(
        'flex h-6 w-6 items-center justify-center rounded text-zinc-500 transition-colors',
        danger
          ? 'hover:bg-red-100 hover:text-red-600 dark:hover:bg-red-950/40 dark:hover:text-red-400'
          : 'hover:bg-zinc-200 hover:text-zinc-900 dark:hover:bg-zinc-800 dark:hover:text-zinc-100',
      )}
    >
      {children}
    </button>
  );
}

function formatRelative(d: Date): string {
  const ms = Date.now() - d.getTime();
  const s = Math.floor(ms / 1000);
  if (s < 60) return 'gerade eben';
  const m = Math.floor(s / 60);
  if (m < 60) return `vor ${m}min`;
  const h = Math.floor(m / 60);
  if (h < 24) return `vor ${h}h`;
  const days = Math.floor(h / 24);
  if (days < 7) return `vor ${days}d`;
  return d.toLocaleDateString('de-DE');
}
