'use client';

import { FormEvent, useEffect, useMemo, 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';

/**
 * 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)
 */
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',
  );

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

  // Inline edit state
  const [editingId, setEditingId] = useState<string | null>(null);
  const [editTitle, setEditTitle] = useState('');
  const [editUrl, setEditUrl] = useState('');
  const [editIconUrl, setEditIconUrl] = useState('');

  // 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],
  );

  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(t('favorites.error'));
      } finally {
        if (!cancelled) setLoading(false);
      }
    }

    void load();

    return () => {
      cancelled = true;
    };
    // instanceId is the only meaningful dependency — t is stable at runtime
    // and excluded to prevent re-fetching on every render (mock creates new fn)
    // 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, D-03) ---
  function handleViewMode(next: 'list' | 'grid') {
    setViewMode(next);
    void updateWidgetConfig(instanceId, { viewMode: next });
  }

  // --- Add favorite ---
  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,
      });
      setFavorites((prev) => [...prev, created]);
      setNewTitle('');
      setNewUrl('');
      setNewIconUrl('');
    } catch {
      setError(t('favorites.error'));
    }
  }

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

  function cancelEdit() {
    setEditingId(null);
    setEditTitle('');
    setEditUrl('');
    setEditIconUrl('');
  }

  async function handleSaveEdit(id: string) {
    const cleanTitle = editTitle.trim();
    const cleanUrl = editUrl.trim();
    const cleanIconUrl = editIconUrl.trim();

    if (!cleanTitle || !cleanUrl) return;

    try {
      const updated = await updateFavorite(id, {
        title: cleanTitle,
        url: cleanUrl,
        iconUrl: cleanIconUrl || null,
      });
      setFavorites((prev) => prev.map((f) => (f.id === id ? updated : f)));
      cancelEdit();
    } catch {
      setError(t('favorites.error'));
    }
  }

  // --- 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 flex-col h-full overflow-auto p-1 gap-2">
      {/* View mode toggle (edit mode only) */}
      {isEditMode && (
        <div className="flex gap-1 widgetNoDrag" aria-label={t('favorites.name')}>
          <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('favorites.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('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-3 gap-2"
          >
            {sortedFavorites.map((fav) => (
              <FavoriteTile
                key={fav.id}
                fav={fav}
                isEditMode={isEditMode}
                editingId={editingId}
                editTitle={editTitle}
                editUrl={editUrl}
                editIconUrl={editIconUrl}
                getFallbackLetter={getFallbackLetter}
                onStartEdit={startEdit}
                onCancelEdit={cancelEdit}
                onSaveEdit={handleSaveEdit}
                onDelete={handleDelete}
                onEditTitleChange={setEditTitle}
                onEditUrlChange={setEditUrl}
                onEditIconUrlChange={setEditIconUrl}
                t={t}
              />
            ))}
          </div>
        ) : (
          <div
            data-testid="favorites-list"
            className="flex flex-col gap-1"
          >
            {sortedFavorites.map((fav) => (
              <FavoriteTile
                key={fav.id}
                fav={fav}
                isEditMode={isEditMode}
                editingId={editingId}
                editTitle={editTitle}
                editUrl={editUrl}
                editIconUrl={editIconUrl}
                getFallbackLetter={getFallbackLetter}
                onStartEdit={startEdit}
                onCancelEdit={cancelEdit}
                onSaveEdit={handleSaveEdit}
                onDelete={handleDelete}
                onEditTitleChange={setEditTitle}
                onEditUrlChange={setEditUrl}
                onEditIconUrlChange={setEditIconUrl}
                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')}
          />
          <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>
  );
}

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

type FavoriteTileProps = {
  fav: FavoriteLink;
  isEditMode: boolean;
  editingId: string | null;
  editTitle: string;
  editUrl: string;
  editIconUrl: string;
  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;
  t: (key: string) => string;
};

function FavoriteTile({
  fav,
  isEditMode,
  editingId,
  editTitle,
  editUrl,
  editIconUrl,
  getFallbackLetter,
  onStartEdit,
  onCancelEdit,
  onSaveEdit,
  onDelete,
  onEditTitleChange,
  onEditUrlChange,
  onEditIconUrlChange,
  t,
}: FavoriteTileProps) {
  const isEditing = editingId === fav.id;

  return (
    <div className="flex flex-col">
      {/* Main link row */}
      <div className="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="flex items-center gap-2 flex-1 min-w-0 hover:underline widgetNoDrag"
          onClick={(e) => isEditMode && e.preventDefault()} // block navigation in edit mode
        >
          {/* Icon container with letter fallback (T-08-07 — no dangerouslySetInnerHTML) */}
          <div className="relative flex-shrink-0 w-5 h-5">
            <span
              data-testid={`letter-fallback-${fav.id}`}
              className="absolute inset-0 flex items-center justify-center text-xs font-semibold bg-muted rounded"
            >
              {getFallbackLetter(fav.title)}
            </span>
            {fav.iconUrl && (
              <img
                src={`/api-proxy/favorites/${encodeURIComponent(fav.id)}/icon`}
                alt=""
                width={20}
                height={20}
                loading="lazy"
                className="absolute inset-0 w-5 h-5 rounded"
                onError={(e) => {
                  (e.currentTarget as HTMLImageElement).style.display = 'none';
                }}
              />
            )}
          </div>

          <span className="text-xs truncate">{fav.title}</span>
        </a>

        {/* Action buttons (edit mode only, D-04) */}
        {isEditMode && !isEditing && (
          <div className="flex gap-1 flex-shrink-0 widgetNoDrag">
            <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="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 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>
  );
}