tessera-ctl/apps/web/src/components/dashboard/widgets/link-widget.tsx

'use client';

import { FormEvent, useEffect, useState } from 'react';
import { useTranslations } from 'next-intl';
import { updateWidgetConfig } from '@/lib/dashboard-api';
import {
  createFavorite,
  deleteFavorite,
  fetchFavorites,
  updateFavorite,
  type FavoriteLink,
} from '@/lib/favorites-api';
import type { WidgetProps } from '@/components/dashboard/widget-registry';

/**
 * LinkWidget — single-link quick-access tile (DASH-09 / D-06).
 *
 * Features:
 * - Displays exactly one link, scoped to this widget instance via instanceId
 * - Shares the FavoriteLink backend from Plan 03 (widgetId = instanceId)
 * - Single-link enforcement: add form hidden when a link already exists
 * - Add / edit / delete in edit mode (inline forms)
 * - List view (row: icon + title, default) and tile view, switchable in edit mode
 * - Server-side icon discovery (letter fallback when iconUrl is null)
 * - Link opens in new tab with rel="noreferrer" (T-08-12 open-redirect mitigation)
 * - No dangerouslySetInnerHTML (T-08-11 XSS mitigation)
 */
export function LinkWidget({
  instanceId,
  config,
  isEditMode,
}: WidgetProps) {
  const t = useTranslations('widgets');

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

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

  // Add-form state
  const [newTitle, setNewTitle] = useState('');
  const [newUrl, setNewUrl] = useState('');

  // Inline edit state
  const [isEditing, setIsEditing] = useState(false);
  const [editTitle, setEditTitle] = useState('');
  const [editUrl, setEditUrl] = useState('');
  const [editIconUrl, setEditIconUrl] = useState('');

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

    async function load() {
      setLoading(true);
      setError(null);
      try {
        const data = await fetchFavorites(instanceId);
        // Single-link: take only the first entry (D-06)
        if (!cancelled) setLink(data[0] ?? null);
      } catch {
        // Stable error key — t excluded from deps to prevent re-fetch loops
        if (!cancelled) setError(t('link.error'));
      } finally {
        if (!cancelled) setLoading(false);
      }
    }

    void load();

    return () => {
      cancelled = true;
    };
    // instanceId is the only meaningful dependency — t is excluded intentionally
    // (mock creates new fn ref on each render, causing re-fetch loops in tests)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [instanceId]);

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

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

  // --- Add link ---
  async function handleAdd(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const cleanTitle = newTitle.trim();
    const cleanUrl = newUrl.trim();
    if (!cleanTitle || !cleanUrl) return;

    try {
      const created = await createFavorite({
        widgetId: instanceId,
        title: cleanTitle,
        url: cleanUrl,
      });
      setLink(created);
      setNewTitle('');
      setNewUrl('');
    } catch {
      setError(t('link.error'));
    }
  }

  // --- Edit link ---
  function startEdit() {
    if (!link) return;
    setIsEditing(true);
    setEditTitle(link.title);
    setEditUrl(link.url);
    setEditIconUrl(link.iconUrl ?? '');
    setError(null);
  }

  function cancelEdit() {
    setIsEditing(false);
    setEditTitle('');
    setEditUrl('');
    setEditIconUrl('');
  }

  async function handleSaveEdit() {
    if (!link) return;
    const cleanTitle = editTitle.trim();
    const cleanUrl = editUrl.trim();
    const cleanIconUrl = editIconUrl.trim();
    if (!cleanTitle || !cleanUrl) return;

    try {
      const updated = await updateFavorite(link.id, {
        title: cleanTitle,
        url: cleanUrl,
        iconUrl: cleanIconUrl || null,
      });
      setLink(updated);
      cancelEdit();
    } catch {
      setError(t('link.error'));
    }
  }

  // --- Delete link ---
  async function handleDelete() {
    if (!link) return;
    try {
      await deleteFavorite(link.id);
      setLink(null);
      cancelEdit();
    } catch {
      setError(t('link.error'));
    }
  }

  // --- Shared icon element ---
  function renderIcon(size: 'sm' | 'md') {
    if (!link) return null;
    const wh = size === 'sm' ? 'w-5 h-5' : 'w-8 h-8';
    const textSize = size === 'sm' ? 'text-xs' : 'text-sm';
    const imgSize = size === 'sm' ? 20 : 32;
    return (
      <div className={`relative flex-shrink-0 ${wh}`}>
        <span
          data-testid="link-letter-fallback"
          className={`absolute inset-0 flex items-center justify-center ${textSize} font-semibold bg-muted rounded`}
        >
          {getFallbackLetter(link.title)}
        </span>
        {link.iconUrl && (
          <img
            src={link.iconUrl}
            alt=""
            width={imgSize}
            height={imgSize}
            loading="lazy"
            className={`absolute inset-0 ${wh} rounded`}
            onError={(e) => {
              (e.currentTarget as HTMLImageElement).style.display = 'none';
            }}
          />
        )}
      </div>
    );
  }

  // --- Inline edit form ---
  function renderEditForm() {
    return (
      <div className="flex flex-col gap-1 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) => setEditTitle(e.target.value)}
          placeholder={t('link.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) => setEditUrl(e.target.value)}
          placeholder={t('link.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) => setEditIconUrl(e.target.value)}
          placeholder="Logo-URL (optional)"
        />
        <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"
            onClick={() => void handleSaveEdit()}
          >
            {t('link.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={cancelEdit}
          >
            {t('link.cancelButton')}
          </button>
        </div>
      </div>
    );
  }

  // --- Render ---
  return (
    <div className="flex flex-col h-full overflow-auto p-1 gap-2">
      {/* View mode toggle (edit mode only) */}
      {isEditMode && (
        <div className="flex gap-1 widgetNoDrag">
          <button
            type="button"
            onClick={() => handleViewMode('list')}
            className={`px-2 py-1 text-xs rounded ${
              viewMode === 'list'
                ? 'bg-primary text-primary-foreground'
                : 'bg-muted text-muted-foreground'
            }`}
          >
            {t('link.listView')}
          </button>
          <button
            type="button"
            onClick={() => handleViewMode('grid')}
            className={`px-2 py-1 text-xs rounded ${
              viewMode === 'grid'
                ? 'bg-primary text-primary-foreground'
                : 'bg-muted text-muted-foreground'
            }`}
          >
            {t('link.gridView')}
          </button>
        </div>
      )}

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

      {/* Empty state */}
      {!loading && !link && (
        <p className="text-xs text-muted-foreground">{t('link.empty')}</p>
      )}

      {/* Link display — list (row) view */}
      {!loading && link && !isEditing && viewMode === 'list' && (
        <div data-testid="link-list" className="flex items-center gap-2">
          <a
            href={link.url}
            target="_blank"
            rel="noreferrer"
            className="flex items-center gap-2 flex-1 min-w-0 hover:underline widgetNoDrag"
            onClick={(e) => isEditMode && e.preventDefault()}
          >
            {renderIcon('sm')}
            <span className="text-xs truncate">{link.title}</span>
          </a>
          {isEditMode && (
            <button
              type="button"
              aria-label={t('link.editButton')}
              title={t('link.editButton')}
              className="p-0.5 text-muted-foreground hover:text-foreground flex-shrink-0 widgetNoDrag"
              onClick={startEdit}
            >
              <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>
          )}
        </div>
      )}

      {/* Link display — tile (grid) view */}
      {!loading && link && !isEditing && viewMode === 'grid' && (
        <div data-testid="link-tile" className="flex flex-col items-center gap-1 p-1">
          <a
            href={link.url}
            target="_blank"
            rel="noreferrer"
            className="flex flex-col items-center gap-1 widgetNoDrag"
            onClick={(e) => isEditMode && e.preventDefault()}
          >
            {renderIcon('md')}
            <span className="text-xs text-center truncate max-w-full">{link.title}</span>
          </a>
          {isEditMode && (
            <button
              type="button"
              aria-label={t('link.editButton')}
              title={t('link.editButton')}
              className="p-0.5 text-muted-foreground hover:text-foreground widgetNoDrag"
              onClick={startEdit}
            >
              <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>
          )}
        </div>
      )}

      {/* Inline edit form */}
      {isEditMode && isEditing && link && renderEditForm()}

      {/* Add form — single-link enforcement: hidden when link exists (D-06) */}
      {isEditMode && !link && !loading && (
        <form
          onSubmit={(e) => void handleAdd(e)}
          className="flex flex-col gap-1 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('link.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('link.addUrl')}
          />
          <button
            type="submit"
            className="w-full rounded bg-primary px-2 py-1 text-xs text-primary-foreground hover:opacity-90 transition-opacity"
          >
            {t('link.addButton')}
          </button>
        </form>
      )}
    </div>
  );
}