'use client';

import { useState } from 'react';
import type { AssetPack, AssetTemplate, GenImage, GenSession, PackKind, ToyAsset } from '@/lib/types';
import { PACK_LABELS, PACK_ORDER, PACK_TEMPLATES, TEMPLATE_SLOT_SUMMARY, TEXT_TEMPLATES, VIDEO_TEMPLATES } from '@/lib/templates';

const PACK_DESCRIPTIONS: Record<PackKind, string> = {
  patent: '六面视图、45° 立体图、局部放大——外观专利素材',
  accessories: '配件六视图、连接结构、尺寸和组合关系——独立配件保护 / 打样',
  production: '尺寸、材料、颜色、拆件、包装——工厂报价 / 打样',
  marketing: '白底商品图、场景图、细节图、社媒图——新品宣发',
};

const PACK_ACCENT: Record<PackKind, { ring: string; chip: string; dot: string; bar: string; soft: string }> = {
  patent: {
    ring: 'ring-violet-400/30',
    chip: 'bg-violet-500/15 text-violet-200 border-violet-400/30',
    dot: 'bg-violet-400',
    bar: 'from-violet-400 to-indigo-400',
    soft: 'from-violet-500/10 to-transparent',
  },
  production: {
    ring: 'ring-amber-400/30',
    chip: 'bg-amber-500/15 text-amber-200 border-amber-400/30',
    dot: 'bg-amber-400',
    bar: 'from-amber-400 to-orange-400',
    soft: 'from-amber-500/10 to-transparent',
  },
  accessories: {
    ring: 'ring-sky-400/30',
    chip: 'bg-sky-500/15 text-sky-200 border-sky-400/30',
    dot: 'bg-sky-400',
    bar: 'from-sky-400 to-cyan-400',
    soft: 'from-sky-500/10 to-transparent',
  },
  marketing: {
    ring: 'ring-emerald-400/30',
    chip: 'bg-emerald-500/15 text-emerald-200 border-emerald-400/30',
    dot: 'bg-emerald-400',
    bar: 'from-emerald-400 to-teal-400',
    soft: 'from-emerald-500/10 to-transparent',
  },
};

const ASPECT_PX: Record<AssetTemplate['aspectRatio'], string> = {
  '1:1': '1024 × 1024',
  '3:4': '1024 × 1365',
  '4:5': '1024 × 1280',
  '9:16': '1080 × 1920',
  '16:9': '1920 × 1080',
  'long': '1024 × 3200',
};

function manifestUrl(sessionId: string, kind: PackKind, version: string) {
  return `/api/export/${sessionId}_${kind}_${version}_manifest.json`;
}

function AssetRow({
  template,
  asset,
  accent,
}: {
  template: AssetTemplate;
  asset: ToyAsset | undefined;
  accent: typeof PACK_ACCENT[PackKind];
}) {
  const [showPrompt, setShowPrompt] = useState(false);
  const ready = !!asset;
  return (
    <div className="grid grid-cols-[88px_1fr_120px] gap-4 p-3 rounded-2xl bg-white/[0.025] ring-1 ring-white/[0.05] hover:ring-white/[0.12] transition-all">
      <div className="relative aspect-square rounded-xl overflow-hidden bg-white/[0.035] ring-1 ring-white/[0.07]">
        {ready ? (
          <img src={asset!.url} alt={template.title} className="w-full h-full object-cover" />
        ) : (
          <div className="absolute inset-0 flex flex-col items-center justify-center text-[9px] text-white/30">
            <div className="text-white/40 font-mono">{template.view}</div>
            <div className="mt-1 px-1.5 py-0.5 rounded bg-white/[0.05] text-[8px]">{template.aspectRatio}</div>
          </div>
        )}
        {template.required && (
          <span className="absolute top-1 right-1 px-1 py-0 rounded text-[8px] font-semibold bg-violet-500/40 text-white border border-violet-300/40 backdrop-blur">
            必备
          </span>
        )}
      </div>

      <div className="min-w-0 space-y-1.5">
        <div className="flex items-center gap-2 flex-wrap">
          <span className="text-sm font-semibold text-white truncate">{template.title}</span>
          <span className={`chip ${accent.chip} text-[10px] py-0.5`}>{template.view}</span>
          {ready && (
            <span className="chip chip-live text-[10px] py-0.5">✓ {asset!.version}</span>
          )}
        </div>
        <p className="text-[11px] text-white/55 leading-relaxed line-clamp-2">{template.description}</p>
        <button
          onClick={() => setShowPrompt(s => !s)}
          className="text-[10px] text-white/40 hover:text-violet-300 transition-colors flex items-center gap-1"
        >
          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
            <path d={showPrompt ? 'M6 9l6 6 6-6' : 'M9 6l6 6-6 6'} strokeLinecap="round" />
          </svg>
          {showPrompt ? '收起 Prompt' : '查看 Prompt'}
        </button>
        {showPrompt && (
          <pre className="mt-1.5 p-2.5 text-[10px] text-white/65 bg-black/40 rounded-lg ring-1 ring-white/[0.08] font-mono leading-relaxed whitespace-pre-wrap break-all max-h-32 overflow-y-auto">
            {template.promptTemplate}
          </pre>
        )}
      </div>

      <div className="flex flex-col items-end justify-between gap-1.5 text-right">
        <div className="text-[10px] font-mono text-white/55">{ASPECT_PX[template.aspectRatio]}</div>
        <div className="text-[9px] text-white/30 uppercase tracking-wider">{template.aspectRatio}</div>
        <div className={`text-[10px] mt-auto ${ready ? 'text-emerald-300' : 'text-white/35'}`}>
          {ready ? 'Ready' : '待生成'}
        </div>
      </div>
    </div>
  );
}

function PackSection({
  kind,
  session,
  pack,
  isLoading,
  onGenerate,
}: {
  kind: PackKind;
  session: GenSession;
  primaryImage: GenImage;
  pack: AssetPack | undefined;
  isLoading: boolean;
  onGenerate: () => void;
}) {
  const accent = PACK_ACCENT[kind];
  const templates = PACK_TEMPLATES[kind];
  const generatedCount = pack?.assets.length ?? 0;
  const total = templates.length;
  const progressPct = (generatedCount / total) * 100;

  return (
    <section className="card p-5 space-y-4">
      <div className="flex items-start justify-between gap-4">
        <div className="flex items-start gap-3 min-w-0">
          <div className={`w-9 h-9 rounded-xl bg-gradient-to-br ${accent.bar} flex items-center justify-center text-white text-xs font-bold shrink-0`}>
            {kind === 'patent' ? 'P' : kind === 'accessories' ? 'A' : kind === 'production' ? 'F' : 'M'}
          </div>
          <div className="min-w-0">
            <div className="flex items-center gap-2">
              <h3 className="text-base font-semibold text-white">{PACK_LABELS[kind]}</h3>
              <span className="text-[11px] text-white/40">· {total} 张</span>
            </div>
            <p className="text-[11px] text-white/45 mt-0.5">{PACK_DESCRIPTIONS[kind]}</p>
          </div>
        </div>
        <div className="flex items-center gap-2 shrink-0">
          {pack && (
            <a
              href={manifestUrl(session.id, kind, pack.version)}
              className="inline-flex items-center gap-1 text-[10px] text-violet-300 hover:text-violet-200 transition-colors px-2 py-1 rounded-lg bg-white/[0.04] ring-1 ring-white/[0.08]"
            >
              <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                <path d="M12 4v12m0 0l-4-4m4 4l4-4M4 20h16" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
              manifest
            </a>
          )}
          <button
            onClick={onGenerate}
            disabled={isLoading}
            className={`${pack ? 'btn btn-outline' : 'btn btn-primary'} text-xs disabled:opacity-40 disabled:cursor-not-allowed`}
          >
            {isLoading ? (
              <>
                <svg width="12" height="12" viewBox="0 0 24 24" className="animate-spin" fill="none" stroke="currentColor" strokeWidth="2.5">
                  <path d="M12 2a10 10 0 0 1 10 10" strokeLinecap="round" />
                </svg>
                生成中
              </>
            ) : pack ? '重新生成本包' : `生成 ${total} 张`}
          </button>
        </div>
      </div>

      <div className="space-y-1.5">
        <div className="flex items-center justify-between text-[10px] text-white/40">
          <span>进度</span>
          <span className="font-mono">{generatedCount} / {total}</span>
        </div>
        <div className="h-1 rounded-full bg-white/[0.06] overflow-hidden">
          <div
            className={`h-full bg-gradient-to-r ${accent.bar} transition-all`}
            style={{ width: `${progressPct}%` }}
          />
        </div>
      </div>

      <div className="space-y-2">
        {templates.map(template => {
          const asset = pack?.assets.find(a => a.templateId === template.id);
          return (
            <AssetRow
              key={template.id}
              template={template}
              asset={asset}
              accent={accent}
            />
          );
        })}
      </div>
    </section>
  );
}

function VideoSection({
  videoLoading,
  primaryImage,
  onGenerateVideo,
}: {
  videoLoading: boolean;
  primaryImage: GenImage;
  onGenerateVideo: (image: GenImage, promptTemplate: string) => void;
}) {
  const [showPromptId, setShowPromptId] = useState<string | null>(null);
  return (
    <section className="card p-5 space-y-4">
      <div className="flex items-start justify-between gap-4">
        <div className="flex items-start gap-3">
          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-fuchsia-500 to-violet-500 flex items-center justify-center text-white text-xs font-bold">V</div>
          <div>
            <div className="flex items-center gap-2">
              <h3 className="text-base font-semibold text-white">Seedance 视频</h3>
              <span className="text-[11px] text-white/40">· {VIDEO_TEMPLATES.length} 个模板</span>
            </div>
            <p className="text-[11px] text-white/45 mt-0.5">异步任务 · 用当前主方案出宣发 / 展示短片</p>
          </div>
        </div>
        <span className="chip chip-violet">Seedance</span>
      </div>

      <div className="space-y-2">
        {VIDEO_TEMPLATES.map(template => {
          const open = showPromptId === template.id;
          return (
            <div key={template.id} className="grid grid-cols-[88px_1fr_120px] gap-4 p-3 rounded-2xl bg-white/[0.025] ring-1 ring-white/[0.05] hover:ring-white/[0.12] transition-all">
              <div className="aspect-square rounded-xl bg-gradient-to-br from-fuchsia-500/20 to-violet-500/20 ring-1 ring-fuchsia-400/20 flex items-center justify-center text-fuchsia-200 text-[10px] font-mono">
                video
              </div>
              <div className="min-w-0 space-y-1.5">
                <div className="flex items-center gap-2 flex-wrap">
                  <span className="text-sm font-semibold text-white truncate">{template.title}</span>
                  <span className="chip bg-fuchsia-500/15 text-fuchsia-200 border-fuchsia-400/30 text-[10px] py-0.5">
                    {template.duration}s
                  </span>
                  <span className="chip chip-neutral text-[10px] py-0.5">
                    {template.ratio}
                  </span>
                  <span className="chip chip-neutral text-[10px] py-0.5">
                    1080p
                  </span>
                </div>
                <p className="text-[11px] text-white/55 leading-relaxed line-clamp-2">{template.description}</p>
                <button
                  onClick={() => setShowPromptId(open ? null : template.id)}
                  className="text-[10px] text-white/40 hover:text-fuchsia-300 transition-colors flex items-center gap-1"
                >
                  <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                    <path d={open ? 'M6 9l6 6 6-6' : 'M9 6l6 6-6 6'} strokeLinecap="round" />
                  </svg>
                  {open ? '收起 Prompt' : '查看 Prompt'}
                </button>
                {open && (
                  <pre className="mt-1.5 p-2.5 text-[10px] text-white/65 bg-black/40 rounded-lg ring-1 ring-white/[0.08] font-mono leading-relaxed whitespace-pre-wrap break-all max-h-32 overflow-y-auto">
                    {template.promptTemplate}
                  </pre>
                )}
              </div>
              <div className="flex flex-col items-end justify-between gap-1.5">
                <div className="text-[10px] text-white/30 uppercase tracking-wider">video</div>
                <button
                  onClick={() => onGenerateVideo(primaryImage, template.promptTemplate)}
                  disabled={videoLoading}
                  className="btn btn-primary text-[11px] px-3 py-1.5 disabled:opacity-40 disabled:cursor-not-allowed"
                >
                  {videoLoading ? '提交中' : '提交'}
                </button>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

function SlotOverview() {
  const stats = [
    { label: '总预留位', value: TEMPLATE_SLOT_SUMMARY.totalReservedSlotCount },
    { label: '图片/脚本资产位', value: TEMPLATE_SLOT_SUMMARY.imageAssetCount },
    { label: '设计说明文字位', value: TEMPLATE_SLOT_SUMMARY.textAssetCount },
    { label: '必备图位', value: TEMPLATE_SLOT_SUMMARY.requiredImageAssetCount },
    { label: 'Seedance 视频任务', value: TEMPLATE_SLOT_SUMMARY.videoTaskCount },
  ];

  return (
    <div className="grid grid-cols-5 gap-2">
      {stats.map(item => (
        <div key={item.label} className="rounded-2xl bg-white/[0.035] ring-1 ring-white/[0.08] p-3">
          <div className="text-lg font-semibold text-white font-mono">{item.value}</div>
          <div className="mt-1 text-[10px] text-white/40">{item.label}</div>
        </div>
      ))}
    </div>
  );
}

function TextTemplateSection() {
  const [showPromptId, setShowPromptId] = useState<string | null>(null);

  return (
    <section className="card p-5 space-y-4">
      <div className="flex items-start justify-between gap-4">
        <div className="flex items-start gap-3">
          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-sky-500 to-cyan-400 flex items-center justify-center text-white text-xs font-bold">T</div>
          <div>
            <div className="flex items-center gap-2">
              <h3 className="text-base font-semibold text-white">设计说明文字</h3>
              <span className="text-[11px] text-white/40">· {TEXT_TEMPLATES.length} 个文案位</span>
            </div>
            <p className="text-[11px] text-white/45 mt-0.5">专利说明、工厂打样说明、宣发文案、视频脚本文字包</p>
          </div>
        </div>
        <span className="chip bg-sky-500/15 text-sky-200 border-sky-400/30">GPT Text</span>
      </div>

      <div className="space-y-2">
        {TEXT_TEMPLATES.map(template => {
          const open = showPromptId === template.id;
          return (
            <div key={template.id} className="grid grid-cols-[88px_1fr_120px] gap-4 p-3 rounded-2xl bg-white/[0.025] ring-1 ring-white/[0.05] hover:ring-white/[0.12] transition-all">
              <div className="aspect-square rounded-xl bg-gradient-to-br from-sky-500/20 to-cyan-500/20 ring-1 ring-sky-400/20 flex flex-col items-center justify-center text-sky-200 text-[10px] font-mono">
                <span>text</span>
                {template.required && <span className="mt-1 text-[8px] text-white/70">required</span>}
              </div>
              <div className="min-w-0 space-y-1.5">
                <div className="flex items-center gap-2 flex-wrap">
                  <span className="text-sm font-semibold text-white truncate">{template.title}</span>
                  <span className="chip bg-sky-500/15 text-sky-200 border-sky-400/30 text-[10px] py-0.5">{template.kind}</span>
                  <span className="chip chip-neutral text-[10px] py-0.5">{template.outputFormat}</span>
                  {template.required && <span className="chip chip-live text-[10px] py-0.5">必备</span>}
                </div>
                <p className="text-[11px] text-white/55 leading-relaxed line-clamp-2">{template.description}</p>
                <button
                  onClick={() => setShowPromptId(open ? null : template.id)}
                  className="text-[10px] text-white/40 hover:text-sky-300 transition-colors flex items-center gap-1"
                >
                  <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                    <path d={open ? 'M6 9l6 6 6-6' : 'M9 6l6 6-6 6'} strokeLinecap="round" />
                  </svg>
                  {open ? '收起 Prompt' : '查看 Prompt'}
                </button>
                {open && (
                  <pre className="mt-1.5 p-2.5 text-[10px] text-white/65 bg-black/40 rounded-lg ring-1 ring-white/[0.08] font-mono leading-relaxed whitespace-pre-wrap break-all max-h-32 overflow-y-auto">
                    {template.promptTemplate}
                  </pre>
                )}
              </div>
              <div className="flex flex-col items-end justify-between gap-1.5 text-right">
                <div className="text-[10px] font-mono text-white/55">{template.filenamePart}</div>
                <div className="text-[9px] text-white/30 uppercase tracking-wider">{template.outputFormat}</div>
                <div className="text-[10px] text-white/35">待生成</div>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

export default function PackPanel({
  session,
  loadingKind,
  allLoading,
  characterLoading,
  videoLoading,
  onGenerate,
  onGenerateAll,
  onLockCharacter,
  onGenerateVideo,
}: {
  session: GenSession;
  loadingKind: PackKind | null;
  allLoading: boolean;
  characterLoading: boolean;
  videoLoading: boolean;
  onGenerate: (image: GenImage, kind: PackKind) => void;
  onGenerateAll: (image: GenImage) => void;
  onLockCharacter: (image: GenImage) => void;
  onGenerateVideo: (image: GenImage, prompt: string) => void;
}) {
  const selectedImages = session.images.filter(image => image.status === 'selected');
  const primaryImage = selectedImages[0] ?? null;
  const packs = session.packs ?? [];

  if (!primaryImage) {
    return (
      <section className="card p-6">
        <div className="flex items-start gap-4">
          <div className="w-9 h-9 rounded-xl bg-white/[0.05] border border-white/[0.08] flex items-center justify-center text-white/40 text-sm">⌗</div>
          <div>
            <span className="section-eyebrow">Step · 03 · Lock Character</span>
            <h2 className="mt-2 text-sm font-semibold text-white">下一步：资产清单</h2>
            <p className="mt-1 text-[11px] text-white/45 leading-relaxed">
              先在上方九宫格选中一个主方案，下面会展开完整预设资产位（专利 / 生产 / 宣发 / 视频）。
            </p>
          </div>
        </div>
      </section>
    );
  }

  return (
    <div className="space-y-6">
      {/* Step 03 Header */}
      <section className="card p-6 space-y-5">
        <div className="flex items-start justify-between gap-4">
          <div>
            <span className="section-eyebrow">Step · 03 · Lock & Generate</span>
            <h2 className="mt-2 text-lg font-semibold text-white">角色锁定 & 资产清单</h2>
            <p className="mt-1 text-[11px] text-white/45 leading-relaxed max-w-[480px]">
              以第一个选中图作为主方案。锁定角色设定后，下方按类型分组展示所有预设资产——每项都已固化标题、尺寸、解释和 Prompt，直接选哪一包就生成哪一包。
            </p>
          </div>
          <div className="relative w-20 h-20 rounded-2xl overflow-hidden ring-1 ring-white/15 shrink-0 shadow-glow-violet">
            <img src={primaryImage.url} alt="selected source" className="w-full h-full object-cover" />
            <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
            <div className="absolute bottom-1 left-1 right-1 text-[9px] font-semibold text-white/90 uppercase tracking-wider truncate">主方案</div>
          </div>
        </div>

        <div className="flex flex-wrap gap-2">
          <button
            onClick={() => onLockCharacter(primaryImage)}
            disabled={characterLoading || !!loadingKind || allLoading}
            className="btn btn-glass text-xs disabled:opacity-40 disabled:cursor-not-allowed"
          >
            {characterLoading ? (
              <>
                <svg width="12" height="12" viewBox="0 0 24 24" className="animate-spin" fill="none" stroke="currentColor" strokeWidth="2.5">
                  <path d="M12 2a10 10 0 0 1 10 10" strokeLinecap="round" />
                </svg>
                锁定中
              </>
            ) : session.characterSpec ? '刷新角色设定' : '锁定角色设定'}
          </button>
          <button
            onClick={() => onGenerateAll(primaryImage)}
            disabled={allLoading || !!loadingKind || characterLoading}
            className="btn btn-primary text-xs disabled:opacity-40 disabled:cursor-not-allowed"
          >
            {allLoading ? (
              <>
                <svg width="12" height="12" viewBox="0 0 24 24" className="animate-spin" fill="none" stroke="currentColor" strokeWidth="2.5">
                  <path d="M12 2a10 10 0 0 1 10 10" strokeLinecap="round" />
                </svg>
                全量生成中
              </>
            ) : '✨ 一键三包 ·  ' + (PACK_TEMPLATES.patent.length + PACK_TEMPLATES.production.length + PACK_TEMPLATES.marketing.length) + ' 张'}
          </button>
        </div>

        <SlotOverview />

        {session.characterSpec && (
          <div className="card-2 p-4">
            <div className="flex items-center justify-between gap-3 mb-3">
              <div>
                <div className="text-sm font-semibold text-white">{session.characterSpec.name}</div>
                <div className="text-[11px] text-white/55 mt-1 line-clamp-2 max-w-[480px]">{session.characterSpec.oneLiner}</div>
              </div>
              <span className="chip chip-violet shrink-0">CharacterSpec · v1</span>
            </div>
            <div className="divider-line mb-3" />
            <div className="grid grid-cols-2 gap-x-4 gap-y-1.5 text-[11px]">
              <div className="flex gap-2"><span className="text-white/40 w-12">形态</span><span className="text-white/85">{session.characterSpec.speciesShape}</span></div>
              <div className="flex gap-2"><span className="text-white/40 w-12">比例</span><span className="text-white/85">{session.characterSpec.bodyRatio}</span></div>
              <div className="flex gap-2"><span className="text-white/40 w-12">配色</span><span className="text-white/85">{session.characterSpec.colorPalette.join('、')}</span></div>
              <div className="flex gap-2"><span className="text-white/40 w-12">材料</span><span className="text-white/85">{session.characterSpec.materials.join('、')}</span></div>
            </div>
          </div>
        )}
      </section>

      {/* Pack Sections */}
      {PACK_ORDER.map(kind => {
        const pack = packs.find(p => p.kind === kind && p.sourceImageId === primaryImage.id);
        return (
          <PackSection
            key={kind}
            kind={kind}
            session={session}
            primaryImage={primaryImage}
            pack={pack}
            isLoading={loadingKind === kind}
            onGenerate={() => onGenerate(primaryImage, kind)}
          />
        );
      })}

      <TextTemplateSection />

      {/* Video Section */}
      <VideoSection
        videoLoading={videoLoading}
        primaryImage={primaryImage}
        onGenerateVideo={onGenerateVideo}
      />
    </div>
  );
}