import { ArrowLeft, Edit3, Sparkles } from 'lucide-react';

import type { Match3DAgentSessionSnapshot } from '../../../packages/shared/src/contracts/match3dAgent';

type Match3DDraftReadyViewProps = {
  session: Match3DAgentSessionSnapshot;
  isBusy?: boolean;
  error?: string | null;
  onBack: () => void;
};

export function Match3DDraftReadyView({
  session,
  isBusy = false,
  error = null,
  onBack,
}: Match3DDraftReadyViewProps) {
  const draft = session.draft;
  const title = draft?.gameName || '抓大鹅草稿';

  return (
    <div className="platform-remap-surface mx-auto flex h-full min-h-0 w-full max-w-4xl flex-col">
      <div className="mb-4 flex items-center justify-between gap-3">
        <button
          type="button"
          onClick={onBack}
          disabled={isBusy}
          className={`platform-button platform-button--ghost min-h-0 self-start px-3 py-1.5 text-[11px] ${isBusy ? 'opacity-45' : ''}`}
        >
          <span className="inline-flex items-center gap-1.5">
            <ArrowLeft className="h-3.5 w-3.5" />
            返回
          </span>
        </button>
      </div>

      <section className="platform-subpanel min-h-0 flex-1 overflow-y-auto rounded-[1.5rem] p-4 sm:p-5">
        <div className="flex flex-col gap-4 sm:flex-row sm:items-start">
          <div className="grid aspect-square w-full max-w-[10rem] shrink-0 place-items-center rounded-[1.2rem] bg-[radial-gradient(circle_at_30%_25%,rgba(190,242,100,0.36),transparent_34%),linear-gradient(135deg,rgba(16,185,129,0.18),rgba(251,146,60,0.16))] text-emerald-800">
            <Sparkles className="h-10 w-10" />
          </div>

          <div className="min-w-0 flex-1">
            <div className="text-2xl font-black leading-tight text-[var(--platform-text-strong)] sm:text-3xl">
              {title}
            </div>
            <div className="mt-2 text-sm leading-6 text-[var(--platform-text-base)]">
              {draft?.summaryText ?? session.lastAssistantReply ?? ''}
            </div>

            {draft ? (
              <div className="mt-5 grid gap-2 sm:grid-cols-3">
                <div className="rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/68 px-3 py-3">
                  <div className="text-[11px] font-bold tracking-[0.16em] text-[var(--platform-text-soft)]">
                    题材
                  </div>
                  <div className="mt-1 truncate text-sm font-semibold text-[var(--platform-text-strong)]">
                    {draft.themeText}
                  </div>
                </div>
                <div className="rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/68 px-3 py-3">
                  <div className="text-[11px] font-bold tracking-[0.16em] text-[var(--platform-text-soft)]">
                    物品
                  </div>
                  <div className="mt-1 text-sm font-semibold text-[var(--platform-text-strong)]">
                    {draft.totalItemCount ?? draft.clearCount * 3} 件
                  </div>
                </div>
                <div className="rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/68 px-3 py-3">
                  <div className="text-[11px] font-bold tracking-[0.16em] text-[var(--platform-text-soft)]">
                    难度
                  </div>
                  <div className="mt-1 text-sm font-semibold text-[var(--platform-text-strong)]">
                    {draft.difficulty}
                  </div>
                </div>
              </div>
            ) : null}

            {error ? (
              <div className="platform-banner platform-banner--danger mt-4 rounded-[1.25rem] text-sm leading-6">
                {error}
              </div>
            ) : null}
          </div>
        </div>
      </section>

      <div className="mt-4 flex justify-end pb-[max(0.25rem,env(safe-area-inset-bottom))]">
        <button
          type="button"
          disabled
          className="platform-button platform-button--primary cursor-not-allowed opacity-55"
        >
          <span className="inline-flex items-center gap-2">
            <Edit3 className="h-4 w-4" />
            继续编辑
          </span>
        </button>
      </div>
    </div>
  );
}

export default Match3DDraftReadyView;