import {
  Ban,
  Check,
  ChevronDown,
  Film,
  ImageIcon,
  Lightbulb,
  ListChecks,
  Loader2,
  MessageCircle,
  Palette,
  Play,
  SlidersHorizontal,
  Sparkles,
  WandSparkles,
} from 'lucide-react';
import { toast } from 'sonner';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
import { useImageWorkspaceStore } from '@/stores/image-workspace';
import type {
  DesignCompilationIssue,
  DesignWorkspace,
} from '../../../shared/image-workspace';
import {
  projectYouthCreationCard,
  type YouthCreationCardModel,
} from './youth-form-projection';

export type YouthCreationCardProps = {
  workspace: DesignWorkspace;
  quoteBlockers: DesignCompilationIssue[];
  generationAvailable: boolean;
  onOpenFineTune: () => void;
  onFocusComposer: () => void;
};

function formatDuration(seconds: number): string {
  if (!Number.isFinite(seconds)) return `${seconds} 秒`;
  if (Number.isInteger(seconds)) return `${seconds} 秒`;
  return `${seconds.toFixed(1)} 秒`;
}

function MediumIcon({ medium }: { medium: 'image' | 'video' }) {
  return medium === 'video'
    ? <Film className="h-3.5 w-3.5" aria-hidden="true" />
    : <ImageIcon className="h-3.5 w-3.5" aria-hidden="true" />;
}

function Chip({ children }: { children: React.ReactNode }) {
  return (
    <span className="inline-flex min-h-8 items-center gap-1.5 rounded-full border border-border/70 bg-background px-2.5 py-1 text-xs font-medium text-foreground">
      {children}
    </span>
  );
}

function TagSection({
  title,
  items,
  icon,
  tone = 'default',
}: {
  title: string;
  items: string[];
  icon: React.ReactNode;
  tone?: 'default' | 'avoid';
}) {
  if (items.length === 0) return null;
  return (
    <section>
      <div className="flex items-center gap-2 text-xs font-semibold text-foreground">
        <span className={cn('text-brand', tone === 'avoid' && 'text-rose-600')}>
          {icon}
        </span>
        <h3>{title}</h3>
      </div>
      <ul className="mt-2 flex flex-wrap gap-2">
        {items.map((item, index) => (
          <li
            key={`${item}-${index}`}
            className={cn(
              'rounded-xl border px-2.5 py-1.5 text-xs leading-5',
              tone === 'avoid'
                ? 'border-rose-200/80 bg-rose-50/70 text-rose-900'
                : 'border-border/70 bg-background text-foreground',
            )}
          >
            {item}
          </li>
        ))}
      </ul>
    </section>
  );
}

function Readiness({ model }: { model: YouthCreationCardModel }) {
  return (
    <section
      data-testid="youth-creation-readiness"
      className={cn(
        'rounded-xl border px-3.5 py-3',
        model.phase === 'ready' || model.phase === 'result' || model.phase === 'confirming'
          ? 'border-brand/20 bg-brand/[0.045]'
          : model.phase === 'generating'
            ? 'border-sky-200 bg-sky-50/70'
            : 'border-border/70 bg-background',
      )}
    >
      <div className="flex items-start gap-2.5">
        <span className="mt-0.5 text-brand">
          {model.phase === 'generating'
            ? <Loader2 className="h-4 w-4 animate-spin" aria-hidden="true" />
            : model.phase === 'ready' || model.phase === 'result' || model.phase === 'confirming'
              ? <Check className="h-4 w-4" aria-hidden="true" />
              : <Lightbulb className="h-4 w-4" aria-hidden="true" />}
        </span>
        <div className="min-w-0 flex-1">
          <p className="text-sm font-medium text-foreground">{model.readinessMessage}</p>
          {model.blockers.length > 0 && (
            <ul className="mt-2 space-y-1 text-xs leading-5 text-muted-foreground">
              {model.blockers.map((blocker) => (
                <li key={`${blocker.code}-${blocker.path ?? ''}`}>{blocker.message}</li>
              ))}
            </ul>
          )}
        </div>
      </div>
    </section>
  );
}

function ReferenceSection({ model }: { model: YouthCreationCardModel }) {
  if (model.references.length === 0) return null;
  return (
    <section>
      <div className="flex items-center gap-2 text-xs font-semibold text-foreground">
        <ImageIcon className="h-3.5 w-3.5 text-brand" aria-hidden="true" />
        <h3>参考图片</h3>
      </div>
      <div className="mt-2 space-y-2">
        {model.references.map((reference, index) => (
          <article key={reference.id} className="rounded-xl border border-border/70 bg-background p-3">
            <div className="flex items-center gap-2">
              <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-brand/[0.08] text-brand">
                <ImageIcon className="h-4 w-4" aria-hidden="true" />
              </div>
              <div className="min-w-0">
                <p className="text-xs font-medium text-foreground">参考图 {index + 1}</p>
                <p className="text-[11px] text-muted-foreground">
                  {reference.asset
                    ? `${reference.asset.width} × ${reference.asset.height}`
                    : '图片正在同步'}
                </p>
              </div>
            </div>
            {(reference.preserve.length > 0
              || reference.adapt.length > 0
              || reference.doNotCopy.length > 0) && (
                <div className="mt-2.5 grid gap-2 text-xs leading-5 sm:grid-cols-3">
                  {reference.preserve.length > 0 && (
                    <div>
                      <p className="text-muted-foreground">最想保留</p>
                      <p className="mt-0.5 text-foreground">{reference.preserve.join('、')}</p>
                    </div>
                  )}
                  {reference.adapt.length > 0 && (
                    <div>
                      <p className="text-muted-foreground">可以改变</p>
                      <p className="mt-0.5 text-foreground">{reference.adapt.join('、')}</p>
                    </div>
                  )}
                  {reference.doNotCopy.length > 0 && (
                    <div>
                      <p className="text-muted-foreground">不要照着画</p>
                      <p className="mt-0.5 text-foreground">{reference.doNotCopy.join('、')}</p>
                    </div>
                  )}
                </div>
              )}
          </article>
        ))}
      </div>
    </section>
  );
}

function VideoSection({ model }: { model: YouthCreationCardModel }) {
  if (!model.video) return null;
  const { durationSeconds, pacing, endState, storyBeats } = model.video;
  return (
    <section>
      <div className="flex items-center gap-2 text-xs font-semibold text-foreground">
        <Film className="h-3.5 w-3.5 text-brand" aria-hidden="true" />
        <h3>视频安排</h3>
      </div>
      <div className="mt-2 grid gap-2 rounded-xl border border-border/70 bg-background p-3 text-xs sm:grid-cols-3">
        {durationSeconds !== null && (
          <div>
            <p className="text-muted-foreground">时长</p>
            <p className="mt-0.5 font-medium text-foreground">{formatDuration(durationSeconds)}</p>
          </div>
        )}
        {pacing && (
          <div>
            <p className="text-muted-foreground">节奏</p>
            <p className="mt-0.5 font-medium text-foreground">{pacing}</p>
          </div>
        )}
        {endState && (
          <div>
            <p className="text-muted-foreground">结尾</p>
            <p className="mt-0.5 font-medium text-foreground">{endState}</p>
          </div>
        )}
        {storyBeats.length > 0 && (
          <div className="sm:col-span-3">
            <p className="text-muted-foreground">画面顺序</p>
            <ol className="mt-1 space-y-1 text-foreground">
              {storyBeats.map((beat, index) => <li key={`${beat}-${index}`}>{index + 1}. {beat}</li>)}
            </ol>
          </div>
        )}
      </div>
    </section>
  );
}

function ActionFooter({
  model,
  generationAvailable,
  requesting,
  onFocusComposer,
  onOpenFineTune,
  onRequestQuote,
}: {
  model: YouthCreationCardModel;
  generationAvailable: boolean;
  requesting: boolean;
  onFocusComposer: () => void;
  onOpenFineTune: () => void;
  onRequestQuote: () => void;
}) {
  switch (model.phase) {
    case 'empty':
      return (
        <div className="flex flex-col gap-3 border-t border-border/60 pt-4 sm:flex-row sm:items-center sm:justify-between">
          <p className="text-xs leading-5 text-muted-foreground">先在对话里说说脑中的画面，不用一次想完整。</p>
          <Button type="button" className="min-h-11 rounded-xl" onClick={onFocusComposer}>
            <MessageCircle className="mr-2 h-4 w-4" aria-hidden="true" />
            开始描述
          </Button>
        </div>
      );
    case 'exploring':
      return (
        <div className="flex flex-col gap-3 border-t border-border/60 pt-4 sm:flex-row sm:items-center sm:justify-between">
          <p className="text-xs leading-5 text-muted-foreground">继续描述你想看到的画面，AI 会接着问一个关键问题。</p>
          <Button type="button" className="min-h-11 rounded-xl" onClick={onFocusComposer}>
            <MessageCircle className="mr-2 h-4 w-4" aria-hidden="true" />
            回到对话
          </Button>
        </div>
      );
    case 'ready':
      return (
        <div className="flex flex-col gap-3 border-t border-border/60 pt-4 sm:flex-row sm:items-center sm:justify-between">
          <p className="text-xs leading-5 text-muted-foreground">
            {generationAvailable ? '先看看制作方案，再决定要不要开始。' : '现在还不能开始制作，但你可以继续完善想法。'}
          </p>
          <Button
            type="button"
            className="min-h-11 rounded-xl"
            disabled={requesting}
            onClick={generationAvailable ? onRequestQuote : onFocusComposer}
          >
            {requesting
              ? <Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />
              : <WandSparkles className="mr-2 h-4 w-4" aria-hidden="true" />}
            {generationAvailable ? '看看制作方案' : '继续完善想法'}
          </Button>
        </div>
      );
    case 'confirming':
      return (
        <div className="flex flex-col gap-3 border-t border-border/60 pt-4 sm:flex-row sm:items-center sm:justify-between">
          <p className="text-xs leading-5 text-muted-foreground">方案准备好了，确认后就开始制作。</p>
          <Button type="button" variant="outline" className="min-h-11 rounded-xl" onClick={onOpenFineTune}>
            <SlidersHorizontal className="mr-2 h-4 w-4" aria-hidden="true" />
            继续调整
          </Button>
        </div>
      );
    case 'generating':
      return (
        <div className="flex flex-col gap-3 border-t border-border/60 pt-4 sm:flex-row sm:items-center sm:justify-between">
          <p className="text-xs leading-5 text-muted-foreground">作品做好后会出现在下面，先去做点别的吧。</p>
          <Button type="button" className="min-h-11 rounded-xl" disabled>
            <Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />
            正在制作
          </Button>
        </div>
      );
    case 'result':
      return (
        <div className="flex flex-col gap-3 border-t border-border/60 pt-4 sm:flex-row sm:items-center sm:justify-between">
          <p className="text-xs leading-5 text-muted-foreground">喜欢这个方向？可以再做一个版本。</p>
          <div className="flex flex-col gap-2 sm:flex-row">
            <Button type="button" variant="outline" className="min-h-11 rounded-xl" onClick={onOpenFineTune}>
              <SlidersHorizontal className="mr-2 h-4 w-4" aria-hidden="true" />
              继续调整
            </Button>
            <Button
              type="button"
              className="min-h-11 rounded-xl"
              disabled={requesting || !generationAvailable || !model.canRequestQuote}
              onClick={onRequestQuote}
            >
              {requesting
                ? <Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />
                : <Play className="mr-2 h-4 w-4" aria-hidden="true" />}
              {model.canRequestQuote ? '做一个新版本' : '制作方案已准备'}
            </Button>
          </div>
        </div>
      );
    default:
      return null;
  }
}

export function YouthCreationCard({
  workspace,
  quoteBlockers,
  generationAvailable,
  onOpenFineTune,
  onFocusComposer,
}: YouthCreationCardProps) {
  const requestQuote = useImageWorkspaceStore((state) => state.requestQuote);
  const pendingOperations = useImageWorkspaceStore((state) => state.pendingOperations);
  const model = projectYouthCreationCard(workspace, { quoteBlockers });
  const requesting = Object.values(pendingOperations).some(
    (operation) => operation.status === 'submitting' && operation.command.kind === 'request_quote',
  );

  const request = () => {
    if (!generationAvailable || requesting || !model.canRequestQuote) return;
    void requestQuote().catch(() => {
      toast.error('制作方案还没准备好，请稍后再试');
    });
  };
  const hasMoreDetails = model.mustInclude.length > 0
    || model.mustPreserve.length > 0
    || model.mustAvoid.length > 0
    || model.references.length > 0
    || model.video !== null;

  return (
    <section
      data-testid="youth-creation-card"
      aria-labelledby="youth-creation-card-title"
      className="rounded-2xl border border-border/70 bg-background p-4 shadow-sm sm:p-5"
    >
      <header className="flex items-start justify-between gap-3">
        <div className="min-w-0">
          <div className="flex items-center gap-2">
            <Sparkles className="h-4 w-4 shrink-0 text-brand" aria-hidden="true" />
            <h2 id="youth-creation-card-title" className="text-base font-semibold text-foreground">
              AI 听懂的想法
            </h2>
          </div>
          <p className="mt-1 text-xs leading-5 text-muted-foreground">
            会跟着聊天自动更新，不需要逐项填写。
          </p>
        </div>
        <Button
          type="button"
          variant="ghost"
          aria-label="手动调整（可选）"
          className="min-h-11 shrink-0 rounded-xl px-2.5 text-xs"
          onClick={onOpenFineTune}
        >
          <SlidersHorizontal className="mr-1.5 h-3.5 w-3.5" aria-hidden="true" />
          手动调整
        </Button>
      </header>

      <div className="mt-4 space-y-4">
        <Readiness model={model} />

        {model.summary && (
          <section>
            <div className="flex items-center gap-2 text-xs font-semibold text-foreground">
              <Lightbulb className="h-3.5 w-3.5 text-brand" aria-hidden="true" />
              <h3>目前听懂的是</h3>
            </div>
            <p className="mt-2 rounded-xl bg-surface-subtle/75 px-3 py-2.5 text-sm leading-6 text-foreground">
              {model.summary}
            </p>
          </section>
        )}

        {(model.medium || model.destination || model.style || model.delegatedSummary) && (
          <div className="flex flex-wrap gap-2" aria-label="创作选择">
            {model.medium && (
              <Chip>
                <MediumIcon medium={model.medium} />
                {model.medium === 'video' ? '视频' : '图片'}
              </Chip>
            )}
            {model.destination && (
              <>
                <Chip>{model.destination.label}</Chip>
                <Chip>{model.destination.aspectRatio}</Chip>
              </>
            )}
            {model.style && (
              <Chip>
                <Palette className="h-3.5 w-3.5 text-brand" aria-hidden="true" />
                {model.style.label}
              </Chip>
            )}
            {model.delegatedSummary && <Chip>{model.delegatedSummary}</Chip>}
          </div>
        )}

        {hasMoreDetails && (
          <details
            data-testid="youth-creation-details"
            className="group rounded-xl border border-border/65 bg-surface-subtle/35"
          >
            <summary className="flex min-h-11 cursor-pointer list-none items-center justify-between gap-3 rounded-xl px-3 text-xs font-medium text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/35 [&::-webkit-details-marker]:hidden">
              <span>查看画面细节 <span className="font-normal text-muted-foreground">（可选）</span></span>
              <ChevronDown className="h-4 w-4 text-muted-foreground transition-transform group-open:rotate-180" aria-hidden="true" />
            </summary>
            <div className="space-y-4 border-t border-border/60 px-3 py-4">
              <TagSection
                title="一定要有"
                items={model.mustInclude}
                icon={<ListChecks className="h-3.5 w-3.5" aria-hidden="true" />}
              />
              <TagSection
                title="想保留"
                items={model.mustPreserve}
                icon={<Check className="h-3.5 w-3.5" aria-hidden="true" />}
              />
              <TagSection
                title="不要出现"
                items={model.mustAvoid}
                icon={<Ban className="h-3.5 w-3.5" aria-hidden="true" />}
                tone="avoid"
              />
              <ReferenceSection model={model} />
              <VideoSection model={model} />
            </div>
          </details>
        )}

        <ActionFooter
          model={model}
          generationAvailable={generationAvailable}
          requesting={requesting}
          onFocusComposer={onFocusComposer}
          onOpenFineTune={onOpenFineTune}
          onRequestQuote={request}
        />
      </div>
    </section>
  );
}