import { useEffect, useState } from 'react';
import type { FormEvent } from 'react';
import AppSettingsWindow, { type ThemeMode } from '../components/AppSettingsWindow';
import { apiUrl, ensureOk } from '../lib/api';
import { IconArchive, IconGrid, IconHelp, IconLock, IconRefresh, IconTrash } from '../components/Icons';
import { wordCloudBoardUrl, type WordCloudBoardRoute } from '../lib/wordcloudBoard';
import {
  deleteProduct,
  getProduct,
  listProducts,
  restoreProduct,
} from '../lib/productArchive';
import type { ProductDetail, ProductStatus, ProductSummary } from '../types';

interface ProductArchivePageProps {
  themeMode: ThemeMode;
  systemTheme: 'light' | 'dark';
  onThemeModeChange: (mode: ThemeMode) => void;
  onOpenHome: () => void;
  onOpenHelp?: () => void;
}

const TOKEN_KEY = 'wordcloud-orders-token';

const wordCloudBoardActions: Array<{ label: string; route: WordCloudBoardRoute }> = [
  { label: '个人查找', route: 'cloud' },
  { label: '现场大屏', route: 'screen' },
  { label: '手机控制', route: 'control' },
];

function statusClass(status: ProductStatus): string {
  if (status === 'active') return 'product-status-archived';
  if (status === 'pending_cleanup' || status === 'failed_cleanup') return 'product-status-pending-cleanup';
  return 'product-status-empty';
}

function statusLabel(product: ProductSummary): string {
  if (product.status === 'active') return '已归档词云数据';
  if (product.status === 'pending_cleanup') return '待清理';
  if (product.status === 'failed_cleanup') return '清理失败';
  return '已清理';
}

function formatDate(value: string | null): string {
  if (!value) return '-';
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return '-';
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
  });
}

function formatDateTime(value: string): string {
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return '-';
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
  });
}

function hasWordCloudArchive(detail: ProductDetail): boolean {
  return detail.versions.some(version =>
    version.wordcloud_archives.some(archive => archive.source_job_id.trim().length > 0),
  );
}

function AuthenticatedImage({
  token,
  imageUrl,
  alt,
  emptyLabel,
}: {
  token: string;
  imageUrl: string;
  alt: string;
  emptyLabel: string;
}) {
  const [objectUrl, setObjectUrl] = useState('');

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

    const load = async () => {
      try {
        const res = await fetch(apiUrl(imageUrl), {
          headers: { Authorization: `Bearer ${token}` },
        });
        await ensureOk(res, '预览图读取失败');
        const blob = await res.blob();
        createdUrl = URL.createObjectURL(blob);
        if (!cancelled) setObjectUrl(createdUrl);
      } catch {
        if (!cancelled) setObjectUrl('');
      }
    };

    void load();
    return () => {
      cancelled = true;
      if (createdUrl) URL.revokeObjectURL(createdUrl);
    };
  }, [imageUrl, token]);

  if (!objectUrl) {
    return <div className="product-archive-image-empty">{emptyLabel}</div>;
  }

  return <img src={objectUrl} alt={alt} loading="lazy" decoding="async" />;
}

export default function ProductArchivePage({
  themeMode,
  systemTheme,
  onThemeModeChange,
  onOpenHome,
  onOpenHelp,
}: ProductArchivePageProps) {
  const [token, setToken] = useState(() => localStorage.getItem(TOKEN_KEY) || '');
  const [password, setPassword] = useState('');
  const [loginError, setLoginError] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [products, setProducts] = useState<ProductSummary[]>([]);
  const [query, setQuery] = useState('');
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const [detail, setDetail] = useState<ProductDetail | null>(null);
  const [detailLoading, setDetailLoading] = useState(false);
  const [actionBusy, setActionBusy] = useState(false);

  const selected = products.find(product => product.product_id === selectedId) || null;

  const loadProducts = async (authToken: string, search = query) => {
    if (!authToken) return;
    setLoading(true);
    setError('');
    try {
      const items = await listProducts(authToken, search);
      setProducts(items);
      setSelectedId(current => items.some(item => item.product_id === current) ? current : null);
    } catch (err) {
      setError(err instanceof Error ? err.message : '产品档案读取失败');
      if (err instanceof Error && (err.message.includes('401') || err.message.includes('403'))) {
        localStorage.removeItem(TOKEN_KEY);
        setToken('');
      }
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    void loadProducts(token);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [token]);

  useEffect(() => {
    let cancelled = false;
    if (!token || !selectedId) {
      setDetail(null);
      return;
    }
    setDetailLoading(true);
    setError('');
    getProduct(token, selectedId)
      .then(next => {
        if (!cancelled) setDetail(next);
      })
      .catch(err => {
        if (cancelled) return;
        setError(err instanceof Error ? err.message : '产品详情读取失败');
        setDetail(null);
      })
      .finally(() => {
        if (!cancelled) setDetailLoading(false);
      });
    return () => {
      cancelled = true;
    };
  }, [selectedId, token]);

  const handleLogin = async (event: FormEvent) => {
    event.preventDefault();
    setLoginError('');
    try {
      const res = await ensureOk(await fetch('/api/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ password }),
      }), '登录失败');
      const data = await res.json() as { token: string };
      localStorage.setItem(TOKEN_KEY, data.token);
      setPassword('');
      setToken(data.token);
    } catch (err) {
      setLoginError(err instanceof Error ? err.message : '登录失败');
    }
  };

  const runAction = async (action: () => Promise<ProductSummary>) => {
    if (!token || !selectedId || actionBusy) return;
    setActionBusy(true);
    setError('');
    try {
      await action();
      await loadProducts(token);
      const nextDetail = await getProduct(token, selectedId);
      setDetail(nextDetail);
    } catch (err) {
      setError(err instanceof Error ? err.message : '操作失败');
    } finally {
      setActionBusy(false);
    }
  };

  const copyProductId = async () => {
    if (!detail) return;
    try {
      await navigator.clipboard.writeText(detail.product_id);
    } catch {
      setError('复制产品 ID 失败');
    }
  };

  if (!token) {
    return (
      <div className="orders-page product-archive-page">
        <nav className="navbar">
          <div className="navbar-brand">
            <div className="navbar-brand-icon"><IconLock /></div>
            <span className="navbar-brand-name">产品档案 · 登录</span>
          </div>
          <div className="navbar-actions" />
          <div className="navbar-end">
            <button className="nav-btn" onClick={onOpenHome}>
              <span className="nav-btn-icon"><IconGrid /></span>
              <span className="nav-btn-label">模板</span>
            </button>
            <AppSettingsWindow themeMode={themeMode} systemTheme={systemTheme} onThemeModeChange={onThemeModeChange} />
          </div>
        </nav>
        <main className="orders-main">
          <form className="login-card" onSubmit={handleLogin}>
            <h2 className="login-title">产品档案后台</h2>
            <p className="orders-hint">产品档案包含名单位置数据，请输入生产订单管理口令。</p>
            <input
              type="password"
              className="orders-input"
              placeholder="管理口令"
              value={password}
              onChange={event => setPassword(event.target.value)}
            />
            {loginError && <div className="orders-error">{loginError}</div>}
            <button type="submit" className="btn btn-primary btn-block">登录并查看</button>
          </form>
        </main>
      </div>
    );
  }

  const detailImages = detail?.images || [];
  const previewImage = detail
    ? detailImages.find(image => image.image_id === detail.cover_image_id) || detailImages[0]
    : null;
  const previewUrl = previewImage?.image_url || '';
  const latestVersion = detail?.versions[detail.versions.length - 1] || null;
  const canOpenWordCloudBoard = detail !== null
    && selected?.status === 'active'
    && hasWordCloudArchive(detail);

  return (
    <div className="orders-page product-archive-page">
      <nav className="navbar">
        <div className="navbar-brand">
          <div className="navbar-brand-icon"><IconArchive /></div>
          <span className="navbar-brand-name">产品档案</span>
        </div>
        <div className="navbar-actions" />
        <div className="navbar-end">
          <button className="nav-btn" onClick={onOpenHome}>
            <span className="nav-btn-icon"><IconGrid /></span>
            <span className="nav-btn-label">模板</span>
          </button>
          <button className="nav-btn" onClick={() => loadProducts(token)}>
            <span className="nav-btn-icon"><IconRefresh /></span>
            <span className="nav-btn-label">刷新</span>
          </button>
          {onOpenHelp && (
            <button className="nav-btn" onClick={onOpenHelp}>
              <span className="nav-btn-icon"><IconHelp /></span>
              <span className="nav-btn-label">帮助</span>
            </button>
          )}
          <button
            className="nav-btn"
            onClick={() => {
              localStorage.removeItem(TOKEN_KEY);
              setToken('');
              setProducts([]);
              setDetail(null);
              setSelectedId(null);
            }}
          >
            <span className="nav-btn-icon"><IconTrash /></span>
            <span className="nav-btn-label">退出</span>
          </button>
          <AppSettingsWindow themeMode={themeMode} systemTheme={systemTheme} onThemeModeChange={onThemeModeChange} />
        </div>
      </nav>

      <main className="orders-main orders-layout">
        <aside className="orders-queue">
          <div className="orders-queue-head">
            <span>产品列表</span>
            <span className="orders-count">{products.length} 个</span>
          </div>
          <div className="product-archive-search-block">
            <input
              className="orders-input"
              placeholder="产品名称"
              value={query}
              onChange={event => setQuery(event.target.value)}
              onKeyDown={event => {
                if (event.key === 'Enter') void loadProducts(token);
              }}
            />
            <button className="btn btn-secondary btn-sm" onClick={() => loadProducts(token)}>搜索</button>
          </div>
          <div className="orders-queue-list">
            {loading && <div className="table-empty">加载中…</div>}
            {!loading && products.length === 0 && <div className="table-empty">暂无产品档案</div>}
            {products.map(product => {
              const coverUrl = product.cover_image_id
                ? `/api/products/${product.product_id}/images/${product.cover_image_id}`
                : "";
              return (
                <button
                  key={product.product_id}
                  className={`product-archive-row${selectedId === product.product_id ? ' active' : ''}`}
                  onClick={() => setSelectedId(product.product_id)}
                >
                  <span className="product-archive-thumb">
                    {coverUrl
                      ? <AuthenticatedImage
                          token={token}
                          imageUrl={coverUrl}
                          alt={product.name}
                          emptyLabel="暂无预览图"
                        />
                      : <span className="product-archive-thumb-empty">暂无预览图</span>}
                  </span>
                  <span className="product-archive-row-body">
                    <span className="product-archive-row-name">{product.name}</span>
                    <span className="product-archive-row-meta">
                      {[product.sku, product.specification].filter(Boolean).join(' · ') || '未填写规格'}
                    </span>
                  </span>
                  <span className={`product-status ${statusClass(product.status)}`}>{statusLabel(product)}</span>
                </button>
              );
            })}
          </div>
        </aside>

        <section className="orders-detail">
          {!selected ? (
            <div className="table-empty">在左侧选择产品查看详情</div>
          ) : (
            <>
              <div className="orders-detail-head">
                <div>
                  <h2 className="orders-detail-title">{selected.name}</h2>
                  <span className={`orders-status ${statusClass(selected.status)}`}>{statusLabel(selected)}</span>
                  <span className="orders-detail-meta">
                    {[selected.sku, selected.specification].filter(Boolean).join(' · ') || '未填写规格'}
                  </span>
                </div>
                <div className="orders-detail-actions">
                  {(selected.status === 'pending_cleanup' || selected.status === 'failed_cleanup') && (
                    <button
                      className="btn btn-secondary btn-sm"
                      disabled={actionBusy}
                      onClick={() => runAction(() => restoreProduct(token, selected.product_id))}
                    >
                      恢复产品
                    </button>
                  )}
                  {selected.status === 'active' && (
                    <button
                      className="btn btn-danger btn-sm"
                      disabled={actionBusy}
                      onClick={() => runAction(() => deleteProduct(token, selected.product_id))}
                    >
                      软删除
                    </button>
                  )}
                </div>
              </div>

              {selected.status === 'pending_cleanup' && (
                <div className="orders-error product-archive-warning">
                  待清理 · 将于 {formatDate(selected.purge_after)} 删除。恢复产品可结束本次清理窗口。
                </div>
              )}
              {selected.status === 'failed_cleanup' && (
                <div className="orders-error product-archive-warning">清理失败，请人工检查档案目录后再恢复。</div>
              )}
              {error && <div className="orders-error">{error}</div>}

              {detailLoading && <div className="table-empty">正在读取产品详情…</div>}
              {detail && (
                <div className="product-archive-detail">
                  <div className="product-archive-cover">
                    {previewUrl
                      ? <AuthenticatedImage
                          token={token}
                          imageUrl={previewUrl}
                          alt={`${selected.name} 预览图`}
                          emptyLabel="暂无预览图"
                        />
                      : <div className="product-archive-cover-empty">暂无预览图</div>}
                  </div>
                  <div className="product-archive-detail-body">
                    <div className="product-archive-metrics">
                      <div>
                        <span className="product-archive-metric-label">归档词云</span>
                        <strong>{latestVersion?.wordcloud_count ?? 0} 份</strong>
                      </div>
                      <div>
                        <span className="product-archive-metric-label">设计版本</span>
                        <strong>{detail.versions.length} 版</strong>
                      </div>
                      <div>
                        <span className="product-archive-metric-label">图片</span>
                        <strong>{detail.images.length} 张</strong>
                      </div>
                    </div>

                    <section className="product-archive-board-links" aria-labelledby="wordcloud-board-title">
                      <h3 id="wordcloud-board-title">词云互动</h3>
                      <div className="product-archive-board-actions">
                        {wordCloudBoardActions.map(action => (
                          canOpenWordCloudBoard ? (
                            <a
                              className="btn btn-secondary btn-sm"
                              href={wordCloudBoardUrl(action.route, detail.product_id)}
                              key={action.route}
                              target="_blank"
                              rel="noopener noreferrer"
                            >
                              {action.label}
                            </a>
                          ) : (
                            <button className="btn btn-secondary btn-sm" disabled key={action.route} type="button">
                              {action.label}
                            </button>
                          )
                        ))}
                      </div>
                      {!canOpenWordCloudBoard && (
                        <p className="product-archive-board-note">暂无可用词云归档</p>
                      )}
                    </section>

                    <div className="product-archive-timeline">
                      <h3>版本时间线</h3>
                      {detail.versions.length === 0 && <p>暂无设计版本。</p>}
                      {detail.versions.map(version => (
                        <div className="product-archive-version" key={version.version_id}>
                          <div>
                            <span>{formatDateTime(version.created_at)}</span>
                            <span>{version.wordcloud_count} 份词云位置数据</span>
                          </div>
                        </div>
                      ))}
                    </div>

                    <details className="product-archive-system">
                      <summary>系统信息</summary>
                      <div className="product-archive-system-row">
                        <span>产品 ID</span>
                        <code>{detail.product_id}</code>
                      </div>
                      <button className="btn btn-secondary btn-sm" onClick={copyProductId}>复制产品 ID</button>
                    </details>
                  </div>
                </div>
              )}
            </>
          )}
        </section>
      </main>
    </div>
  );
}