'use client';

import { useCallback, useEffect, useState } from 'react';
import PromptPanel from '@/components/PromptPanel';
import ResultGrid from '@/components/ResultGrid';
import Sidebar from '@/components/Sidebar';
import PackPanel from '@/components/PackPanel';
import type {
  GenImage,
  GenSession,
  GenerateAllPacksResponse,
  GeneratePackResponse,
  GenerateResponse,
  LockCharacterResponse,
  PackKind,
  VideoGenerationResponse,
} from '@/lib/types';

export default function Home() {
  const [sessions, setSessions] = useState<GenSession[]>([]);
  const [current, setCurrent] = useState<GenSession | null>(null);
  const [loading, setLoading] = useState(false);
  const [loadingKind, setLoadingKind] = useState<PackKind | null>(null);
  const [allLoading, setAllLoading] = useState(false);
  const [characterLoading, setCharacterLoading] = useState(false);
  const [videoLoading, setVideoLoading] = useState(false);
  const [provider, setProvider] = useState<string>('?');
  const [sidebarOpen, setSidebarOpen] = useState(true);

  const refreshSessions = useCallback(async () => {
    const r = await fetch('/api/sessions');
    const d = await r.json();
    setSessions(d.sessions);
    return d.sessions as GenSession[];
  }, []);

  useEffect(() => { refreshSessions(); }, [refreshSessions]);

  async function handleGenerate(opts: { prompt: string; refImages: string[]; count: number; style?: string }) {
    setLoading(true);
    try {
      const r = await fetch('/api/generate', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(opts),
      });
      if (!r.ok) {
        alert('生成失败：' + (await r.text()));
        return;
      }
      const d: GenerateResponse = await r.json();
      setProvider(d.provider);
      const all = await refreshSessions();
      const s = all.find(x => x.id === d.sessionId) ?? null;
      setCurrent(s);
    } finally {
      setLoading(false);
    }
  }

  async function handleAction(imageId: string, action: 'select' | 'reject' | 'reset') {
    if (!current) return;
    const r = await fetch('/api/select', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ sessionId: current.id, imageId, action }),
    });
    if (!r.ok) return;
    const d: { image: GenImage } = await r.json();
    setCurrent(prev => prev ? {
      ...prev,
      images: prev.images.map(i => i.id === imageId ? d.image : i),
    } : prev);
    refreshSessions();
  }

  async function handleGeneratePack(image: GenImage, kind: PackKind) {
    if (!current || loadingKind) return;
    setLoadingKind(kind);
    try {
      const r = await fetch('/api/packs/generate', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ sessionId: current.id, imageId: image.id, kind }),
      });
      if (!r.ok) {
        alert('素材包生成失败：' + (await r.text()));
        return;
      }
      const d: GeneratePackResponse = await r.json();
      setProvider(d.provider);
      const all = await refreshSessions();
      const updated = all.find(x => x.id === current.id) ?? null;
      setCurrent(updated);
    } finally {
      setLoadingKind(null);
    }
  }

  async function reloadCurrent(sessionId: string) {
    const all = await refreshSessions();
    const updated = all.find(x => x.id === sessionId) ?? null;
    setCurrent(updated);
    return updated;
  }

  async function handleLockCharacter(image: GenImage) {
    if (!current || characterLoading) return;
    setCharacterLoading(true);
    try {
      const r = await fetch('/api/character/lock', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ sessionId: current.id, imageId: image.id, force: true }),
      });
      if (!r.ok) {
        alert('角色锁定失败：' + (await r.text()));
        return;
      }
      const d: LockCharacterResponse = await r.json();
      setProvider(d.provider);
      await reloadCurrent(current.id);
    } finally {
      setCharacterLoading(false);
    }
  }

  async function handleGenerateAll(image: GenImage) {
    if (!current || allLoading) return;
    setAllLoading(true);
    try {
      const r = await fetch('/api/packs/generate-all', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ sessionId: current.id, imageId: image.id }),
      });
      if (!r.ok) {
        alert('完整三包生成失败：' + (await r.text()));
        return;
      }
      const d: GenerateAllPacksResponse = await r.json();
      setProvider(d.provider);
      await reloadCurrent(current.id);
    } finally {
      setAllLoading(false);
    }
  }

  async function handleGenerateVideo(image: GenImage, promptTemplate: string) {
    if (!current || videoLoading) return;
    setVideoLoading(true);
    try {
      const character = current.characterSpec
        ? `${current.characterSpec.name}，${current.characterSpec.oneLiner}`
        : current.prompt;
      const r = await fetch('/api/video/generate', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          prompt: promptTemplate.replace('{character}', character),
          imageUrl: image.url,
          duration: 6,
          ratio: '16:9',
          resolution: '1080p',
        }),
      });
      if (!r.ok) {
        alert('Seedance 视频提交失败：' + (await r.text()));
        return;
      }
      const d: VideoGenerationResponse = await r.json();
      alert(`Seedance 任务已提交：${d.taskId ?? d.status}`);
    } finally {
      setVideoLoading(false);
    }
  }

  return (
    <div className="flex h-screen bg-[#FAFAFA]">
      <Sidebar
        open={sidebarOpen}
        onToggle={() => setSidebarOpen(v => !v)}
        sessions={sessions}
        currentId={current?.id ?? null}
        onPick={id => setCurrent(sessions.find(s => s.id === id) ?? null)}
        onNew={() => setCurrent(null)}
      />
      <main className="flex-1 overflow-y-auto">
        <div className="mx-auto max-w-[1180px] px-10 py-10">
          <header className="flex items-start justify-between mb-10">
            <div>
              <h1 className="text-[26px] font-semibold tracking-tight text-zinc-900 leading-tight">
                AI 玩具专利生成工作流
              </h1>
              <p className="text-sm text-zinc-500 mt-1.5">
                批量出意向 → 快筛 → 多角度尺寸 → 喂专利
              </p>
            </div>
            <div className="flex items-center gap-2 pt-1">
              <span className={provider === 'gpt' ? 'chip chip-live' : 'chip chip-mock'}>
                <span className={`w-1.5 h-1.5 rounded-full ${provider === 'gpt' ? 'bg-emerald-500' : 'bg-amber-500'}`} />
                {provider === 'gpt' ? 'GPT · 最高规格' : provider === 'mock' ? 'Mock · 占位图' : provider}
              </span>
            </div>
          </header>

          <div className="space-y-8">
            <PromptPanel onGenerate={handleGenerate} loading={loading} />
            {current && (
              <section className="space-y-4">
                <div className="flex items-end justify-between">
                  <div>
                    <h2 className="text-sm font-medium text-zinc-900">本次生成</h2>
                    <p className="text-xs text-zinc-500 mt-0.5">
                      {new Date(current.createdAt).toLocaleString('zh-CN')}
                    </p>
                  </div>
                  <code className="text-[11px] text-zinc-400 font-mono">{current.id}</code>
                </div>
                <ResultGrid images={current.images} onAction={handleAction} />
                <PackPanel
                  session={current}
                  loadingKind={loadingKind}
                  allLoading={allLoading}
                  characterLoading={characterLoading}
                  videoLoading={videoLoading}
                  onGenerate={handleGeneratePack}
                  onGenerateAll={handleGenerateAll}
                  onLockCharacter={handleLockCharacter}
                  onGenerateVideo={handleGenerateVideo}
                />
              </section>
            )}
          </div>
        </div>
      </main>
    </div>
  );
}
