/**
 * 电商套图工作台 - Side Panel
 *
 * 布局：顶栏 + 目标平台
 *   ├─ 左 01 商品信息 ｜ 右 02 采集图片（两列等高，采集阶段）
 *   ├─ 03 出图方案（整行：方案列表 + AI 智能规划 + 风格 + 一键生成）
 *   └─ 04 生成结果（整行）
 *
 * 流程：采集页面 → 编辑/勾选 → AI 规划或用默认方案 → 一键生成 → 导出 ZIP
 */
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { createRoot } from 'react-dom/client';
import { App as AntApp, ConfigProvider, Popover, Progress } from 'antd';
import { SettingOutlined, DownloadOutlined, ThunderboltOutlined } from '@ant-design/icons';
import type { ScanResult, ImageMaterial } from '../../src/collector/scan';
import {
  buildGeneratePayload, suiteZipUrl,
  DEFAULT_PLAN, PLATFORM_OPTIONS, PLATFORM_SPECS, STYLE_SET_OPTIONS,
  type PlanItem, type SuiteInfo,
} from '../../src/api/client';
import { loadSettings, saveSettings, type BackendSettings } from '../../src/storage/settings';

/** 数据来源 → 展示含义 */
const SOURCE_LABELS: Record<string, string> = {
  state: '页面数据',
  ssr: '页面数据',
  jsonld: '结构化数据',
  api: '站内接口',
  dom: 'DOM解析',
  mixed: '混合来源',
};

/** 平台 → 展示名 */
const PLATFORM_LABELS: Record<string, string> = {
  ozon: 'Ozon',
  '1688': '1688',
  taobao: '淘宝/天猫',
};

/** 在当前活动 tab 执行采集（content script 已把入口挂到 window） */
async function scanActiveTab(): Promise<ScanResult> {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  if (!tab?.id) throw new Error('未找到活动标签页');
  const [res] = await chrome.scripting.executeScript({
    target: { tabId: tab.id },
    func: () => (window as any).__SuiteCollector?.scan?.() ?? null,
  });
  const r = (res?.result ?? null) as ScanResult | null;
  if (!r) throw new Error('采集失败：页面不支持或内容脚本未就绪，请刷新页面后重试');
  return r;
}

function send<T>(action: string, payload: Record<string, unknown>): Promise<T> {
  return new Promise((resolve, reject) => {
    chrome.runtime.sendMessage({ action, ...payload }, (res: { ok: boolean; data?: T; error?: string }) => {
      if (chrome.runtime.lastError) return reject(new Error(chrome.runtime.lastError.message));
      if (!res?.ok) return reject(new Error(res?.error || '后台请求失败'));
      resolve(res.data as T);
    });
  });
}

// ── 小组件 ─────────────────────────────────────────────────────────────────

const Section: React.FC<{ no: string; title: string; extra?: React.ReactNode; children: React.ReactNode }> =
  ({ no, title, extra, children }) => (
    <div className="section">
      <div className="section-head">
        <span className="section-no">{no}</span>
        <span className="section-title">{title}</span>
        {extra && <span className="section-extra">{extra}</span>}
      </div>
      {children}
    </div>
  );

const Field: React.FC<{ label: string; children: React.ReactNode }> = ({ label, children }) => (
  <div className="field">
    <label>{label}</label>
    {children}
  </div>
);

/** 数量加减器 */
const Stepper: React.FC<{ value: number; onChange: (v: number) => void }> = ({ value, onChange }) => (
  <span className="stepper">
    <button className="step-btn" disabled={value <= 0} onClick={() => onChange(Math.max(0, value - 1))}>−</button>
    <span className="step-num">{value}</span>
    <button className="step-btn" disabled={value >= 5} onClick={() => onChange(Math.min(5, value + 1))}>＋</button>
  </span>
);

const App: React.FC = () => {
  const { modal } = AntApp.useApp();

  // 采集
  const [scanning, setScanning] = useState(false);
  const [result, setResult] = useState<ScanResult | null>(null);
  const [selectedKeys, setSelectedKeys] = useState<Set<string>>(new Set());
  const [titleEdit, setTitleEdit] = useState('');
  const [descEdit, setDescEdit] = useState('');
  const [paramsOpen, setParamsOpen] = useState(false);

  // 服务端
  const [settings, setSettings] = useState<BackendSettings>({ baseUrl: 'http://127.0.0.1:3300', token: '' });

  // 出图方案
  const [platform, setPlatform] = useState<'ozon' | 'wb' | 'cn'>('cn');
  const [styleSet, setStyleSet] = useState(1);
  const [plan, setPlan] = useState<PlanItem[]>(DEFAULT_PLAN.map(p => ({ ...p })));
  const [planSource, setPlanSource] = useState<'default' | 'ai'>('default');
  const [planSummary, setPlanSummary] = useState('');
  const [planning, setPlanning] = useState(false);

  // 生成
  const [suite, setSuite] = useState<SuiteInfo | null>(null);
  const [generating, setGenerating] = useState(false);
  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);

  // 图片放大预览
  const [previewUrl, setPreviewUrl] = useState<string | null>(null);

  useEffect(() => {
    loadSettings().then(setSettings);
    return () => { if (pollRef.current) clearInterval(pollRef.current); };
  }, []);

  const price = result?.texts.find(t => t.kind === 'price')?.content ?? '';
  const brand = result?.texts.find(t => t.kind === 'brand')?.content ?? '';
  const paramPairs = result?.texts.find(t => t.kind === 'params')?.pairs ?? [];

  const handleScan = async () => {
    setScanning(true);
    try {
      const r = await scanActiveTab();
      setResult(r);
      setSuite(null);
      setParamsOpen(false);
      // 默认全选主图 + SKU 图（SKU 图带规格名，AI 规划的 variant 绑定要用）
      const keys = new Set(r.images.filter(i => i.groupKey === 'main' || i.groupKey === 'sku').map(i => i.key));
      setSelectedKeys(keys);
      setTitleEdit(r.texts.find(t => t.kind === 'title')?.content ?? '');
      setDescEdit(r.texts.find(t => t.kind === 'desc')?.content ?? '');
    } catch (e) {
      modal.error({ title: '采集失败', content: e instanceof Error ? e.message : String(e), okText: '知道了' });
    } finally {
      setScanning(false);
    }
  };

  const stopPolling = () => { if (pollRef.current) { clearInterval(pollRef.current); pollRef.current = null; } };

  const pollSuite = useCallback((suiteId: string) => {
    stopPolling();
    pollRef.current = setInterval(async () => {
      try {
        const s = await send<SuiteInfo>('getSuite', { baseUrl: settings.baseUrl, token: settings.token, suiteId });
        setSuite(s);
        if (['done', 'partial', 'failed'].includes(s.status)) {
          stopPolling();
          setGenerating(false);
          if (s.status === 'partial') modal.warning({ title: '部分生成失败', content: '可重试或更换风格重新生成', okText: '知道了' });
          if (s.status === 'failed') modal.error({ title: '生成失败', content: s.error || '未知错误', okText: '知道了' });
        }
      } catch (e) {
        stopPolling();
        setGenerating(false);
      }
    }, 3000);
  }, [settings.baseUrl, settings.token, modal]);

  /** 当前编辑后的文本素材（规划与生成共用） */
  const editedTexts = () => {
    if (!result) return [];
    const orig = (kind: string) => result.texts.find(t => t.kind === kind);
    const texts: Array<{ kind: string; content: string; pairs?: Array<{ key: string; value: string }> | null }> = [];
    const title = titleEdit || orig('title')?.content || '';
    const desc = descEdit || orig('desc')?.content || '';
    if (title) texts.push({ kind: 'title', content: title });
    if (orig('price')?.content) texts.push({ kind: 'price', content: orig('price')!.content });
    if (orig('brand')?.content) texts.push({ kind: 'brand', content: orig('brand')!.content });
    if ((orig('params')?.pairs ?? []).length) texts.push({ kind: 'params', content: '', pairs: orig('params')!.pairs });
    if (orig('selling_point')?.content) texts.push({ kind: 'selling_point', content: orig('selling_point')!.content });
    if (desc) texts.push({ kind: 'desc', content: desc });
    return texts;
  };

  /** AI 智能规划出图方案 */
  const handlePlan = async () => {
    if (!result) return modal.warning({ title: '请先采集商品页' });
    setPlanning(true);
    try {
      const skuVariants = Array.from(new Set(
        result.images.filter(i => i.groupKey === 'sku' && i.variantName).map(i => i.variantName!)
      ));
      const data = await send<{ summary: string; items: PlanItem[] }>('planSuite', {
        baseUrl: settings.baseUrl, token: settings.token,
        payload: {
          texts: editedTexts(),
          sku_variants: skuVariants,
          image_stats: result.stats,
          platform,
        },
      });
      setPlan(data.items);
      setPlanSource('ai');
      setPlanSummary(data.summary);
      const total = data.items.reduce((s, i) => s + i.count, 0);
      modal.info({
        title: 'AI 方案已生成',
        content: `${data.summary}（共 ${total} 张）。可逐项调整数量，0 即不生成。`,
        okText: '好的',
      });
    } catch (e) {
      modal.error({ title: '规划失败', content: e instanceof Error ? e.message : String(e), okText: '知道了' });
    } finally {
      setPlanning(false);
    }
  };

  const totalPlanned = plan.reduce((s, i) => s + i.count, 0);
  const doneCount = suite?.images.filter(i => i.status === 'ok').length ?? 0;
  const suiteTotal = suite?.images.length ?? totalPlanned;

  const handleGenerate = () => {
    if (!result) return;
    if (selectedKeys.size === 0) return modal.warning({ title: '请先在采集图片区勾选参考图' });
    if (totalPlanned === 0) return modal.warning({ title: '出图方案的张数都是 0' });
    const spec = PLATFORM_SPECS[platform];
    modal.confirm({
      title: '生成电商套图',
      content: `目标平台「${spec.label}」（${spec.lang}文案 · ${spec.ratio}），风格「${STYLE_SET_OPTIONS.find(s => s.value === styleSet)?.label}」，共 ${totalPlanned} 张、参考图 ${selectedKeys.size} 张。生成需要几分钟，可在下方查看进度。`,
      okText: '开始生成', cancelText: '取消',
      onOk: async () => {
        setGenerating(true);
        setSuite(null);
        try {
          const payload = buildGeneratePayload(
            result, selectedKeys,
            { title: titleEdit, desc: descEdit },
            { style_set: styleSet, plan: plan.filter(p => p.count > 0), platform },
          );
          const { suite_id } = await send<{ suite_id: string }>('generateSuite', {
            baseUrl: settings.baseUrl, token: settings.token, payload,
          });
          pollSuite(suite_id);
        } catch (e) {
          setGenerating(false);
          modal.error({ title: '提交失败', content: e instanceof Error ? e.message : String(e), okText: '知道了' });
        }
      },
    });
  };

  const handleExport = () => {
    if (!suite) return;
    chrome.tabs.create({ url: suiteZipUrl(settings.baseUrl, suite.id) });
  };

  const toggleKey = (key: string) => {
    const next = new Set(selectedKeys);
    if (next.has(key)) next.delete(key); else next.add(key);
    setSelectedKeys(next);
  };

  const groupImages = (groupKey: string): ImageMaterial[] =>
    result?.images.filter(i => i.groupKey === groupKey) ?? [];

  const toggleGroup = (groupKey: string, on: boolean) => {
    const next = new Set(selectedKeys);
    groupImages(groupKey).forEach(i => on ? next.add(i.key) : next.delete(i.key));
    setSelectedKeys(next);
  };

  const setPlanCount = (idx: number, count: number) => {
    setPlan(prev => prev.map((p, i) => i === idx ? { ...p, count } : p));
  };

  /** 源站图防盗链时的兜底：走服务端图片代理 */
  const proxied = (u: string) =>
    `${settings.baseUrl.replace(/\/$/, '')}/api/proxy-image?url=${encodeURIComponent(u)}`;

  /** 缩略图三级降级：thumbUrl → 原图 → 服务端代理 */
  const onThumbError = (e: React.SyntheticEvent<HTMLImageElement>, url: string) => {
    const el = e.currentTarget;
    if (el.dataset.step === '1') { el.dataset.step = '2'; el.src = url; }
    else if (el.dataset.step === '2') { el.dataset.step = '3'; el.src = proxied(url); }
  };

  const settingsPopup = (
    <div style={{ width: 260 }}>
      <Field label="后端地址">
        <input
          value={settings.baseUrl}
          onChange={(e) => setSettings({ ...settings, baseUrl: e.target.value })}
          onBlur={() => saveSettings(settings)}
        />
      </Field>
      <Field label="Token（可选）">
        <input
          value={settings.token}
          onChange={(e) => setSettings({ ...settings, token: e.target.value })}
          onBlur={() => saveSettings(settings)}
        />
      </Field>
    </div>
  );

  return (
    <div className="page">
      {/* ── 顶栏 ── */}
      <div className="topbar">
        <div className="logo">套</div>
        <div>
          <h1>电商套图工作台</h1>
          <div className="sub">商品采集 · 套图生成 · 一键导出</div>
        </div>
        <div className="spacer" />
        <Popover content={settingsPopup} title="服务端设置" trigger="click" placement="bottomRight">
          <button className="icon-btn" title="服务端设置"><SettingOutlined /></button>
        </Popover>
        <button className="btn btn-primary" disabled={scanning} onClick={handleScan}>
          {scanning ? '采集中…' : '快速采集'}
        </button>
      </div>

      {/* ── 目标平台切换（决定文案语言 + 图片比例）── */}
      <div className="platform-bar">
        <span className="platform-label">目标平台</span>
        <div className="pills">
          {PLATFORM_OPTIONS.map(p => (
            <span
              key={p.value}
              className={`pill ${platform === p.value ? 'on' : ''}`}
              onClick={() => setPlatform(p.value)}
            >{p.label}</span>
          ))}
        </div>
        <span className="platform-spec">
          {PLATFORM_SPECS[platform].lang}文案 · {PLATFORM_SPECS[platform].ratio} 图片
        </span>
      </div>

      {/* ── 采集区：左信息 / 右图片，两列等高 ── */}
      <div className="two-col">
        <Section
          no="01"
          title="商品信息"
          extra={result
            ? `${PLATFORM_LABELS[result.platform] ?? result.platform} · ${SOURCE_LABELS[result.source] ?? result.source}`
            : undefined}
        >
          {!result ? (
            <div className="empty">点击右上角「快速采集」抓取当前商品页</div>
          ) : (
            <>
              <Field label="标题">
                <input value={titleEdit} onChange={(e) => setTitleEdit(e.target.value)} />
              </Field>
              <div style={{ display: 'flex', gap: 8 }}>
                <div style={{ flex: 1 }}>
                  <Field label="价格">
                    <input value={price} readOnly style={{ color: 'var(--text-2)' }} />
                  </Field>
                </div>
                <div style={{ flex: 1 }}>
                  <Field label="品牌">
                    <input value={brand} readOnly style={{ color: 'var(--text-2)' }} />
                  </Field>
                </div>
              </div>
              {paramPairs.length > 0 && (
                <div className="field">
                  <label style={{ cursor: 'pointer' }} onClick={() => setParamsOpen(v => !v)}>
                    规格 / 参数（{paramPairs.length} 项）{paramsOpen ? ' ▴' : ' ▾'}
                  </label>
                  {paramsOpen && (
                    <table className="kv-table">
                      <tbody>
                        {paramPairs.slice(0, 30).map((p, i) => (
                          <tr key={i}><td className="k">{p.key}</td><td>{p.value}</td></tr>
                        ))}
                      </tbody>
                    </table>
                  )}
                </div>
              )}
              <Field label="商品描述（用于生成图内文案）">
                <textarea rows={6} value={descEdit} onChange={(e) => setDescEdit(e.target.value)} />
              </Field>
              {result.warnings.length > 0 && (
                <div className="warn-box">{result.warnings.map((w, i) => <div key={i}>{w}</div>)}</div>
              )}
            </>
          )}
        </Section>

        <Section
          no="02"
          title="采集图片"
          extra={result ? `已选 ${selectedKeys.size} / ${result.images.length}` : undefined}
        >
          {!result ? (
            <div className="empty">采集后在此勾选图片</div>
          ) : (
            <div className="img-groups">
              {['main', 'sku', 'detail'].map(g => groupImages(g).length > 0 && (
                <div key={g} style={{ marginBottom: 10 }}>
                  <div className="group-head">
                    <span className="name">
                      {g === 'main' ? '主图' : g === 'sku' ? 'SKU图片' : '详情图'}
                    </span>
                    <span className="count">{groupImages(g).length}</span>
                    <span
                      className="mini-check"
                      onClick={() => {
                        const all = groupImages(g).every(i => selectedKeys.has(i.key));
                        toggleGroup(g, !all);
                      }}
                    >
                      {groupImages(g).every(i => selectedKeys.has(i.key)) ? '取消全选' : '全选'}
                    </span>
                  </div>
                  <div className="img-grid">
                    {groupImages(g).map(img => {
                      const on = selectedKeys.has(img.key);
                      return (
                        <div key={img.key} className={`img-cell ${on ? 'on' : ''}`}
                          title="点击放大预览，勾选圆点选择图片"
                          onClick={() => setPreviewUrl(img.url)}>
                          <img
                            src={img.thumbUrl || img.url}
                            referrerPolicy="no-referrer"
                            data-step="1"
                            onError={(e) => onThumbError(e, img.url)}
                          />
                          <span
                            className="tick"
                            onClick={(e) => { e.stopPropagation(); toggleKey(img.key); }}
                          >✓</span>
                          {img.variantName && <span className="variant">{img.variantName}</span>}
                        </div>
                      );
                    })}
                  </div>
                </div>
              ))}
            </div>
          )}
        </Section>
      </div>

      {/* ── 出图方案（整行）── */}
      <Section
        no="03"
        title="出图方案"
        extra={
          <span>
            {planSource === 'ai' ? <span className="ai-tag">AI 方案</span> : '默认方案'}
            {' '}共 <b style={{ color: 'var(--primary)' }}>{totalPlanned}</b> 张
          </span>
        }
      >
        <div className="plan-list">
          {plan.map((p, idx) => (
            <div key={idx} className={`plan-row ${p.count === 0 ? 'off' : ''}`}>
              <div className="plan-main">
                <span className="plan-title">{p.title}</span>
                {p.variant_name && <span className="variant-chip">{p.variant_name}</span>}
                {p.detail && <span className="plan-detail" title={p.detail}>{p.detail}</span>}
              </div>
              <Stepper value={p.count} onChange={(v) => setPlanCount(idx, v)} />
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, margin: '10px 0' }}>
          <button className="btn" disabled={!result || planning} onClick={handlePlan}>
            <ThunderboltOutlined /> {planning ? '规划中…' : 'AI 智能规划'}
          </button>
          {planSource === 'ai' && (
            <button
              className="btn btn-sm"
              onClick={() => { setPlan(DEFAULT_PLAN.map(p => ({ ...p }))); setPlanSource('default'); setPlanSummary(''); }}
            >恢复默认方案</button>
          )}
          <span className="hint" style={{ flex: 1 }}>
            {planSummary || '方案与张数由规划器根据商品信息自动决定，可手动微调，0 即不生成'}
          </span>
        </div>

        <div className="divider" />
        <div className="field">
          <label>视觉风格</label>
          <div className="pills">
            {STYLE_SET_OPTIONS.map(s => (
              <span
                key={s.value}
                className={`pill ${styleSet === s.value ? 'on' : ''}`}
                onClick={() => setStyleSet(s.value)}
              >{s.label}</span>
            ))}
          </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 4 }}>
          <button
            className="btn btn-primary" disabled={!result || generating || selectedKeys.size === 0 || totalPlanned === 0}
            onClick={handleGenerate}
          >
            {generating ? '生成中…' : `一键生成（${totalPlanned} 张）`}
          </button>
          {generating && (
            <div style={{ flex: 1 }}>
              <Progress
                percent={suiteTotal ? Math.round(doneCount / suiteTotal * 100) : 0}
                size="small" status="active" format={() => `${doneCount}/${suiteTotal}`}
              />
            </div>
          )}
        </div>
      </Section>

      {/* ── 生成结果（整行）── */}
      <Section
        no="04"
        title="生成结果"
        extra={
          suite && ['done', 'partial'].includes(suite.status) && (
            <button className="btn btn-sm" onClick={handleExport}>
              <DownloadOutlined /> 导出 ZIP
            </button>
          )
        }
      >
        {!suite ? (
          <div className="empty">生成后在此查看与导出</div>
        ) : (
          <>
            <div style={{ marginBottom: 8 }} className="hint">
              状态：<b style={{ color: suite.status === 'done' ? 'var(--green)' : suite.status === 'failed' ? 'var(--red)' : 'var(--primary)' }}>
                {suite.status === 'running' ? '生成中' : suite.status === 'done' ? '完成' : suite.status === 'partial' ? '部分失败' : suite.status === 'pending' ? '排队中' : '失败'}
              </b>
              {' '}· {PLATFORM_SPECS[suite.platform]?.label ?? suite.platform}
              {' '}· {PLATFORM_SPECS[suite.platform]?.lang ?? suite.lang}文案 · {suite.ratio}
              {' '}· 风格「{STYLE_SET_OPTIONS.find(s => s.value === suite.style_set)?.label}」
            </div>
            <div className="result-grid">
              {suite.images.map(img => (
                <div
                  key={img.type_id + img.name}
                  className={`result-cell ${img.status !== 'ok' ? 'fail' : ''}`}
                  title={img.error || img.name}
                  style={{ cursor: img.status === 'ok' ? 'zoom-in' : 'default' }}
                  onClick={() => img.status === 'ok' && setPreviewUrl(img.url)}
                >
                  {img.status === 'ok' ? (
                    <img src={img.url} referrerPolicy="no-referrer" />
                  ) : (
                    <div style={{ aspectRatio: suite.ratio === '3:4' ? '3/4' : '1', background: 'var(--card-soft)' }} />
                  )}
                  {img.status !== 'ok' && <span className="fail-tag">{img.status === 'failed' ? '✗' : '…'}</span>}
                  <div className="cap">{img.name}</div>
                </div>
              ))}
            </div>
            {suite.error && <div className="warn-box">{suite.error}</div>}
          </>
        )}
      </Section>

      {/* ── 图片放大预览 ── */}
      {previewUrl && (
        <div className="lightbox" onClick={() => setPreviewUrl(null)}>
          <img src={previewUrl} referrerPolicy="no-referrer" onClick={(e) => e.stopPropagation()} />
          <span className="lightbox-tip">点击任意处关闭</span>
        </div>
      )}
    </div>
  );
};

const Root: React.FC = () => (
  <ConfigProvider
    theme={{
      token: {
        colorPrimary: '#8b5cf6',
        colorLink: '#8b5cf6',
        borderRadius: 8,
        fontFamily: "Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif",
      },
    }}
  >
    <AntApp>
      <App />
    </AntApp>
  </ConfigProvider>
);

createRoot(document.getElementById('root')!).render(<Root />);