import { useEffect, useMemo, useRef, useState } from 'react';
import {
  AlertTriangle,
  Check,
  Clock3,
  Download,
  Film,
  ImageIcon,
  Loader2,
  RefreshCw,
  Upload,
  WandSparkles,
} from 'lucide-react';
import { toast } from 'sonner';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
  resolveImageWorkspaceAssetUrl,
  saveImageWorkspaceAsset,
  uploadImageWorkspaceAsset,
} from '@/lib/image-workspace';
import { cn } from '@/lib/utils';
import { useImageWorkspaceStore } from '@/stores/image-workspace';
import type {
  DesignAsset,
  DesignGenerationTask,
  DesignWorkspace,
} from '../../../shared/image-workspace';
import {
  youthCompilationIssueMessage,
  youthTaskIssueMessage,
} from './youth-issue-copy';

const TASK_STATUS_LABELS: Record<DesignGenerationTask['status'], string> = {
  queued: '正在准备',
  running: '正在制作',
  succeeded: '完成了',
  failed: '未完成',
  cancelled: '已取消',
};

const TASK_STAGE_LABELS: Record<DesignGenerationTask['progress']['stage'], string> = {
  queued: '正在准备画面',
  preparing: '正在准备画面',
  submitting: '正在准备画面',
  generating: '正在制作',
  composing: '正在制作',
  validating: '正在检查结果',
  finalizing: '正在检查结果',
  completed: '完成了',
  failed: '这次没有完成',
  cancelled: '已取消',
};

function formatExpiry(value: string): string {
  const timestamp = Date.parse(value);
  if (!Number.isFinite(timestamp)) return value;
  return new Date(timestamp).toLocaleString([], {
    month: 'numeric',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
  });
}

function AssetPreview({ asset }: { asset: DesignAsset }) {
  const [resolution, setResolution] = useState<{
    contentPath: string;
    source: string | null;
    failed: boolean;
  }>(() => ({ contentPath: asset.contentPath, source: null, failed: false }));
  const currentResolution = resolution.contentPath === asset.contentPath
    ? resolution
    : { contentPath: asset.contentPath, source: null, failed: false };

  useEffect(() => {
    let active = true;
    void resolveImageWorkspaceAssetUrl(asset.contentPath)
      .then((url) => {
        if (active) setResolution({ contentPath: asset.contentPath, source: url, failed: false });
      })
      .catch(() => {
        if (active) setResolution({ contentPath: asset.contentPath, source: null, failed: true });
      });
    return () => {
      active = false;
    };
  }, [asset.contentPath]);

  if (!currentResolution.source || currentResolution.failed) {
    return (
      <div className="flex aspect-square items-center justify-center bg-surface-subtle text-muted-foreground">
        {asset.mediaType === 'video'
          ? <Film className="h-6 w-6" />
          : <ImageIcon className="h-6 w-6" />}
      </div>
    );
  }
  if (asset.mediaType === 'video') {
    return (
      <video
        src={currentResolution.source}
        className="aspect-square w-full bg-surface-subtle object-cover"
        controls
        preload="metadata"
      />
    );
  }
  return (
    <img
      src={currentResolution.source}
      alt={asset.role === 'uploaded' ? '我上传的图片' : 'AI 完成的作品'}
      className="aspect-square w-full bg-surface-subtle object-cover"
      loading="lazy"
    />
  );
}

export function DesignQuotePanel({ workspace }: { workspace: DesignWorkspace }) {
  const requestQuote = useImageWorkspaceStore((state) => state.requestQuote);
  const confirmGeneration = useImageWorkspaceStore((state) => state.confirmGeneration);
  const quoteBlockers = useImageWorkspaceStore((state) => state.quoteBlockers);
  const pendingOperations = useImageWorkspaceStore((state) => state.pendingOperations);
  const offeredQuotes = workspace.form.activeQuotes.filter((quote) => quote.status === 'offered');
  const quote = offeredQuotes[0] ?? null;
  const requesting = Object.values(pendingOperations).some(
    (operation) => operation.status === 'submitting' && operation.command.kind === 'request_quote',
  );
  const confirming = Object.values(pendingOperations).some(
    (operation) => operation.status === 'submitting'
      && operation.command.kind === 'confirm_generation',
  );

  if (!quote) {
    return (
      <section className="rounded-2xl border border-brand/20 bg-brand/[0.035] p-4">
        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
          <div className="max-w-xl">
            <div className="flex items-center gap-2">
              <WandSparkles className="h-4 w-4 text-brand" />
              <h3 className="text-sm font-semibold text-foreground">看看制作方案</h3>
            </div>
            <p className="mt-1.5 text-xs leading-5 text-muted-foreground">
              我们会先告诉你要用多少设计点，确认后才开始制作。
            </p>
          </div>
          <Button
            type="button"
            className="min-h-11 shrink-0 rounded-xl"
            disabled={requesting}
            onClick={() => {
              void requestQuote().catch(() => {
                toast.error('制作方案还没准备好，请稍后再试');
              });
            }}
          >
            {requesting
              ? <Loader2 className="mr-2 h-4 w-4 animate-spin" />
              : <WandSparkles className="mr-2 h-4 w-4" />}
            准备制作方案
          </Button>
        </div>
        {quoteBlockers.length > 0 && (
          <div className="mt-4 rounded-xl border border-destructive/20 bg-destructive/[0.04] p-3">
            <p className="text-xs font-medium text-destructive">开始前还需要</p>
            <ul className="mt-2 space-y-1.5 text-xs leading-5 text-foreground">
              {quoteBlockers.map((blocker) => (
                <li key={`${blocker.code}-${blocker.path ?? ''}`}>
                  {youthCompilationIssueMessage(blocker)}
                </li>
              ))}
            </ul>
          </div>
        )}
      </section>
    );
  }

  return (
    <section
      id="design-offered-quote"
      data-testid="design-offered-quote"
      className="rounded-2xl border border-brand/25 bg-background p-4 shadow-sm"
    >
      <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
        <div>
          <div className="flex flex-wrap items-center gap-2">
            <h3 className="text-sm font-semibold text-foreground">制作方案准备好了</h3>
          </div>
          <p className="mt-1.5 text-xs leading-5 text-muted-foreground">
            开始后会按现在的想法制作；如果再改想法，需要重新准备方案。
          </p>
        </div>
        <div className="text-left sm:text-right">
          <p className="text-2xl font-semibold tabular-nums text-foreground">
            {quote.quotedDesignPoints}
          </p>
          <p className="text-xs text-muted-foreground">需要的设计点</p>
        </div>
      </div>

      <div className="mt-4 grid gap-3 rounded-xl bg-surface-subtle/75 p-3 sm:grid-cols-3">
        <div>
          <p className="text-[11px] text-muted-foreground">作品形状</p>
          <p className="mt-1 text-sm font-medium text-foreground">{quote.outputSummary.aspectRatio}</p>
        </div>
        <div>
          <p className="text-[11px] text-muted-foreground">作品数量</p>
          <p className="mt-1 text-sm font-medium text-foreground">{quote.outputSummary.outputCount} 个</p>
        </div>
        <div>
          <p className="text-[11px] text-muted-foreground">方案保留到</p>
          <p className="mt-1 text-sm font-medium text-foreground">{formatExpiry(quote.expiresAt)}</p>
        </div>
      </div>

      {quote.warnings.length > 0 && (
        <div className="mt-3 space-y-1.5 rounded-xl border border-amber-200 bg-amber-50/60 p-3 text-xs leading-5 text-amber-900">
          {quote.warnings.map((warning) => (
            <p key={`${warning.code}-${warning.path ?? ''}`} className="flex items-start gap-2">
              <AlertTriangle className="mt-0.5 h-3.5 w-3.5 shrink-0" />
              {youthCompilationIssueMessage(warning)}
            </p>
          ))}
        </div>
      )}

      <div className="mt-4 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
        <p className="text-xs text-muted-foreground">
          开始后可以离开这个页面，作品会继续制作。
        </p>
        <Button
          type="button"
          className="min-h-11 shrink-0 rounded-xl"
          disabled={confirming}
          onClick={() => {
            void confirmGeneration(quote.quoteId).catch(() => {
              toast.error('这次没有开始制作，请稍后再试');
            });
          }}
        >
          {confirming
            ? <Loader2 className="mr-2 h-4 w-4 animate-spin" />
            : <Check className="mr-2 h-4 w-4" />}
          花 {quote.quotedDesignPoints} 设计点开始制作
        </Button>
      </div>
    </section>
  );
}

export function DesignPendingOperationsPanel() {
  const pendingOperations = useImageWorkspaceStore((state) => state.pendingOperations);
  const retryOperation = useImageWorkspaceStore((state) => state.retryOperation);
  const unknown = Object.values(pendingOperations).filter((operation) => operation.status === 'unknown');
  if (unknown.length === 0) return null;
  return (
    <section className="rounded-2xl border border-amber-200 bg-amber-50/55 p-4">
      <div className="flex items-start gap-2.5">
        <Clock3 className="mt-0.5 h-4 w-4 shrink-0 text-amber-700" />
        <div className="min-w-0 flex-1">
          <h3 className="text-sm font-semibold text-amber-950">还在确认刚才的操作</h3>
          <p className="mt-1 text-xs leading-5 text-amber-900/80">
            可以放心查看原来的结果，不会重复制作或重复扣费。
          </p>
          <div className="mt-3 space-y-2">
            {unknown.map((operation) => (
              <div key={operation.id} className="flex items-center justify-between gap-3 rounded-xl bg-background/80 px-3 py-2">
                <div className="min-w-0">
                  <p className="truncate text-xs font-medium text-foreground">{operation.label}</p>
                  <p className="mt-0.5 text-[11px] text-muted-foreground">网络可能刚刚中断</p>
                </div>
                <Button
                  type="button"
                  variant="outline"
                  size="sm"
                  className="min-h-11 shrink-0 rounded-xl"
                  onClick={() => {
                    void retryOperation(operation.id).catch(() => {
                      toast.error('暂时没能查到结果，请稍后再试');
                    });
                  }}
                >
                  <RefreshCw className="mr-1 h-3.5 w-3.5" />
                  查看原来的结果
                </Button>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

export function DesignTaskPanel({ tasks }: { tasks: DesignGenerationTask[] }) {
  if (tasks.length === 0) return null;
  return (
    <section className="space-y-3">
      <div>
        <h3 className="text-sm font-semibold text-foreground">作品进度</h3>
        <p className="mt-1 text-xs text-muted-foreground">关闭页面也没关系，作品会继续制作。</p>
      </div>
      <div className="grid gap-3 lg:grid-cols-2">
        {tasks.map((task) => {
          const active = task.status === 'queued' || task.status === 'running';
          return (
            <article key={task.taskId} className="rounded-2xl border border-border/70 bg-background p-4">
              <div className="flex items-start justify-between gap-3">
                <div>
                  <div className="flex items-center gap-2">
                    {task.medium === 'video'
                      ? <Film className="h-4 w-4 text-brand" />
                      : <ImageIcon className="h-4 w-4 text-brand" />}
                    <h4 className="text-sm font-medium text-foreground">
                      {task.medium === 'video' ? '我的视频' : '我的图片'}
                    </h4>
                  </div>
                  <p className="mt-1 text-[11px] text-muted-foreground">
                    {task.outputSummary.aspectRatio} · {task.outputSummary.outputCount} 个作品
                  </p>
                </div>
                <Badge
                  variant={task.status === 'succeeded'
                    ? 'success'
                    : task.status === 'failed'
                      ? 'destructive'
                      : active
                        ? 'warning'
                        : 'secondary'}
                >
                  {TASK_STATUS_LABELS[task.status]}
                </Badge>
              </div>

              <div className="mt-4 flex items-center justify-between rounded-xl bg-surface-subtle/75 px-3 py-2.5">
                <span className="text-xs text-muted-foreground">{TASK_STAGE_LABELS[task.progress.stage]}</span>
                <span className="text-xs tabular-nums text-foreground">
                  {task.progress.completedRequiredSteps}/{task.progress.totalRequiredSteps}
                </span>
              </div>

              {task.executionHealth !== 'normal' && (
                <p className="mt-3 rounded-xl bg-amber-50/70 p-3 text-xs leading-5 text-amber-950">
                  平台正在处理，不会重复制作或重复扣费。
                </p>
              )}

              {task.issues.length > 0 && (
                <div className="mt-3 space-y-1 rounded-xl bg-destructive/[0.04] p-3 text-xs leading-5 text-destructive">
                  {task.issues.map((issue) => (
                    <p key={issue.code}>{youthTaskIssueMessage(issue)}</p>
                  ))}
                </div>
              )}
            </article>
          );
        })}
      </div>
    </section>
  );
}

export function DesignAssetsPanel({ workspace }: { workspace: DesignWorkspace }) {
  const refreshWorkspace = useImageWorkspaceStore((state) => state.refreshWorkspace);
  const inputRef = useRef<HTMLInputElement>(null);
  const [uploading, setUploading] = useState(false);
  const assets = useMemo(
    () => [...workspace.assets].sort((left, right) => Date.parse(right.createdAt) - Date.parse(left.createdAt)),
    [workspace.assets],
  );

  const upload = async (file: File) => {
    setUploading(true);
    try {
      await uploadImageWorkspaceAsset(workspace.workspace.workspaceId, file);
      await refreshWorkspace();
      toast.success('图片已上传');
    } catch {
      toast.error('图片没有上传成功，请再试一次');
    } finally {
      setUploading(false);
      if (inputRef.current) inputRef.current.value = '';
    }
  };

  return (
    <section className="space-y-3">
      <div className="flex items-center justify-between gap-3">
        <div>
          <h3 className="text-sm font-semibold text-foreground">我的图片和作品</h3>
          <p className="mt-1 text-xs text-muted-foreground">上传图片后，可以告诉 AI 想保留和改变什么。</p>
        </div>
        <Button
          type="button"
          variant="outline"
          size="sm"
          className="min-h-11 rounded-xl"
          disabled={uploading}
          onClick={() => inputRef.current?.click()}
        >
          {uploading
            ? <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />
            : <Upload className="mr-1.5 h-3.5 w-3.5" />}
          上传图片
        </Button>
        <input
          ref={inputRef}
          type="file"
          accept="image/jpeg,image/png,image/webp"
          className="hidden"
          onChange={(event) => {
            const file = event.target.files?.[0];
            if (file) void upload(file);
          }}
        />
      </div>

      {assets.length === 0 ? (
        <button
          type="button"
          className="flex w-full items-center justify-center gap-2 rounded-2xl border border-dashed border-border px-4 py-8 text-sm text-muted-foreground transition-colors hover:border-brand/35 hover:bg-brand/[0.03]"
          onClick={() => inputRef.current?.click()}
        >
          <Upload className="h-4 w-4" />
          上传第一张图片
        </button>
      ) : (
        <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 xl:grid-cols-4">
          {assets.map((asset) => (
            <article key={asset.assetId} className="group/asset overflow-hidden rounded-2xl border border-border/70 bg-background">
              <AssetPreview asset={asset} />
              <div className="flex items-center justify-between gap-2 px-3 py-2.5">
                <div className="min-w-0">
                  <p className="truncate text-xs font-medium text-foreground">
                    {asset.role === 'uploaded' ? '我的图片' : '完成的作品'}
                  </p>
                  <p className="mt-0.5 truncate text-[10px] text-muted-foreground">
                    {asset.width} × {asset.height}
                  </p>
                </div>
                <button
                  type="button"
                  aria-label="保存作品到电脑"
                  className={cn(
                    'flex h-11 w-11 items-center justify-center rounded-xl text-muted-foreground transition-colors',
                    'hover:bg-surface-subtle hover:text-foreground',
                  )}
                  onClick={() => {
                    void saveImageWorkspaceAsset(asset).catch(() => {
                      toast.error('作品没有保存成功，请再试一次');
                    });
                  }}
                >
                  <Download className="h-3.5 w-3.5" />
                </button>
              </div>
            </article>
          ))}
        </div>
      )}
    </section>
  );
}

export function DesignProductionPanel({ workspace }: { workspace: DesignWorkspace }) {
  return (
    <div className="space-y-6">
      <DesignPendingOperationsPanel />
      <DesignQuotePanel workspace={workspace} />
      <DesignTaskPanel tasks={workspace.tasks} />
      <DesignAssetsPanel workspace={workspace} />
    </div>
  );
}