'use client';

import { WidgetIcon } from './widget-icon';
import { type FormEvent, useEffect, useMemo, useRef, useState } from 'react';
import { useTranslations } from 'next-intl';
import { updateWidgetConfig } from '@/lib/dashboard-api';
import {
  FavoriteRequestError,
  createFavorite,
  deleteFavorite,
  fetchFavorites,
  removeFavoriteIcon,
  reorderFavorites,
  updateFavorite,
  uploadFavoriteIcon,
  type FavoriteLink,
} from '@/lib/favorites-api';
import type { WidgetProps } from '@/components/dashboard/widget-registry';

// quick-260916-iex: wie DEBOUNCE_MS im Notiz-Widget
const TITLE_DEBOUNCE_MS = 1500;

/**
 * Bildet einen Fehler aus dem Favoriten-Klienten auf einen Uebersetzungs-
 * schluessel ab (260923-lrr): `FavoriteRequestError` traegt den passenden
 * Grund (`iconTooLarge`/`iconInvalidType`/
 * `iconUploadFailed`) bereits als `reason`, jeder andere Fehler faellt auf
 * die bisherige allgemeine Meldung zurueck.
 */
function favoriteErrorKey(err: unknown): string {
  if (err instanceof FavoriteRequestError) return `favorites.${err.reason}`;
  return 'favorites.error';
}

/**
 * FavoritesWidget — persistent per-widget list of favorite links (DASH-09).
 *
 * Features:
 * - Loads favorites scoped to this widget instance via instanceId (Pitfall 3)
 * - Add / edit / delete in edit mode with inline forms
 * - List view (default, D-03) and grid view switchable in edit mode
 * - Server-side icon discovery (letter fallback when iconUrl is null)
 * - Links open in new tab with rel="noreferrer" (T-08-08 open-redirect mitigation)
 * - No dangerouslySetInnerHTML (T-08-07 XSS mitigation)
 * - Optionaler Titel (quick-260916-iex): leer -> keine Kopfzeile, sonst
 *   Kopfzeile im Notiz-Look; im Bearbeitungsmodus immer ein Titelfeld,
 *   entprellt gespeichert (Muster note-widget.tsx)
 * - Symbol-Ersatzweg (260917-jdd): FavoriteIcon versucht zuerst den Server-
 *   Proxy, bei Fehler den Browser direkt (`onError`-Kette), zuletzt den
 *   Buchstaben-Platzhalter
 * - Sortierung per Pfeilen im Bearbeitungsmodus (260917-jdd): optimistisch,
 *   persistiert ueber PUT /favorites/order
 */
export function FavoritesWidget({
  instanceId,
  config,
  isEditMode,
}: WidgetProps) {
  const t = useTranslations('widgets');

  const [favorites, setFavorites] = useState<FavoriteLink[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  // View mode: read from config, default 'list' (D-03)
  const [viewMode, setViewMode] = useState<'list' | 'grid'>(
    (config.viewMode as 'list' | 'grid') ?? 'list',
  );

  // Optionaler Titel (quick-260916-iex)
  const [title, setTitle] = useState<string>(
    typeof config.title === 'string' ? config.title : '',
  );
  const titleTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(
    undefined,
  );

  useEffect(() => {
    return () => clearTimeout(titleTimerRef.current);
  }, []);

  function handleTitleChange(e: React.ChangeEvent<HTMLInputElement>) {
    const value = e.target.value;
    setTitle(value);
    clearTimeout(titleTimerRef.current);
    titleTimerRef.current = setTimeout(() => {
      void updateWidgetConfig(instanceId, { title: value });
    }, TITLE_DEBOUNCE_MS);
  }

  const hasTitle = title.trim() !== '';
  const showHeader = isEditMode || hasTitle;

  // Add-form state
  const [newTitle, setNewTitle] = useState('');
  const [newUrl, setNewUrl] = useState('');
  const [newIconUrl, setNewIconUrl] = useState('');
  // 260923-lrr: gewaehlte Datei fuer das Hinzufuegen-Formular; der Ref setzt
  // das native Datei-Feld nach dem Anlegen zurueck (unkontrolliertes Feld).
  const [newIconFile, setNewIconFile] = useState<File | null>(null);
  const newIconFileInputRef = useRef<HTMLInputElement>(null);

  // Inline edit state
  const [editingId, setEditingId] = useState<string | null>(null);
  const [editTitle, setEditTitle] = useState('');
  const [editUrl, setEditUrl] = useState('');
  const [editIconUrl, setEditIconUrl] = useState('');
  // 260923-lrr: gewaehlte Datei, Fehlermeldung und Sperre des Bearbeitungs-
  // formulars — eigenes Symbol hochladen/entfernen.
  const [editIconFile, setEditIconFile] = useState<File | null>(null);
  const [editError, setEditError] = useState<string | null>(null);
  const [editBusy, setEditBusy] = useState(false);

  // Sorted favorites: position asc, then title asc
  const sortedFavorites = useMemo(
    () =>
      [...favorites].sort((a, b) => {
        if (a.position !== b.position) return a.position - b.position;
        return a.title.localeCompare(b.title);
      }),
    [favorites],
  );

  // Befund 14 (quick-260921-gof): Ersatztext vor dem Effekt bestimmt, `t`
  // selbst bleibt aussen vor — die Testattrappe liefert bei jedem Durchlauf
  // eine frische Funktion, das wuerde den Mount-Abruf zur Schleife machen.
  const favoritesErrorText = t('favorites.error');

  useEffect(() => {
    let cancelled = false;

    async function load() {
      setLoading(true);
      setError(null);
      try {
        const data = await fetchFavorites(instanceId);
        if (!cancelled) setFavorites(data);
      } catch {
        if (!cancelled) setError(favoritesErrorText);
      } finally {
        if (!cancelled) setLoading(false);
      }
    }

    void load();

    return () => {
      cancelled = true;
    };
  }, [instanceId, favoritesErrorText]);

  function getFallbackLetter(title: string): string {
    const clean = title.trim();
    return clean ? clean.slice(0, 1).toUpperCase() : '?';
  }

  // --- View mode toggle (edit mode only, D-03) ---
  function handleViewMode(next: 'list' | 'grid') {
    setViewMode(next);
    void updateWidgetConfig(instanceId, { viewMode: next });
  }

  // --- Sortierung per Pfeilen (260917-jdd) ---
  async function handleMove(id: string, direction: 'up' | 'down') {
    const order = sortedFavorites.map((f) => f.id);
    const index = order.indexOf(id);
    const target = direction === 'up' ? index - 1 : index + 1;

    if (index < 0 || target < 0 || target >= order.length) return;

    [order[index], order[target]] = [order[target], order[index]];

    const byId = new Map(favorites.map((f) => [f.id, f]));
    const reindexed = order.map((fid, i) => ({ ...byId.get(fid)!, position: i }));

    setFavorites(reindexed);
    setError(null);

    try {
      setFavorites(await reorderFavorites(instanceId, order));
    } catch {
      setError(t('favorites.error'));
      try {
        setFavorites(await fetchFavorites(instanceId));
      } catch {
        // Fehlermeldung steht bereits
      }
    }
  }

  // --- Add favorite ---
  // 260923-lrr: nach createFavorite wird — falls im Hinzufuegen-Formular
  // eine Datei gewaehlt wurde — diese fuer die neue Kennung hochgeladen;
  // scheitert nur der Upload, bleibt der Favorit angelegt (mit der Zeile aus
  // createFavorite) und die Meldung erscheint ueber dem Formular.
  async function handleAdd(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const cleanTitle = newTitle.trim();
    const cleanUrl = newUrl.trim();
    const cleanIconUrl = newIconUrl.trim();

    if (!cleanTitle || !cleanUrl) return;

    try {
      const created = await createFavorite({
        widgetId: instanceId,
        title: cleanTitle,
        url: cleanUrl,
        iconUrl: cleanIconUrl || undefined,
      });

      let finalFavorite = created;
      if (newIconFile) {
        try {
          finalFavorite = await uploadFavoriteIcon(created.id, newIconFile);
        } catch (err) {
          setError(t(favoriteErrorKey(err)));
        }
      }

      setFavorites((prev) => [...prev, finalFavorite]);
      setNewTitle('');
      setNewUrl('');
      setNewIconUrl('');
      setNewIconFile(null);
      if (newIconFileInputRef.current) newIconFileInputRef.current.value = '';
    } catch (err) {
      setError(t(favoriteErrorKey(err)));
    }
  }

  // --- Edit favorite ---
  function startEdit(fav: FavoriteLink) {
    setEditingId(fav.id);
    setEditTitle(fav.title);
    setEditUrl(fav.url);
    setEditIconUrl(fav.iconUrl ?? '');
    setEditIconFile(null);
    setEditError(null);
    setEditBusy(false);
    setError(null);
  }

  function cancelEdit() {
    setEditingId(null);
    setEditTitle('');
    setEditUrl('');
    setEditIconUrl('');
    setEditIconFile(null);
    setEditError(null);
    setEditBusy(false);
  }

  // 260923-lrr: erst PATCH (Titel/URL/Logo-Adresse), danach — falls eine
  // Datei gewaehlt wurde — der Upload. Scheitert `updateFavorite`, bleibt
  // die Zeile unveraendert und das Formular offen (z. B. 422 bei einer
  // nicht abrufbaren Logo-Adresse). Scheitert NUR der Upload, wird die
  // bereits aktualisierte Zeile trotzdem uebernommen, das Formular bleibt
  // ebenfalls offen, damit der Hinweis sichtbar ist.
  async function handleSaveEdit(id: string) {
    const cleanTitle = editTitle.trim();
    const cleanUrl = editUrl.trim();
    const cleanIconUrl = editIconUrl.trim();

    if (!cleanTitle || !cleanUrl) return;

    setEditBusy(true);
    setEditError(null);
    try {
      const updated = await updateFavorite(id, {
        title: cleanTitle,
        url: cleanUrl,
        iconUrl: cleanIconUrl || null,
      });

      if (editIconFile) {
        try {
          const withIcon = await uploadFavoriteIcon(id, editIconFile);
          setFavorites((prev) => prev.map((f) => (f.id === id ? withIcon : f)));
          cancelEdit();
          return;
        } catch (err) {
          setFavorites((prev) => prev.map((f) => (f.id === id ? updated : f)));
          setEditError(t(favoriteErrorKey(err)));
          return;
        }
      }

      setFavorites((prev) => prev.map((f) => (f.id === id ? updated : f)));
      cancelEdit();
    } catch (err) {
      setEditError(t(favoriteErrorKey(err)));
    } finally {
      setEditBusy(false);
    }
  }

  // --- Eigenes Symbol entfernen (260923-lrr) ---
  // Wirkt sofort (wie Loeschen einer Zeile), das Formular bleibt offen.
  async function handleRemoveIcon(id: string) {
    try {
      const updated = await removeFavoriteIcon(id);
      setFavorites((prev) => prev.map((f) => (f.id === id ? updated : f)));
    } catch (err) {
      setEditError(t(favoriteErrorKey(err)));
    }
  }

  // --- Delete favorite ---
  async function handleDelete(id: string) {
    try {
      await deleteFavorite(id);
      setFavorites((prev) => prev.filter((f) => f.id !== id));
      if (editingId === id) cancelEdit();
    } catch {
      setError(t('favorites.error'));
    }
  }

  // --- Render ---
  return (
    <div className="flex h-full flex-col overflow-hidden">
      {/* Header: optional title (quick-260916-iex) — mirrors note-widget.tsx look */}
      {showHeader && (
        <div className="widget-head">
          <WidgetIcon type="favorites" />
          {isEditMode ? (
            <input
              type="text"
              className="flex-1 bg-transparent text-sm font-semibold text-foreground outline-none placeholder:text-muted-foreground widgetNoDrag"
              value={title}
              onChange={handleTitleChange}
              placeholder={t('favorites.titlePlaceholder')}
              aria-label={t('favorites.titleLabel')}
            />
          ) : (
            hasTitle && (
              <h2 className="truncate text-sm font-semibold text-foreground">
                {title.trim()}
              </h2>
            )
          )}
        </div>
      )}

      <div className={`flex flex-1 flex-col gap-2 overflow-auto px-2 pb-2 ${showHeader ? '' : 'pt-2'}`}>
      {/* View mode toggle (edit mode only) */}
      {isEditMode && (
        // role="toolbar" (D-03): die bisherige Beschriftung ("Favoriten")
        // war sachlich falsch fuer einen Umschalter zwischen Listen- und
        // Kachelansicht — hier greift D-03 im Sinn des Streichens (die
        // Beschriftung trug keine echte Bedeutung), eine richtige
        // Beschriftung ist trotzdem besser als gar keine.
        <div
          className="flex gap-1 widgetNoDrag"
          role="toolbar"
          aria-label={t('favorites.viewModeLabel')}
        >
          <button
            type="button"
            onClick={() => handleViewMode('list')}
            className={`px-2 py-1 text-xs rounded ${
              viewMode === 'list'
                ? 'bg-foreground text-background'
                : 'bg-muted text-muted-foreground hover:text-foreground'
            }`}
          >
            {t('favorites.listView')}
          </button>
          <button
            type="button"
            onClick={() => handleViewMode('grid')}
            className={`px-2 py-1 text-xs rounded ${
              viewMode === 'grid'
                ? 'bg-foreground text-background'
                : 'bg-muted text-muted-foreground hover:text-foreground'
            }`}
          >
            {t('favorites.gridView')}
          </button>
        </div>
      )}

      {/* Status messages */}
      {loading && (
        <p className="text-xs text-muted-foreground">{t('favorites.loading')}</p>
      )}
      {error && (
        <p className="text-xs text-destructive">{error}</p>
      )}

      {/* Favorites list / grid */}
      {!loading && sortedFavorites.length === 0 && (
        <p className="text-xs text-muted-foreground">{t('favorites.empty')}</p>
      )}

      {!loading && sortedFavorites.length > 0 && (
        viewMode === 'grid' ? (
          <div
            data-testid="favorites-grid"
            className="grid grid-cols-[repeat(auto-fill,minmax(76px,1fr))] gap-1"
          >
            {sortedFavorites.map((fav, index) => (
              <FavoriteTile
                launcher
                key={fav.id}
                fav={fav}
                isEditMode={isEditMode}
                editingId={editingId}
                editTitle={editTitle}
                editUrl={editUrl}
                editIconUrl={editIconUrl}
                editError={editError}
                editBusy={editBusy}
                getFallbackLetter={getFallbackLetter}
                onStartEdit={startEdit}
                onCancelEdit={cancelEdit}
                onSaveEdit={handleSaveEdit}
                onDelete={handleDelete}
                onEditTitleChange={setEditTitle}
                onEditUrlChange={setEditUrl}
                onEditIconUrlChange={setEditIconUrl}
                onEditIconFileChange={setEditIconFile}
                onRemoveIcon={handleRemoveIcon}
                canMoveUp={index > 0}
                canMoveDown={index < sortedFavorites.length - 1}
                onMove={(fid, dir) => void handleMove(fid, dir)}
                t={t}
              />
            ))}
          </div>
        ) : (
          <div
            data-testid="favorites-list"
            className="flex flex-col gap-0.5"
          >
            {sortedFavorites.map((fav, index) => (
              <FavoriteTile
                key={fav.id}
                fav={fav}
                isEditMode={isEditMode}
                editingId={editingId}
                editTitle={editTitle}
                editUrl={editUrl}
                editIconUrl={editIconUrl}
                editError={editError}
                editBusy={editBusy}
                getFallbackLetter={getFallbackLetter}
                onStartEdit={startEdit}
                onCancelEdit={cancelEdit}
                onSaveEdit={handleSaveEdit}
                onDelete={handleDelete}
                onEditTitleChange={setEditTitle}
                onEditUrlChange={setEditUrl}
                onEditIconUrlChange={setEditIconUrl}
                onEditIconFileChange={setEditIconFile}
                onRemoveIcon={handleRemoveIcon}
                canMoveUp={index > 0}
                canMoveDown={index < sortedFavorites.length - 1}
                onMove={(fid, dir) => void handleMove(fid, dir)}
                t={t}
              />
            ))}
          </div>
        )
      )}

      {/* Add form (edit mode only, D-04) */}
      {isEditMode && (
        <form
          onSubmit={(e) => void handleAdd(e)}
          className="flex flex-col gap-1 pt-1 border-t border-border widgetNoDrag"
        >
          <input
            className="w-full rounded border border-input bg-background px-2 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-ring"
            value={newTitle}
            onChange={(e) => setNewTitle(e.target.value)}
            placeholder={t('favorites.addTitle')}
          />
          <input
            className="w-full rounded border border-input bg-background px-2 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-ring"
            value={newUrl}
            onChange={(e) => setNewUrl(e.target.value)}
            placeholder={t('favorites.addUrl')}
          />
          {/* 260923-lrr: eigenes Symbol beim Hinzufuegen */}
          <label className="text-xs text-muted-foreground">
            {t('favorites.iconUploadLabel')}
            <input
              type="file"
              data-testid="favorite-add-icon-upload"
              ref={newIconFileInputRef}
              accept="image/png,image/jpeg,image/gif,image/webp,image/x-icon,image/vnd.microsoft.icon,image/svg+xml,.ico,.svg"
              className="mt-0.5 block w-full text-xs"
              onChange={(e) => setNewIconFile(e.target.files?.[0] ?? null)}
            />
          </label>
          <button
            type="submit"
            className="w-full rounded bg-primary px-2 py-1 text-xs text-primary-foreground hover:opacity-90 transition-opacity"
          >
            {t('favorites.addButton')}
          </button>
        </form>
      )}
      </div>
    </div>
  );
}

// --- Symbol-Ersatzweg (260917-jdd) ---

/**
 * Leitet aus einer Favoriten-URL das direkte Browser-Favicon ab
 * (`{origin}/favicon.ico`) — nur fuer http:/https:, sonst null (kein
 * javascript:/data:, T-JDD-04). Wird ausschliesslich als Stufe 2 des
 * Ersatzwegs genutzt (siehe FavoriteIcon).
 */
function getDirectFaviconSrc(url: string): string | null {
  try {
    const u = new URL(url);
    if (u.protocol !== 'http:' && u.protocol !== 'https:') return null;
    return `${u.origin}/favicon.ico`;
  } catch {
    return null;
  }
}

/**
 * Direkt-ladbare Adressen fuer Stufe 2 des Ersatzwegs (260929-lh3): erst die
 * gespeicherte `iconUrl`, dann das Origin-Favicon der Favoriten-URL; nur
 * http:/https: (kein javascript:/data:, T-JDD-04), ohne Doppelte.
 */
function getDirectCandidates(iconUrl: string | null, url: string): string[] {
  const candidates: string[] = [];
  if (iconUrl) {
    try {
      const u = new URL(iconUrl);
      if (u.protocol === 'http:' || u.protocol === 'https:') candidates.push(u.toString());
    } catch {
      // ungueltige Adresse: uebersprungen
    }
  }
  const origin = getDirectFaviconSrc(url);
  if (origin && !candidates.includes(origin)) candidates.push(origin);
  return candidates;
}

/**
 * FavoriteIcon — Symbol-Ersatzweg (260917-jdd, erweitert 260929-lh3):
 *
 * 1. `proxy` — Server-Proxy (GET /favorites/:id/icon), der seit diesem Plan
 *    auch bei Zertifikatsfehlern des Zielhosts liefert (undici-Dispatcher).
 * 2. `direct` — Direktbilder aus dem Browser des Nutzers
 *    (`referrerPolicy="no-referrer"`, nur http/https), nacheinander:
 *    zuerst die gespeicherte `iconUrl` (ausdrueckliche Symbol-Adresse oder
 *    erkannter Verweis — Server wie docuvita geben dem Server 404/HTML, dem
 *    Browser aber das Bild), dann `{origin}/favicon.ico` (entfaellt, wenn
 *    identisch). Erreicht auch interne Hosts, die der SSRF-Schutz des
 *    Servers absichtlich ablehnt.
 * 3. `none` — der Buchstaben-Platzhalter liegt IMMER darunter.
 *
 * Bewusst KEIN Drittanbieter-Favicon-Dienst: der wuerde Hostnamen nach
 * aussen geben und interne Hosts ohnehin nicht kennen.
 *
 * Befund am Code: `discoverFavoriteIconUrl` liefert NIE null, sondern bei
 * jedem Fehler den Origin-Rueckfall — die Stufe `direct` haengt deshalb an
 * `onError` des Proxy-Bildes UND an `iconUrl === null`, nicht nur an
 * letzterem.
 *
 * Grenzen: ein http-Favorit auf einem https-Tessera ist Mischinhalt
 * (Browser blockiert ihn); ein selbstsigniertes Zertifikat ohne Vertrauen
 * im Browser des Nutzers klappt auch ueber Stufe 2 nicht.
 *
 * 260923-lrr: die Proxy-Adresse traegt jetzt `?v=<iconVersion>` — der
 * bisherige 24-Stunden-Zwischenspeicher des Browsers (`Cache-Control` am
 * Controller) aenderte sich bei einer neuen Logo-Adresse oder einem neuen
 * hochgeladenen Symbol NIE, weil die Adresse selbst gleich blieb. Der
 * Remount-Key an der Aufrufstelle (`FavoriteTile`) enthaelt `iconVersion`
 * und `uploadedIconMime` zusaetzlich zu `iconUrl`/`url`, damit nach einer
 * Aenderung wieder mit Stufe `proxy` begonnen wird — ein hochgeladenes
 * Symbol hat serverseitig bereits Vorrang (`getIconBytes`), die Kachel
 * zeigt es also auch ohne gesetzte `iconUrl`.
 */
function FavoriteIcon({
  fav,
  getFallbackLetter,
  large = false,
}: {
  fav: FavoriteLink;
  getFallbackLetter: (title: string) => string;
  /** Kachelansicht: 40-px-Feld mit 24-px-Symbol, sonst 24-px-Feld mit 16-px-Symbol. */
  large?: boolean;
}) {
  const box = large ? 'h-10 w-10 rounded-lg' : 'h-6 w-6 rounded-md';
  const img = large ? 'h-6 w-6' : 'h-4 w-4';
  const px = large ? 24 : 16;
  const hasServerIcon = Boolean(fav.iconUrl) || Boolean(fav.uploadedIconMime);
  const proxySrc = hasServerIcon
    ? `/api-proxy/favorites/${encodeURIComponent(fav.id)}/icon?v=${fav.iconVersion ?? 0}`
    : null;
  // 260929-lh3: Direkt-Kandidaten in Reihenfolge — gespeicherte Adresse zuerst,
  // dann das Origin-Favicon; nur http/https, ohne Doppelte.
  const directSrcs = getDirectCandidates(fav.iconUrl, fav.url);
  // 'proxy' | Index in directSrcs | Ende der Kette (Buchstabe).
  const [stage, setStage] = useState<'proxy' | number>(proxySrc ? 'proxy' : 0);
  const directSrc = typeof stage === 'number' ? (directSrcs[stage] ?? null) : null;

  return (
    <div className={`relative flex shrink-0 items-center justify-center bg-muted ${box}`}>
      <span
        data-testid={`letter-fallback-${fav.id}`}
        className={`absolute inset-0 flex items-center justify-center font-semibold text-muted-foreground ${large ? 'text-base' : 'text-xs'}`}
      >
        {getFallbackLetter(fav.title)}
      </span>
      {stage === 'proxy' && proxySrc && (
        <img
          data-testid={`icon-proxy-${fav.id}`}
          src={proxySrc}
          alt=""
          aria-hidden="true"
          width={px}
          height={px}
          loading="lazy"
          className={`relative rounded-sm ${img}`}
          onError={() => setStage(0)}
        />
      )}
      {directSrc && (
        <img
          data-testid={`icon-direct-${fav.id}`}
          src={directSrc}
          alt=""
          aria-hidden="true"
          width={px}
          height={px}
          loading="lazy"
          referrerPolicy="no-referrer"
          className={`relative rounded-sm ${img}`}
          onError={() => setStage((prev) => (typeof prev === 'number' ? prev + 1 : 0))}
        />
      )}
    </div>
  );
}

// --- FavoriteTile sub-component ---

type FavoriteTileProps = {
  fav: FavoriteLink;
  isEditMode: boolean;
  editingId: string | null;
  editTitle: string;
  editUrl: string;
  editIconUrl: string;
  /** 260923-lrr — Fehlermeldung/Sperre des Bearbeitungsformulars (eigenes Symbol). */
  editError: string | null;
  editBusy: boolean;
  getFallbackLetter: (title: string) => string;
  onStartEdit: (fav: FavoriteLink) => void;
  onCancelEdit: () => void;
  onSaveEdit: (id: string) => Promise<void>;
  onDelete: (id: string) => Promise<void>;
  onEditTitleChange: (v: string) => void;
  onEditUrlChange: (v: string) => void;
  onEditIconUrlChange: (v: string) => void;
  /** 260923-lrr — gewaehlte Datei im Bearbeitungsformular. */
  onEditIconFileChange: (file: File | null) => void;
  /** 260923-lrr — „Hochgeladenes Symbol entfernen“. */
  onRemoveIcon: (id: string) => Promise<void>;
  canMoveUp: boolean;
  canMoveDown: boolean;
  onMove: (id: string, direction: 'up' | 'down') => void;
  t: (key: string) => string;
  /** Kachelansicht wie ein App-Starter (Symbol oben, Name darunter). */
  launcher?: boolean;
};

function FavoriteTile({
  fav,
  isEditMode,
  editingId,
  editTitle,
  editUrl,
  editIconUrl,
  editError,
  editBusy,
  getFallbackLetter,
  onStartEdit,
  onCancelEdit,
  onSaveEdit,
  onDelete,
  onEditTitleChange,
  onEditUrlChange,
  onEditIconUrlChange,
  onEditIconFileChange,
  onRemoveIcon,
  canMoveUp,
  canMoveDown,
  onMove,
  t,
  launcher = false,
}: FavoriteTileProps) {
  const isEditing = editingId === fav.id;

  return (
    <div className="flex flex-col">
      {/* Main link row */}
      <div className={launcher ? 'flex flex-col items-stretch gap-1' : 'flex items-center gap-2'}>
        {/* Anchor — opens in new tab, no server-side redirect (T-08-08) */}
        <a
          href={fav.url}
          target="_blank"
          rel="noreferrer"
          className={
            launcher
              ? 'flex min-w-0 flex-col items-center gap-1.5 rounded-lg px-1 py-2 text-center transition-colors hover:bg-muted widgetNoDrag'
              : 'flex h-9 min-w-0 flex-1 items-center gap-2.5 rounded-md px-1.5 transition-colors hover:bg-muted widgetNoDrag'
          }
          onClick={(e) => isEditMode && e.preventDefault()} // block navigation in edit mode
        >
          {/* Icon container with letter fallback (T-08-07 — no dangerouslySetInnerHTML) */}
          <FavoriteIcon
            key={`${fav.iconUrl ?? ''}|${fav.url}|${fav.iconVersion ?? 0}|${fav.uploadedIconMime ?? ''}`}
            fav={fav}
            getFallbackLetter={getFallbackLetter}
            large={launcher}
          />

          <span className={launcher ? 'line-clamp-2 w-full break-words text-xs leading-4' : 'truncate text-sm'}>
            {fav.title}
          </span>
        </a>

        {/* Action buttons (edit mode only, D-04) */}
        {isEditMode && !isEditing && (
          <div className="flex gap-1 flex-shrink-0 widgetNoDrag">
            {/* Sortierpfeile (260917-jdd) — kein Drag & Drop hier, das
                kollidiert mit dem Ziehen der Kachel in react-grid-layout */}
            <button
              type="button"
              aria-label={t('favorites.moveUpButton')}
              title={t('favorites.moveUpButton')}
              className="p-0.5 text-muted-foreground hover:text-foreground disabled:opacity-30 disabled:hover:text-muted-foreground"
              disabled={!canMoveUp}
              onClick={() => onMove(fav.id, 'up')}
            >
              <svg
                viewBox="0 0 24 24"
                width="14"
                height="14"
                fill="currentColor"
                aria-hidden="true"
              >
                <path d="M12 8.6 5.4 15.2l1.4 1.4L12 11.4l5.2 5.2 1.4-1.4z" />
              </svg>
            </button>
            <button
              type="button"
              aria-label={t('favorites.moveDownButton')}
              title={t('favorites.moveDownButton')}
              className="p-0.5 text-muted-foreground hover:text-foreground disabled:opacity-30 disabled:hover:text-muted-foreground"
              disabled={!canMoveDown}
              onClick={() => onMove(fav.id, 'down')}
            >
              <svg
                viewBox="0 0 24 24"
                width="14"
                height="14"
                fill="currentColor"
                aria-hidden="true"
              >
                <path d="m12 15.4 6.6-6.6-1.4-1.4L12 12.6 6.8 7.4 5.4 8.8z" />
              </svg>
            </button>
            <button
              type="button"
              aria-label={t('favorites.editButton')}
              title={t('favorites.editButton')}
              className="p-0.5 text-muted-foreground hover:text-foreground"
              onClick={() => onStartEdit(fav)}
            >
              <svg
                viewBox="0 0 24 24"
                width="14"
                height="14"
                fill="currentColor"
                aria-hidden="true"
              >
                <path d="M4 20h4.6L19.2 9.4a2.1 2.1 0 0 0 0-3l-1.6-1.6a2.1 2.1 0 0 0-3 0L4 15.4V20Zm2-2v-1.8L16.1 6.1l1.8 1.8L7.8 18H6Zm9.1-12.9 1.8-1.8 1.8 1.8-1.8 1.8-1.8-1.8Z" />
              </svg>
            </button>
            <button
              type="button"
              aria-label={t('favorites.deleteButton')}
              title={t('favorites.deleteButton')}
              className="p-0.5 text-muted-foreground hover:text-destructive"
              onClick={() => void onDelete(fav.id)}
            >
              <svg
                viewBox="0 0 24 24"
                width="14"
                height="14"
                fill="currentColor"
                aria-hidden="true"
              >
                <path d="M7 21c-.6 0-1.1-.2-1.5-.7A2 2 0 0 1 5 18.9V8H4V6h5V4h6v2h5v2h-1v10.9c0 .6-.2 1.1-.7 1.5-.4.4-.9.6-1.5.6H7ZM17 8H7v10.9l.1.1h9.8l.1-.1V8Zm-8 9h2v-7H9v7Zm4 0h2v-7h-2v7Z" />
              </svg>
            </button>
          </div>
        )}
      </div>

      {/* Inline edit form */}
      {isEditMode && isEditing && (
        <div className="flex flex-col gap-1 mt-1 pl-7 widgetNoDrag">
          <input
            className="w-full rounded border border-input bg-background px-2 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-ring"
            value={editTitle}
            onChange={(e) => onEditTitleChange(e.target.value)}
            placeholder={t('favorites.addTitle')}
          />
          <input
            className="w-full rounded border border-input bg-background px-2 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-ring"
            value={editUrl}
            onChange={(e) => onEditUrlChange(e.target.value)}
            placeholder={t('favorites.addUrl')}
          />
          <input
            className="w-full rounded border border-input bg-background px-2 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-ring"
            value={editIconUrl}
            onChange={(e) => onEditIconUrlChange(e.target.value)}
            placeholder={t('favorites.iconUrlPlaceholder')}
            aria-label={t('favorites.iconUrlPlaceholder')}
          />
          {/* 260923-lrr: eigenes Symbol — Datei-Feld, Hinweis, ggf. Entfernen-Knopf */}
          <label className="text-xs text-muted-foreground">
            {t('favorites.iconUploadLabel')}
            <input
              type="file"
              data-testid={`favorite-icon-upload-${fav.id}`}
              accept="image/png,image/jpeg,image/gif,image/webp,image/x-icon,image/vnd.microsoft.icon,image/svg+xml,.ico,.svg"
              className="mt-0.5 block w-full text-xs"
              onChange={(e) => onEditIconFileChange(e.target.files?.[0] ?? null)}
            />
          </label>
          <p className="text-xs text-muted-foreground">{t('favorites.iconUploadHint')}</p>
          {fav.uploadedIconMime != null && (
            <>
              <p className="text-xs text-muted-foreground">{t('favorites.iconUploadedHint')}</p>
              <button
                type="button"
                className="rounded bg-muted px-2 py-1 text-xs text-muted-foreground hover:bg-muted/80 transition-colors"
                onClick={() => void onRemoveIcon(fav.id)}
              >
                {t('favorites.iconRemoveButton')}
              </button>
            </>
          )}
          {editError && (
            <p role="alert" className="text-xs text-destructive">
              {editError}
            </p>
          )}
          <div className="flex gap-1">
            <button
              type="button"
              className="flex-1 rounded bg-primary px-2 py-1 text-xs text-primary-foreground hover:opacity-90 transition-opacity disabled:opacity-50"
              disabled={editBusy}
              onClick={() => void onSaveEdit(fav.id)}
            >
              {t('favorites.saveButton')}
            </button>
            <button
              type="button"
              className="flex-1 rounded bg-muted px-2 py-1 text-xs text-muted-foreground hover:bg-muted/80 transition-colors"
              onClick={onCancelEdit}
            >
              {t('favorites.cancelButton')}
            </button>
          </div>
        </div>
      )}
    </div>
  );
}