import React, { useEffect, useMemo, useRef, useState } from "react";
import {
  AlertTriangle,
  Archive,
  AudioLines,
  Bell,
  Bot,
  BookOpen,
  Building2,
  CheckCircle2,
  Clapperboard,
  Coins,
  Copy,
  ChevronRight,
  Download,
  FileJson2,
  Film,
  FolderKanban,
  Gauge,
  HardDrive,
  Images,
  KeyRound,
  Layers3,
  Link2,
  ListChecks,
  ListPlus,
  LogOut,
  Mail,
  Menu,
  Mic2,
  Network,
  Palette,
  Plus,
  Play,
  RadioTower,
  RefreshCw,
  Save,
  Scale,
  Search,
  Settings2,
  ShieldCheck,
  Sparkles,
  TimerReset,
  UserPlus,
  Users,
  Volume2,
  Wand2,
  XCircle
} from "lucide-react";
import { adapters, marketBenchmarks, workflowTemplates } from "./data/sampleProject";
import { createProjectShell, emptyProject } from "./data/projectShell";
import { ScenePreview } from "./components/ScenePreview";
import {
  AdminAuditPage,
  AdminModelsPage,
  AdminOverviewPage,
  AdminPolicyCenterPage,
  AdminStyleKitsPage,
  AdminQueuePage,
  AdminUsagePage,
  AccountSecurityPage,
  CreatorHomePage,
  IdentityCenterPage,
  LoginPage,
  NotificationBell,
  NotificationCenterPage,
  TaskCenterPage,
  RegisterPage,
  SystemSettingsPage,
  SystemUsersPage
} from "./components/EnterprisePages";
import { DeliveryPortalPage } from "./components/DeliveryPortalPage";
import {
  AssetLibraryPage,
  BatchProductionPage,
  ProjectAssistantPage,
  VoiceStudioPage
} from "./components/CreatorSuitePages";
import { KnowledgeLibraryPage } from "./components/KnowledgeLibraryPage";
import {
  CastingBoardPage,
  DeliveryAccessPage,
  DeliveryOpsPage,
  DirectorProductionPage,
  GenerationQueuePage,
  ProjectFactoryPage,
  QaReviewPage,
  ScriptProductionPage,
  SeriesBiblePage
} from "./components/ProductionPages";
import { addProjectMember, changeProjectLifecycle, completeMfaEnrollment, createJob, createOrganization, createProject, createWorkspace, fetchAuthSession, fetchPlatformContext, fetchProject, getAuthSession, getClientContext, inviteMember, login, loginWithMfa, logout, redeemSsoTicket, resendOrganizationInvitation, revokeOrganizationInvitation, searchPlatform, startMfaEnrollment, updateOrganization, updateOrganizationMember, updateOrganizationRolePolicy, updateProject, updateProjectMember, updateWorkspace, updateWorkspaceMember } from "./lib/api";
import { buildAllExports, buildModelRequest, downloadJson } from "./lib/exporters";
import { projectQa } from "./lib/qa";
import { getPlatformSummary, platformData } from "./platform/platformData";

const tabs = [
  { id: "overview", label: "生产总控", icon: RadioTower },
  { id: "factory", label: "项目工厂", icon: Layers3 },
  { id: "script", label: "剧本拆解", icon: BookOpen },
  { id: "casting", label: "资产选角", icon: ShieldCheck },
  { id: "director", label: "导演工作台", icon: Clapperboard },
  { id: "jobs", label: "生成队列", icon: Wand2 },
  { id: "modelops", label: "模型中台", icon: Network },
  { id: "qa", label: "审片中心", icon: ListChecks },
  { id: "compliance", label: "成本合规", icon: Scale },
  { id: "export", label: "交付运营", icon: Download },
  { id: "admin", label: "平台管理", icon: KeyRound }
];

const navigationGroups = [
  {
    label: "创作套件",
    items: [
      { id: "creator-home", label: "我的工作台", icon: RadioTower },
      { id: "tasks", label: "协作任务", icon: ListChecks, requiredPermission: "task:view" },
      { id: "assistant", label: "项目 AI 助手", icon: Bot },
      { id: "knowledge", label: "内容知识库", icon: FileJson2, requiredPermission: "script:read" },
      { id: "asset-library", label: "资产库", icon: Images, requiredAnyPermissions: ["asset:edit", "voice:edit", "compliance:manage"] },
      { id: "voice-studio", label: "声音与字幕", icon: AudioLines, requiredPermission: "voice:edit" },
      { id: "batch-production", label: "批量生产", icon: ListPlus, requiredPermission: "job:create" }
    ]
  },
  {
    label: "账户",
    items: [
      { id: "account", label: "账号与安全", icon: KeyRound },
      { id: "notifications", label: "通知中心", icon: Bell }
    ]
  },
  {
    label: "生产流水线",
    items: [
      { id: "overview", label: "生产总控", icon: RadioTower, requiredPermission: "usage:view" },
      { id: "factory", label: "项目工厂", icon: Layers3, requiredPermission: "project:create" },
      { id: "script", label: "剧本拆解", icon: BookOpen, requiredPermission: "script:edit" },
      { id: "casting", label: "资产与选角", icon: ShieldCheck, requiredAnyPermissions: ["asset:edit", "compliance:manage"] },
      { id: "director", label: "导演工作台", icon: Clapperboard, requiredPermission: "job:create" },
      { id: "jobs", label: "生成任务", icon: Wand2, requiredPermission: "job:create" },
      { id: "bible", label: "系列 Bible", icon: BookOpen, requiredPermission: "script:edit" },
      { id: "locks", label: "连续性锁", icon: ShieldCheck, requiredAnyPermissions: ["asset:edit", "compliance:manage"] },
      { id: "shots", label: "镜头清单", icon: Clapperboard, requiredPermission: "job:create" },
      { id: "modelops", label: "模型中台", icon: Network, requiredAnyPermissions: ["model:manage", "model:approve"] },
      { id: "qa", label: "审片中心", icon: ListChecks, requiredPermission: "qa:review" },
      { id: "compliance", label: "成本合规", icon: Scale, requiredPermission: "usage:view" },
      { id: "export", label: "交付运营", icon: Download, requiredPermission: "delivery:view" },
      { id: "delivery-portal", label: "客户交付门户", icon: Link2, requiredPermission: "delivery:view" }
    ]
  },
  {
    label: "管理员后台",
    items: [
      { id: "admin-overview", label: "管理概览", icon: Gauge, requiredPermission: "usage:view" },
      { id: "admin-organizations", label: "组织与工作区", icon: Building2, requiredPermission: "organization:manage" },
      { id: "admin-members", label: "用户与权限", icon: Users, requiredPermission: "organization:members:invite" },
      { id: "admin-policies", label: "组织策略", icon: ShieldCheck, requiredAnyPermissions: ["policy:read", "policy:manage", "organization:manage"] },
      { id: "admin-style-kits", label: "风格标准", icon: Palette, requiredAnyPermissions: ["style:read", "style:manage"] },
      { id: "admin-models", label: "模型与 Runner", icon: Network, requiredAnyPermissions: ["model:manage", "model:approve"] },
      { id: "admin-queue", label: "队列与任务", icon: Wand2, requiredPermission: "queue:manage" },
      { id: "admin-usage", label: "用量与成本", icon: Coins, requiredPermission: "usage:view" },
      { id: "admin-audit", label: "审计与合规", icon: ListChecks, requiredPermission: "audit:view" }
    ]
  },
  {
    label: "系统设置",
    items: [
      { id: "system-overview", label: "系统总览", icon: Settings2, requiredPermission: "system:settings:view" },
      { id: "system-identity", label: "企业身份", icon: KeyRound, requiredPermission: "system:settings:view" },
      { id: "system-users", label: "全局用户目录", icon: Users, requiredPermission: "system:settings:view" },
      { id: "system-generation", label: "生成策略", icon: ShieldCheck, requiredPermission: "system:settings:view" },
      { id: "system-storage", label: "存储与队列", icon: HardDrive, requiredPermission: "system:settings:view" },
      { id: "system-notifications", label: "通知与 API", icon: Mail, requiredPermission: "system:settings:view" },
      { id: "system-features", label: "功能开关", icon: Sparkles, requiredPermission: "feature_flag:manage" }
    ]
  }
];

const navigationTabIds = new Set(navigationGroups.flatMap((group) => group.items.map((item) => item.id)));

function tabFromLocation() {
  if (typeof window === "undefined") return "creator-home";
  const candidate = window.location.hash.replace(/^#/, "");
  return navigationTabIds.has(candidate) ? candidate : "creator-home";
}

function inviteTokenFromLocation() {
  if (typeof window === "undefined") return "";
  return new URLSearchParams(window.location.search).get("invite") || "";
}

function portalTokenFromLocation() {
  if (typeof window === "undefined") return "";
  const match = window.location.pathname.match(/^\/portal\/([^/]+)\/?$/);
  return match ? decodeURIComponent(match[1]) : "";
}

function ssoTicketFromLocation() {
  if (typeof window === "undefined") return "";
  return new URLSearchParams(window.location.search).get("sso_ticket") || "";
}

function ssoErrorFromLocation() {
  if (typeof window === "undefined") return "";
  const params = new URLSearchParams(window.location.search);
  const code = params.get("sso_error");
  if (!code) return "";
  return params.get("sso_error_description") || `企业 SSO 登录失败：${code}`;
}

function normalizeAdapter(adapter) {
  return {
    ...adapter,
    kind: adapter.kind || adapter.protocol || "http-json",
    baseUrl: adapter.baseUrl || adapter.endpoint || "",
    enabled: adapter.enabled ?? (adapter.status === "ready"),
    status: adapter.status || (adapter.enabled ? "ready" : "planned"),
    costMode: adapter.costMode || adapter.cost_mode || "local",
    approvalRequired: adapter.approvalRequired ?? Boolean(adapter.approval_required),
    capability: adapter.capability || adapter.capabilities || []
  };
}

function adapterCatalogForContext(platformContext) {
  const registry = platformContext?.platform?.adapterCatalog || platformContext?.platform?.modelRegistry;
  if (Array.isArray(registry) && registry.length) return registry.map(normalizeAdapter);
  return adapters.map(normalizeAdapter);
}

function preferredAdapterId(catalog, requestedId) {
  if (requestedId && catalog.some((adapter) => adapter.id === requestedId)) return requestedId;
  const imageAdapter = catalog.find((adapter) => (adapter.capability || []).some((item) => /image-to-video|i2v|video/i.test(item)));
  return imageAdapter?.id || catalog.find((adapter) => adapter.status === "ready")?.id || catalog[0]?.id || "owned-model-platform";
}

function StatusPill({ tone = "neutral", children }) {
  return <span className={`status-pill ${tone}`}>{children}</span>;
}

function SectionTitle({ icon: Icon, title, action }) {
  return (
    <div className="section-title">
      <div>
        <Icon size={18} />
        <h2>{title}</h2>
      </div>
      {action}
    </div>
  );
}

function Metric({ label, value, icon: Icon }) {
  return (
    <div className="metric">
      <Icon size={18} />
      <span>{label}</span>
      <strong>{value}</strong>
    </div>
  );
}

function ProgressBar({ value, tone = "ok" }) {
  return (
    <div className="progress-track">
      <span className={tone} style={{ width: `${value}%` }} />
    </div>
  );
}

function Cockpit({ project, qaResults, setActiveTab, setActiveShotId, platformContext, canCreateJob, canApproveDelivery }) {
  const platform = platformContext?.platform || platformData;
  const platformSummary = platformContext?.summary || getPlatformSummary();
  const organization = platform.organization || platformData.workspace;
  const plan = platform.billing || platform.plan;
  const totalDuration = project.shots.reduce((sum, shot) => sum + shot.durationSec, 0);
  const blockedItems = project.pipeline.filter((item) => item.status === "blocked").length;

  return (
    <div className="cockpit">
      <section className="command-hero">
        <div className="command-copy">
          <p className="eyebrow">LOCAL AI DRAMA OPS</p>
          <h2>{project.series.title} · {project.episode.title}</h2>
          <p>{organization.name || "私有化内容组织"}：把剧本、资产、模型、队列、审片、成本、合规和交付纳入同一个私有生产系统。</p>
          <div className="hero-actions">
            {canCreateJob && <button className="primary" onClick={() => setActiveTab("jobs")}>
              <Play size={16} />
              <span>进入生成队列</span>
            </button>}
            {canApproveDelivery && <button className="subtle" onClick={() => setActiveTab("export")}>
              <Download size={16} />
              <span>查看交付包</span>
            </button>}
          </div>
        </div>
        <div className="readiness-panel">
          <span>商用准备度</span>
          <strong>{project.production.commercialReadiness}%</strong>
          <ProgressBar value={project.production.commercialReadiness} />
          <p>{plan ? `${plan.plan_name || plan.name} · ${plan.seat_limit || plan.seats} seats · ${plan.storage_gb || plan.storageGb}GB storage · 外部云连接需显式审批。` : "当前角色无计费数据查看权限。"}</p>
        </div>
      </section>

      <section className="platform-kpis">
        <Metric icon={Layers3} label="生产项目" value={`${platformSummary.activeProjects} 个`} />
        <Metric icon={Network} label="模型/Runner" value={`${platformSummary.modelCount}/${platformSummary.runnerCount}`} />
        <Metric icon={TimerReset} label="队列深度" value={`${platformSummary.queueDepth}`} />
        <Metric icon={Coins} label="预算使用" value={`${platformSummary.budget.used}/${platformSummary.budget.total}`} />
      </section>

      <section className="ops-grid">
        <article className="ops-card">
          <div className="ops-card-head">
            <h3>生产流水线</h3>
            <StatusPill tone={blockedItems ? "warn" : "ok"}>{blockedItems ? `${blockedItems} 个阻塞` : "运行中"}</StatusPill>
          </div>
          <div className="pipeline-list">
            {project.pipeline.map((item) => {
              const target = item.id === "script" ? "script" : item.id === "assets" ? "casting" : item.id === "qa" ? "qa" : item.id === "edit" ? "export" : "jobs";
              return (
              <button key={item.id} className={`pipeline-row ${item.status}`} onClick={() => setActiveTab(target)}>
                <div>
                  <strong>{item.label}</strong>
                  <span>{item.owner} · {item.due}</span>
                </div>
                <ProgressBar value={item.progress} tone={item.status === "blocked" ? "warn" : "ok"} />
                <b>{item.progress}%</b>
              </button>
            );})}
          </div>
        </article>

        <article className="ops-card">
          <div className="ops-card-head">
            <h3>镜头生产状态</h3>
            <StatusPill tone="ok">{project.shots.length} shots / {totalDuration}s</StatusPill>
          </div>
          <div className="shot-table">
            {project.shots.map((shot) => {
              const qa = qaResults.find((item) => item.shotId === shot.id);
              return (
                <button key={shot.id} onClick={() => { setActiveShotId(shot.id); setActiveTab("director"); }}>
                  <span>{shot.id}</span>
                  <strong>{shot.title}</strong>
                  <em>{shot.transitionFromPrevious}</em>
                  <b>{qa?.score || 0}</b>
                </button>
              );
            })}
          </div>
        </article>

        <article className="ops-card wide">
          <div className="ops-card-head">
            <h3>生成队列</h3>
            <StatusPill tone="ok">local-only</StatusPill>
          </div>
          <div className="job-table">
            <div className="job-head">
              <span>任务</span>
              <span>镜头</span>
              <span>适配器</span>
              <span>成本策略</span>
              <span>状态</span>
            </div>
            {project.productionJobs.map((job) => (
              <button key={job.id} onClick={() => { setActiveShotId(project.shots.find((shot) => shot.id === job.shotId)?.id || project.shots[0].id); setActiveTab("jobs"); }}>
                <span>{job.kind}</span>
                <span>{job.shotId}</span>
                <span>{job.adapter}</span>
                <span>{job.costPolicy}</span>
                <StatusPill tone={job.status === "queued" ? "warn" : "ok"}>{job.status}</StatusPill>
              </button>
            ))}
          </div>
        </article>

        <article className="ops-card">
          <div className="ops-card-head">
            <h3>QA 证据</h3>
            <StatusPill tone="warn">需要真实产物回填</StatusPill>
          </div>
          <div className="evidence-list">
            {project.qaEvidence.map((item) => (
              <div key={item.id} className={`evidence ${item.result}`}>
                {item.result === "pass" ? <CheckCircle2 size={17} /> : <AlertTriangle size={17} />}
                <div>
                  <strong>{item.label}</strong>
                  <p>{item.evidence}</p>
                </div>
              </div>
            ))}
          </div>
        </article>

        <article className="ops-card">
          <div className="ops-card-head">
            <h3>交付物</h3>
            <StatusPill tone="ok">{project.deliverables.filter((item) => item.status === "ready").length}/{project.deliverables.length}</StatusPill>
          </div>
          <div className="deliverable-list">
            {project.deliverables.map((item) => (
              <div key={item.path}>
                <strong>{item.name}</strong>
                <span>{item.path}</span>
                <StatusPill tone={item.status === "ready" ? "ok" : "warn"}>{item.status}</StatusPill>
              </div>
            ))}
          </div>
        </article>

        <article className="ops-card wide benchmark-card">
          <div className="ops-card-head">
            <h3>市面商业平台对标</h3>
            <StatusPill tone="ok">已转成本地版工作流</StatusPill>
          </div>
          <div className="benchmark-grid">
            {(platform.researchMatrix || platformSummary.researchMatrix || []).map((item) => (
              <div key={item.category}>
                <strong>{item.category}</strong>
                <span>{item.commercialNeed}</span>
                <p>{item.localBuild}</p>
              </div>
            ))}
          </div>
        </article>
      </section>
    </div>
  );
}

function ProjectFactory({ setActiveTab, platformContext }) {
  const platform = platformContext?.platform || platformData;
  const projects = platform.projects || platformData.projects;
  return (
    <div className="platform-stage">
      <SectionTitle icon={Layers3} title="项目工厂" />
      <div className="factory-layout">
        <section className="studio-card">
          <h3>商业项目入口</h3>
          <div className="project-template-grid">
            {["原创 AI 漫剧", "小说解说漫", "动态漫拆层", "仿真人短剧审慎模式", "平台 Agent 流水线"].map((name) => (
              <button key={name} onClick={() => setActiveTab("script")}>
                <Film size={20} />
                <strong>{name}</strong>
                <span>创建项目 · 绑定模板 · 生成资产目录</span>
              </button>
            ))}
          </div>
        </section>
        <section className="studio-card">
          <h3>项目资产空间</h3>
          <div className="bucket-list">
            {platformData.assetStorage.buckets.map((bucket) => (
              <div key={bucket.id}>
                <HardDrive size={17} />
                <strong>{bucket.label}</strong>
                <span>{bucket.fileCount} files</span>
                <em>{bucket.policy}</em>
              </div>
            ))}
          </div>
        </section>
        <section className="studio-card wide-card">
          <h3>项目列表</h3>
          <div className="platform-table">
            <div>
              <span>项目</span><span>类型</span><span>阶段</span><span>准备度</span><span>风险</span><span>更新</span>
            </div>
            {projects.map((project) => (
              <button key={project.id} onClick={() => setActiveTab("director")}>
                <strong>{project.title || project.name}</strong>
                <span>{project.type}</span>
                <span>{project.stage || project.status}</span>
                <span>{project.readiness}%</span>
                <StatusPill tone={project.risk === "low" ? "ok" : "warn"}>{project.risk}</StatusPill>
                <span>{project.updatedAt || project.updated_at?.slice(0, 10)}</span>
              </button>
            ))}
          </div>
        </section>
      </div>
    </div>
  );
}

function ScriptStudio({ project, canEditAssets }) {
  return (
    <div className="platform-stage">
      <SectionTitle icon={BookOpen} title="剧本拆解工厂" />
      <div className="stage-grid">
        <section className="studio-card import-card">
          <h3>长文本导入</h3>
          <p>{project.scriptStudio.sourceType} · {project.scriptStudio.importLimit}</p>
          <textarea defaultValue={`第 1 集《${project.episode.title}》\n\n${project.episode.hook}\n\n陈宇：等一下，先别出去。雷暴来了，树下和金属牌旁边都不安全。\n唐夏：那我现在该往哪走？\n陈宇：看左边，积水旁可能有落地电线。别靠近，也别跨警戒线。`} />
          <div className="button-row">
            <button className="primary"><Sparkles size={16} />智能拆章</button>
            {canEditAssets && <button className="subtle"><ListChecks size={16} />抽取资产</button>}
          </div>
        </section>
        <section className="studio-card">
          <h3>章节拆分</h3>
          <div className="chapter-list">
            {project.scriptStudio.chapters.map((chapter) => (
              <div key={chapter.id}>
                <strong>{chapter.title}</strong>
                <span>{chapter.words} 字 · {chapter.scenes} 场 · {chapter.status}</span>
              </div>
            ))}
          </div>
        </section>
        <section className="studio-card">
          <h3>资产抽取</h3>
          <div className="extract-list">
            {project.scriptStudio.extracted.map((item) => (
              <div key={`${item.type}-${item.name}`}>
                <span>{item.type}</span>
                <strong>{item.name}</strong>
                <b>{Math.round(item.confidence * 100)}%</b>
                <em>{item.target}</em>
              </div>
            ))}
          </div>
        </section>
        <section className="studio-card">
          <h3>风格设定</h3>
          <p>{project.scriptStudio.stylePreset}</p>
          <p>{project.scriptStudio.splitRule}</p>
          <div className="style-swatches">
            <span></span><span></span><span></span><span></span>
          </div>
        </section>
      </div>
    </div>
  );
}

function CastingBoard({ project }) {
  return (
    <div className="platform-stage">
      <SectionTitle icon={ShieldCheck} title="资产选角与一致性库" />
      <div className="casting-grid">
        {project.characters.map((character) => (
          <article className="casting-card" key={character.id}>
            <div className="portrait-system">
              <div className="portrait front"><span>{character.name.slice(0, 1)}</span></div>
              <div className="turnaround">
                {character.casting.turnarounds.map((item) => <span key={item}>{item}</span>)}
              </div>
            </div>
            <div>
              <h3>{character.name} · {character.role}</h3>
              <p>{character.visualLock}</p>
              <div className="wardrobe-list">
                {character.casting.wardrobe.map((item) => <span key={item}>{item}</span>)}
              </div>
              <dl>
                <dt>声线</dt>
                <dd>{character.voiceLock.voiceId}</dd>
                <dt>复用</dt>
                <dd>{character.casting.reuseScope}</dd>
              </dl>
            </div>
          </article>
        ))}
      </div>
      <div className="asset-grid">
        <section className="studio-card">
          <h3>场景库</h3>
          {project.locations.map((location) => (
            <div className="asset-row" key={location.id}>
              <strong>{location.name}</strong>
              <span>{location.weather}</span>
              <p>{location.cameraLock}</p>
            </div>
          ))}
        </section>
        <section className="studio-card">
          <h3>道具库</h3>
          {project.props.map((prop) => (
            <div className="asset-row" key={prop.id}>
              <strong>{prop.name}</strong>
              <p>{prop.lock}</p>
            </div>
          ))}
        </section>
      </div>
    </div>
  );
}

function ModelOps({ platformContext }) {
  const platform = platformContext?.platform || platformData;
  const models = platform.modelRegistry || platformData.modelRegistry;
  const runners = platform.runnerHealth || platformData.runnerHealth;
  return (
    <div className="platform-stage">
      <SectionTitle icon={Network} title="模型中台与 Runner 编排" />
      <div className="modelops-grid">
        <section className="studio-card wide-card">
          <h3>模型注册表</h3>
          <div className="platform-table model-table">
            <div><span>模型</span><span>能力</span><span>Endpoint</span><span>成本</span><span>审批</span><span>状态</span></div>
            {models.map((model) => (
              <button key={model.id}>
                <strong>{model.label}</strong>
                <span>{model.capability.join(", ")}</span>
                <span>{model.endpoint}</span>
                <span>{model.costMode || model.cost_mode}</span>
                <span>{model.approvalRequired || model.approval_required ? "required" : "no"}</span>
                <StatusPill tone={model.status === "not-connected" ? "warn" : "ok"}>{model.status}</StatusPill>
              </button>
            ))}
          </div>
        </section>
        <section className="studio-card">
          <h3>Runner Health</h3>
          <div className="runner-list">
            {runners.map((runner) => (
              <div key={runner.id}>
                <strong>{runner.name}</strong>
                <span>{runner.status}</span>
                <ProgressBar value={Math.min(100, runner.queueDepth * 16 + 12)} tone={runner.status.includes("waiting") ? "warn" : "ok"} />
                <em>queue {runner.queueDepth} · {runner.lastHeartbeat}</em>
              </div>
            ))}
          </div>
        </section>
      </div>
    </div>
  );
}

function ComplianceCenter({ platformContext }) {
  const platform = platformContext?.platform || platformData;
  const plan = platform.billing || platform.plan || platformData.plan;
  const costCenters = platform.costCenters || platformData.costCenters;
  const policies = platform.compliancePolicies || platformData.compliancePolicies;
  return (
    <div className="platform-stage">
      <SectionTitle icon={Scale} title="成本、额度与合规中心" />
      <div className="compliance-grid">
        <section className="studio-card">
          <h3>套餐与额度</h3>
          <dl>
            <dt>套餐</dt><dd>{plan.plan_name || plan.name}</dd>
            <dt>Seats</dt><dd>{plan.seat_limit || plan.seats}</dd>
            <dt>存储</dt><dd>{plan.storage_gb || plan.storageGb} GB</dd>
            <dt>片段额度</dt><dd>{plan.monthly_clip_quota || plan.monthlyClipQuota} clips/月</dd>
            <dt>云连接</dt><dd>{plan.cloud_connectors_require_approval ?? plan.cloudConnectorsRequireApproval ? "必须审批" : "可用"}</dd>
          </dl>
        </section>
        <section className="studio-card">
          <h3>成本中心</h3>
          <div className="runner-list">
            {costCenters.map((cost) => (
              <div key={cost.id}>
                <strong>{cost.label}</strong>
                <ProgressBar value={cost.monthBudget ? Math.round((cost.used / cost.monthBudget) * 100) : 0} tone={cost.id === "cc-cloud" ? "warn" : "ok"} />
                <em>{cost.used}/{cost.monthBudget} {cost.unit}</em>
              </div>
            ))}
          </div>
        </section>
        <section className="studio-card wide-card">
          <h3>合规策略</h3>
          <div className="policy-grid">
            {policies.map((policy) => (
              <div key={policy.id}>
                <strong>{policy.label}</strong>
                <span>{policy.severity}</span>
                <StatusPill tone={policy.status === "enforced" ? "ok" : "warn"}>{policy.status}</StatusPill>
              </div>
            ))}
          </div>
        </section>
      </div>
    </div>
  );
}

function AdminCenter({ platformContext, onRefresh, onSwitchOrganization, onInvite, onResendInvitation, onRevokeInvitation, onCreateOrganization, onCreateWorkspace, onCreateProject, onUpdateOrganization, onUpdateWorkspace, onUpdateProject, onUpdateOrganizationMember, onUpdateOrganizationRolePolicy, onUpdateWorkspaceMember, onUpdateProjectMember, onAddProjectMember }) {
  const platform = platformContext?.platform || platformData;
  const context = platformContext?.context;
  const organizations = platform.organizations || [{ id: "ws-local-aidrama", name: platform.workspace?.name || "本地工作区", role_name: "平台管理员", workspace_count: 1 }];
  const workspaces = platform.workspaces || [];
  const projects = platform.projects || platformData.projects;
  const members = platform.members || platformData.members;
  const workspaceMembers = platform.workspaceMembers || [];
  const projectMembers = platform.projectMembers || [];
  const invitations = platform.invitations || [];
  const auditLog = platform.auditLog || platformData.auditLog;
  const rolePolicies = platform.rolePolicies || { roles: [], permissions: [] };
  const permissionMatrix = platformContext?.rolePermissions?.length
    ? platformContext.rolePermissions.map((role) => ({ role: role.name, permissions: role.permissions || [] }))
    : platformData.permissionMatrix;
  const billing = platform.billing || platform.plan || platformData.plan;
  const usage = platform.usage;
  const [inviteEmail, setInviteEmail] = useState("");
  const [inviteRole, setInviteRole] = useState("writer");
  const [inviteScope, setInviteScope] = useState(workspaces.length ? "workspace" : "organization");
  const [inviteWorkspaceId, setInviteWorkspaceId] = useState(workspaces[0]?.id || "");
  const [inviteProjectId, setInviteProjectId] = useState("");
  const [organizationName, setOrganizationName] = useState("");
  const [workspaceName, setWorkspaceName] = useState("");
  const [projectName, setProjectName] = useState("");
  const [notice, setNotice] = useState("");
  const [memberDrafts, setMemberDrafts] = useState({});
  const [projectMemberDrafts, setProjectMemberDrafts] = useState({});
  const [workspaceMemberDrafts, setWorkspaceMemberDrafts] = useState({});
  const [organizationDraft, setOrganizationDraft] = useState({ name: "", slug: "" });
  const [workspaceDraft, setWorkspaceDraft] = useState({ name: "", slug: "", description: "", status: "active" });
  const [projectDraft, setProjectDraft] = useState({ name: "", type: "AI 漫剧", status: "production", visibility: "workspace", readiness: 0, risk: "low" });
  const [newProjectMemberId, setNewProjectMemberId] = useState("");
  const [selectedPolicyRoleKey, setSelectedPolicyRoleKey] = useState("");
  const [policySearch, setPolicySearch] = useState("");
  const [inviteLink, setInviteLink] = useState("");
  const [inviteActionId, setInviteActionId] = useState("");

  const inviteProjects = projects.filter((item) => !inviteWorkspaceId || item.workspace_id === inviteWorkspaceId || item.workspaceId === inviteWorkspaceId);
  const inviteRoleOptions = inviteScope === "organization"
    ? [["org_member", "组织成员"], ["org_admin", "组织管理员"]]
    : inviteScope === "project"
      ? [["project_editor", "项目编辑"], ["project_viewer", "项目查看者"]]
      : [["writer", "编剧"], ["producer", "制片"], ["art_director", "资产美术"], ["voice_editor", "配音/字幕"], ["reviewer", "审片"]];

  useEffect(() => {
    setMemberDrafts(Object.fromEntries(members.map((member) => [member.user_id || member.id, { roleKey: member.role_key || "org_member", status: member.status || "active" }])));
  }, [platform.members]);

  useEffect(() => {
    setProjectMemberDrafts(Object.fromEntries(projectMembers.map((member) => [member.user_id || member.id, { roleKey: member.role_key || "project_viewer", status: member.status || "active" }])));
  }, [platform.projectMembers]);

  useEffect(() => {
    const organization = context?.currentOrganization;
    const workspace = context?.currentWorkspace;
    const project = context?.currentProject;
    setOrganizationDraft({ name: organization?.name || "", slug: organization?.slug || "" });
    setWorkspaceDraft({ name: workspace?.name || "", slug: workspace?.slug || "", description: workspace?.description || "", status: workspace?.status || "active" });
    setProjectDraft({ name: project?.name || "", type: project?.type || "AI 漫剧", status: project?.status || "production", visibility: project?.visibility || "workspace", readiness: project?.readiness ?? 0, risk: project?.risk || "low" });
  }, [context?.currentOrganization?.id, context?.currentWorkspace?.id, context?.currentProject?.id]);

  useEffect(() => {
    setWorkspaceMemberDrafts(Object.fromEntries((platform.workspaceMembers || []).map((member) => [member.user_id || member.id, { roleKey: member.role_key || "producer", accessMode: member.access_mode || "all", status: member.status || "active" }])));
  }, [platform.workspaceMembers]);

  useEffect(() => {
    if (!workspaces.some((workspace) => workspace.id === inviteWorkspaceId)) setInviteWorkspaceId(workspaces[0]?.id || "");
  }, [platform.workspaces]);

  useEffect(() => {
    if (!inviteProjects.some((project) => project.id === inviteProjectId)) setInviteProjectId(inviteProjects[0]?.id || "");
  }, [platform.projects, inviteWorkspaceId]);

  useEffect(() => {
    const availableRole = rolePolicies.roles.find((role) => role.key === selectedPolicyRoleKey) || rolePolicies.roles[0];
    if (availableRole && availableRole.key !== selectedPolicyRoleKey) setSelectedPolicyRoleKey(availableRole.key);
    if (!rolePolicies.roles.length) setSelectedPolicyRoleKey("");
  }, [rolePolicies.roles, selectedPolicyRoleKey]);

  async function runAction(action, successMessage) {
    try {
      const result = await action();
      setNotice(successMessage);
      return result;
    } catch (error) {
      setNotice(error.message);
      return null;
    }
  }

  function changeInviteScope(scope) {
    setInviteScope(scope);
    if (scope === "organization") setInviteRole("org_member");
    else if (scope === "project") setInviteRole("project_editor");
    else setInviteRole("writer");
  }

  function inviteUrl(invitation) {
    if (!invitation) return "";
    const path = invitation.acceptUrl || (invitation.inviteToken ? `/register?invite=${encodeURIComponent(invitation.inviteToken)}` : "");
    if (!path) return "";
    if (typeof window === "undefined") return path;
    return new URL(path, window.location.origin).toString();
  }

  const handleInvite = async (event) => {
    event.preventDefault();
    if (inviteScope !== "organization" && !inviteWorkspaceId) {
      setNotice("工作区级或项目级邀请必须选择工作区");
      return;
    }
    if (inviteScope === "project" && !inviteProjectId) {
      setNotice("项目级邀请必须选择项目");
      return;
    }
    const body = { email: inviteEmail, roleKey: inviteRole };
    if (inviteScope !== "organization") body.workspaceId = inviteWorkspaceId;
    if (inviteScope === "project") body.projectId = inviteProjectId;
    const result = await runAction(() => onInvite(body), "邀请已创建；注册链接仅在当前管理会话中显示");
    if (result?.invitation) {
      setInviteLink(inviteUrl(result.invitation));
      setInviteEmail("");
    }
  };

  async function handleResendInvitation(invitation) {
    setInviteActionId(invitation.id);
    try {
      const result = await runAction(() => onResendInvitation?.(invitation.id), "邀请已重新发送；旧注册链接已立即失效");
      if (result?.invitation) setInviteLink(inviteUrl(result.invitation));
    } finally {
      setInviteActionId("");
    }
  }

  async function handleRevokeInvitation(invitation) {
    if (typeof window !== "undefined" && !window.confirm(`确定撤销发给 ${invitation.email} 的邀请吗？撤销后注册链接立即失效，席位会释放。`)) return;
    setInviteActionId(invitation.id);
    try {
      const result = await runAction(() => onRevokeInvitation?.(invitation.id), "邀请已撤销，预留席位已释放");
      if (result?.invitation) setInviteLink("");
    } finally {
      setInviteActionId("");
    }
  }

  async function copyInviteLink() {
    if (!inviteLink) return;
    try {
      if (navigator.clipboard?.writeText) {
        await navigator.clipboard.writeText(inviteLink);
      } else {
        const input = document.querySelector("[data-invite-link]");
        input?.select();
        document.execCommand("copy");
      }
      setNotice("注册链接已复制");
    } catch {
      setNotice("浏览器未授权复制，请手动选择并复制注册链接");
    }
  }

  const handleWorkspace = (event) => {
    event.preventDefault();
    runAction(() => onCreateWorkspace({ name: workspaceName }), "工作区已创建");
    setWorkspaceName("");
  };

  const handleOrganization = (event) => {
    event.preventDefault();
    runAction(() => onCreateOrganization({ name: organizationName }), "组织已创建并切换");
    setOrganizationName("");
  };

  const handleProject = (event) => {
    event.preventDefault();
    runAction(() => onCreateProject({ name: projectName, type: "AI 漫剧" }), "项目已创建");
    setProjectName("");
  };

  function updateMemberDraft(userId, field, value) {
    setMemberDrafts((current) => ({ ...current, [userId]: { ...(current[userId] || {}), [field]: value } }));
  }

  function updateProjectMemberDraft(userId, field, value) {
    setProjectMemberDrafts((current) => ({ ...current, [userId]: { ...(current[userId] || {}), [field]: value } }));
  }

  function saveMember(member) {
    const userId = member.user_id || member.id;
    const draft = memberDrafts[userId];
    runAction(() => onUpdateOrganizationMember(userId, draft), `${member.display_name || member.name} 的组织角色已更新`);
  }

  function saveProjectMember(member) {
    const userId = member.user_id || member.id;
    const draft = projectMemberDrafts[userId];
    runAction(() => onUpdateProjectMember(userId, draft), `${member.display_name} 的项目角色已更新`);
  }

  function saveWorkspaceMember(member) {
    const userId = member.user_id || member.id;
    const draft = workspaceMemberDrafts[userId];
    runAction(() => onUpdateWorkspaceMember?.(userId, draft), `${member.display_name} 的工作区角色已更新`);
  }

  function saveOrganizationSettings(event) {
    event.preventDefault();
    runAction(() => onUpdateOrganization?.(organizationDraft), "组织设置已更新");
  }

  function saveWorkspaceSettings(event) {
    event.preventDefault();
    runAction(() => onUpdateWorkspace?.(workspaceDraft), "工作区设置已更新");
  }

  function saveProjectSettings(event) {
    event.preventDefault();
    runAction(() => onUpdateProject?.(projectDraft), "项目设置已更新");
  }

  function addProjectMember(event) {
    event.preventDefault();
    if (!newProjectMemberId) return;
    runAction(() => onAddProjectMember?.(newProjectMemberId, { roleKey: "project_editor" }), "项目成员已加入");
    setNewProjectMemberId("");
  }

  const selectedPolicyRole = rolePolicies.roles.find((role) => role.key === selectedPolicyRoleKey) || rolePolicies.roles[0] || null;
  const normalizedPolicySearch = policySearch.trim().toLowerCase();
  const visiblePolicyPermissions = rolePolicies.permissions.filter((permission) => {
    if (!normalizedPolicySearch) return true;
    return `${permission.key} ${permission.description}`.toLowerCase().includes(normalizedPolicySearch);
  });
  const policyOverrides = new Map((selectedPolicyRole?.overrides || []).map((override) => [override.permissionKey, override]));
  const canManageRolePolicies = Boolean(context?.permissions?.includes("organization:roles:manage"));

  function savePolicyPermission(permission, enabled) {
    if (!selectedPolicyRole || !onUpdateOrganizationRolePolicy) return;
    runAction(
      () => onUpdateOrganizationRolePolicy(selectedPolicyRole.key, { permissionKey: permission.key, enabled }),
      `${selectedPolicyRole.name} · ${permission.description} 已${enabled ? "启用" : "撤销"}`
    );
  }

  return (
    <div className="platform-stage">
      <SectionTitle
        icon={KeyRound}
        title="平台管理"
        action={<button className="subtle" onClick={onRefresh}><RefreshCw size={15} />刷新租户数据</button>}
      />
      <div className="admin-context-strip">
        <div className="admin-context-main">
          <Building2 size={22} />
          <div>
            <span>当前组织</span>
            <strong>{context?.currentOrganization?.name || platform.workspace?.name || "本地组织"}</strong>
            <p>{context?.currentOrganization?.slug || "private-local"} · {context?.organizationRole || "platform-admin"}</p>
          </div>
        </div>
        <div className="admin-context-stats">
          <div><strong>{organizations.length}</strong><span>可访问组织</span></div>
          <div><strong>{workspaces.length}</strong><span>当前组织工作区</span></div>
          <div><strong>{members.length}</strong><span>组织成员</span></div>
          <div><strong>{context?.permissions?.length || permissionMatrix[0].permissions.length}</strong><span>当前权限</span></div>
        </div>
      </div>

      {notice && <div className="admin-notice"><CheckCircle2 size={16} />{notice}</div>}

      <div className="admin-grid">
        <section className="studio-card wide-card">
          <div className="card-heading-row"><div><span className="card-kicker">TENANT DIRECTORY</span><h3>组织与工作区</h3></div><StatusPill tone="ok">scope enforced</StatusPill></div>
          <div className="organization-grid">
            {organizations.map((organization) => (
              <button key={organization.id} className={`organization-tile ${organization.id === context?.currentOrganization?.id ? "selected" : ""}`} onClick={() => onSwitchOrganization(organization.id)}>
                <Building2 size={18} />
                <strong>{organization.name}</strong>
                <span>{organization.role_name || organization.role || "成员"} · {organization.workspace_count || 0} 个工作区</span>
                <em>{organization.slug}</em>
              </button>
            ))}
          </div>
          <div className="workspace-admin-row">
            <div className="admin-form-stack">
              <form onSubmit={handleOrganization} className="inline-admin-form">
                <input required value={organizationName} onChange={(event) => setOrganizationName(event.target.value)} placeholder="新组织名称" aria-label="新组织名称" />
                <button className="subtle" type="submit"><Building2 size={15} />创建组织</button>
              </form>
              <form onSubmit={handleWorkspace} className="inline-admin-form">
                <input required value={workspaceName} onChange={(event) => setWorkspaceName(event.target.value)} placeholder="新工作区名称" aria-label="新工作区名称" />
                <button className="primary" type="submit"><Plus size={15} />创建工作区</button>
              </form>
            </div>
            <div className="workspace-chips">
              {workspaces.map((workspace) => <span key={workspace.id}><FolderKanban size={14} />{workspace.name}<small>{workspace.projectCount || 0} 项目</small></span>)}
            </div>
          </div>
        </section>

        <section className="studio-card wide-card">
          <div className="card-heading-row"><div><span className="card-kicker">TENANT SETTINGS</span><h3>组织、工作区与项目设置</h3></div><Settings2 size={18} /></div>
          <div className="tenant-settings-grid">
            <form onSubmit={saveOrganizationSettings} className="tenant-settings-form">
              <strong>当前组织</strong>
              <label>名称<input value={organizationDraft.name} onChange={(event) => setOrganizationDraft({ ...organizationDraft, name: event.target.value })} /></label>
              <label>组织标识<input value={organizationDraft.slug} onChange={(event) => setOrganizationDraft({ ...organizationDraft, slug: event.target.value })} /></label>
              <button className="subtle" type="submit"><Save size={14} />保存组织</button>
            </form>
            <form onSubmit={saveWorkspaceSettings} className="tenant-settings-form">
              <strong>当前工作区</strong>
              <label>名称<input value={workspaceDraft.name} onChange={(event) => setWorkspaceDraft({ ...workspaceDraft, name: event.target.value })} /></label>
              <label>工作区标识<input value={workspaceDraft.slug} onChange={(event) => setWorkspaceDraft({ ...workspaceDraft, slug: event.target.value })} /></label>
              <label>描述<textarea rows="2" value={workspaceDraft.description} onChange={(event) => setWorkspaceDraft({ ...workspaceDraft, description: event.target.value })} /></label>
              <div className="form-actions"><select value={workspaceDraft.status} onChange={(event) => setWorkspaceDraft({ ...workspaceDraft, status: event.target.value })}><option value="active">启用</option><option value="archived">归档</option></select><button className="subtle" type="submit"><Save size={14} />保存工作区</button></div>
            </form>
            <form onSubmit={saveProjectSettings} className="tenant-settings-form">
              <strong>当前项目</strong>
              <label>名称<input value={projectDraft.name} onChange={(event) => setProjectDraft({ ...projectDraft, name: event.target.value })} /></label>
              <label>类型<input value={projectDraft.type} onChange={(event) => setProjectDraft({ ...projectDraft, type: event.target.value })} /></label>
              <div className="form-grid"><label>状态<select value={projectDraft.status} onChange={(event) => setProjectDraft({ ...projectDraft, status: event.target.value })}><option value="draft">草稿</option><option value="production">制作中</option><option value="paused">暂停</option><option value="archived">归档</option></select></label><label>风险<select value={projectDraft.risk} onChange={(event) => setProjectDraft({ ...projectDraft, risk: event.target.value })}><option value="low">低</option><option value="medium">中</option><option value="high">高</option></select></label></div>
              <label>准备度<input type="number" min="0" max="100" value={projectDraft.readiness} onChange={(event) => setProjectDraft({ ...projectDraft, readiness: Number(event.target.value) })} /></label>
              <button className="subtle" type="submit"><Save size={14} />保存项目</button>
            </form>
          </div>
        </section>

        <section className="studio-card">
          <div className="card-heading-row"><div><span className="card-kicker">ACCESS CONTROL</span><h3>成员与角色</h3></div><Users size={18} /></div>
          <div className="member-list">
            {members.map((member) => {
              const name = member.display_name || member.name;
              const role = member.role_name || member.role;
              const status = member.status || "active";
              const userId = member.user_id || member.id;
              const draft = memberDrafts[userId] || { roleKey: member.role_key || "org_member", status };
              const isOwner = member.role_key === "org_owner";
              return <div key={member.id || member.user_id}><span className="member-avatar">{name?.slice(0, 1)}</span><div><strong>{name}</strong><span>{member.email || role}</span></div><div className="member-role-editor"><select aria-label={`${name} 组织角色`} value={draft.roleKey} disabled={isOwner} onChange={(event) => updateMemberDraft(userId, "roleKey", event.target.value)}><option value="org_owner">组织所有者</option><option value="org_admin">组织管理员</option><option value="org_member">组织成员</option></select><select aria-label={`${name} 成员状态`} value={draft.status} onChange={(event) => updateMemberDraft(userId, "status", event.target.value)}><option value="active">启用</option><option value="suspended">停用</option></select><button className="icon-text-button" onClick={() => saveMember(member)} disabled={isOwner && draft.status === "active"}><Save size={13} />保存</button></div></div>;
            })}
          </div>
          <form className="invite-form" onSubmit={handleInvite}>
            <div className="form-title"><UserPlus size={16} />邀请成员</div>
            <div className="form-grid"><input type="email" required value={inviteEmail} onChange={(event) => setInviteEmail(event.target.value)} placeholder="name@studio.local" aria-label="成员邮箱" /><select value={inviteScope} onChange={(event) => changeInviteScope(event.target.value)} aria-label="邀请范围"><option value="organization">组织级</option><option value="workspace" disabled={!workspaces.length}>工作区级</option><option value="project" disabled={!inviteProjects.length}>项目级</option></select></div>
            {inviteScope !== "organization" && <select value={inviteWorkspaceId} onChange={(event) => { setInviteWorkspaceId(event.target.value); if (inviteScope === "project") setInviteProjectId(""); }} aria-label="邀请工作区"><option value="">选择工作区</option>{workspaces.map((workspace) => <option key={workspace.id} value={workspace.id}>{workspace.name}</option>)}</select>}
            {inviteScope === "project" && <select value={inviteProjectId} onChange={(event) => setInviteProjectId(event.target.value)} aria-label="邀请项目"><option value="">选择项目</option>{inviteProjects.map((project) => <option key={project.id} value={project.id}>{project.name || project.title}</option>)}</select>}
            <select value={inviteRole} onChange={(event) => setInviteRole(event.target.value)} aria-label="成员角色">{inviteRoleOptions.map(([value, label]) => <option key={value} value={value}>{label}</option>)}</select>
            <button className="subtle" type="submit"><Mail size={15} />发送邀请</button>
          </form>
          {inviteLink && <div className="invite-link-card">
            <div>
              <span className="card-kicker">LOCAL INVITE LINK</span>
              <strong>注册链接已生成</strong>
              <p>本地部署不会自动发邮件，请复制下面的地址发送给成员。链接有效期 7 天，重发后旧链接立即失效。</p>
            </div>
            <div className="invite-link-row">
              <input data-invite-link value={inviteLink} readOnly aria-label="邀请注册链接" onFocus={(event) => event.target.select()} />
              <button type="button" className="subtle" onClick={copyInviteLink}><Copy size={14} />复制链接</button>
            </div>
          </div>}
        </section>

        <section className="studio-card">
          <div className="card-heading-row"><div><span className="card-kicker">PENDING ACCESS</span><h3>待处理邀请</h3></div><StatusPill tone={invitations.length ? "warn" : "ok"}>{invitations.length} pending</StatusPill></div>
          <div className="invite-list">
            {invitations.length ? invitations.map((invite) => <div className="invite-item" key={invite.id}>
              <Mail size={15} />
              <div className="invite-main"><strong>{invite.email}</strong><span>{invite.role_name || invite.role_key} · {invite.project_name ? `${invite.workspace_name} / ${invite.project_name}` : invite.workspace_name || "组织级"}</span><small>有效期至 {invite.expires_at ? new Date(invite.expires_at).toLocaleString("zh-CN", { dateStyle: "short", timeStyle: "short" }) : "-"} · {invite.token_hint || "token hidden"}</small></div>
              <div className="invite-actions"><StatusPill tone="warn">pending</StatusPill><button type="button" className="icon-text-button" onClick={() => handleResendInvitation(invite)} disabled={inviteActionId === invite.id}><RefreshCw size={13} />重发</button><button type="button" className="icon-text-button danger" onClick={() => handleRevokeInvitation(invite)} disabled={inviteActionId === invite.id}><XCircle size={13} />撤销</button></div>
            </div>) : <p className="empty-state">当前组织没有待处理邀请。</p>}
          </div>
        </section>

        <section className="studio-card">
          <div className="card-heading-row"><div><span className="card-kicker">WORKSPACE ACCESS</span><h3>当前工作区成员</h3></div><StatusPill tone="ok">{workspaceMembers.length} members</StatusPill></div>
          <div className="member-list workspace-member-list">
            {workspaceMembers.length ? workspaceMembers.map((member) => {
              const userId = member.user_id || member.id;
              const draft = workspaceMemberDrafts[userId] || { roleKey: member.role_key || "producer", accessMode: member.access_mode || "all", status: member.status || "active" };
              return <div key={member.id || userId}><span className="member-avatar">{member.display_name?.slice(0, 1)}</span><div><strong>{member.display_name}</strong><span>{member.email}</span></div><div className="member-role-editor"><select aria-label={`${member.display_name} 工作区角色`} value={draft.roleKey} onChange={(event) => setWorkspaceMemberDrafts((current) => ({ ...current, [userId]: { ...draft, roleKey: event.target.value } }))}><option value="producer">制片</option><option value="writer">编剧</option><option value="art_director">资产美术</option><option value="voice_editor">配音/字幕</option><option value="reviewer">审片</option><option value="project_guest">项目受限成员</option></select><select aria-label={`${member.display_name} 项目访问范围`} value={draft.accessMode} onChange={(event) => setWorkspaceMemberDrafts((current) => ({ ...current, [userId]: { ...draft, accessMode: event.target.value } }))}><option value="all">全部项目</option><option value="project-only">仅授权项目</option></select><select aria-label={`${member.display_name} 工作区状态`} value={draft.status} onChange={(event) => setWorkspaceMemberDrafts((current) => ({ ...current, [userId]: { ...draft, status: event.target.value } }))}><option value="active">启用</option><option value="suspended">停用</option></select><button className="icon-text-button" onClick={() => saveWorkspaceMember(member)}><Save size={13} />保存</button></div></div>;
            }) : <p className="empty-state">当前角色没有工作区成员管理权限。</p>}
          </div>
        </section>

        <section className="studio-card wide-card">
          <div className="card-heading-row"><div><span className="card-kicker">PROJECT ACCESS</span><h3>项目与访问边界</h3></div><FolderKanban size={18} /></div>
          <form onSubmit={handleProject} className="inline-admin-form project-create-form"><input required value={projectName} onChange={(event) => setProjectName(event.target.value)} placeholder="新项目名称" aria-label="新项目名称" /><button className="primary" type="submit"><Plus size={15} />创建项目</button></form>
          <div className="platform-table project-access-table">
            <div><span>项目</span><span>类型</span><span>状态</span><span>所有者</span><span>成员</span><span>风险</span></div>
            {projects.map((project) => <button key={project.id}><strong>{project.title || project.name}</strong><span>{project.type}</span><span>{project.stage || project.status}</span><span>{project.owner || project.owner_user_id}</span><span>{project.memberCount || "-"}</span><StatusPill tone={project.risk === "low" ? "ok" : "warn"}>{project.risk}</StatusPill></button>)}
          </div>
          <div className="project-members-admin">
            <div className="card-heading-row"><div><span className="card-kicker">CURRENT PROJECT</span><h3>当前项目成员角色</h3></div><StatusPill tone="ok">{projectMembers.length} members</StatusPill></div>
            {projectMembers.length ? projectMembers.map((member) => { const userId = member.user_id || member.id; const draft = projectMemberDrafts[userId] || { roleKey: member.role_key || "project_viewer", status: member.status || "active" }; return <div className="project-member-row" key={member.id || member.user_id}><div><strong>{member.display_name}</strong><span>{member.email} · {member.role_name}</span></div><select aria-label={`${member.display_name} 项目角色`} value={draft.roleKey} onChange={(event) => updateProjectMemberDraft(userId, "roleKey", event.target.value)}><option value="project_editor">项目编辑</option><option value="project_viewer">项目查看者</option></select><select aria-label={`${member.display_name} 项目状态`} value={draft.status} onChange={(event) => updateProjectMemberDraft(userId, "status", event.target.value)}><option value="active">启用</option><option value="suspended">停用</option></select><button className="icon-text-button" onClick={() => saveProjectMember(member)}><Save size={13} />保存</button></div>; }) : <p className="empty-state">当前角色没有项目成员管理权限，或当前项目还没有显式成员。</p>}
          </div>
          {members.length > projectMembers.length && <form className="invite-form project-member-add-form" onSubmit={addProjectMember}><div className="form-title"><UserPlus size={16} />添加项目成员</div><div className="form-grid"><select value={newProjectMemberId} onChange={(event) => setNewProjectMemberId(event.target.value)} aria-label="选择项目成员"><option value="">选择组织成员</option>{members.filter((member) => !projectMembers.some((existing) => (existing.user_id || existing.id) === (member.user_id || member.id))).map((member) => <option key={member.user_id || member.id} value={member.user_id || member.id}>{member.display_name || member.name} · {member.email}</option>)}</select><button className="subtle" type="submit" disabled={!newProjectMemberId}><UserPlus size={15} />加入项目</button></div></form>}
        </section>

        <section className="studio-card">
          <div className="card-heading-row"><div><span className="card-kicker">ROLE MATRIX</span><h3>权限矩阵</h3></div><ShieldCheck size={18} /></div>
          <div className="permission-list">
            {permissionMatrix.map((role) => <div key={role.role}><strong>{role.role}</strong><p>{role.permissions.join(" · ")}</p></div>)}
          </div>
          <div className="effective-permissions"><span>当前用户有效权限</span><strong>{context?.roles?.map((role) => role.name).join(" / ") || "平台管理员"}</strong><p>{context?.permissions?.slice(0, 8).join(" · ") || "workspace:* · project:* · model:*"}</p></div>
        </section>

        <section className="studio-card wide-card role-policy-editor">
          <div className="card-heading-row">
            <div><span className="card-kicker">ORGANIZATION POLICY</span><h3>组织角色权限策略</h3></div>
            <StatusPill tone={canManageRolePolicies ? "ok" : "warn"}>{canManageRolePolicies ? "可管理" : "只读"}</StatusPill>
          </div>
          {rolePolicies.roles.length ? <div className="role-policy-layout">
            <div className="role-policy-roles">
              <div className="role-policy-panel-title"><span>角色</span><small>{rolePolicies.roles.length} 个角色</small></div>
              {rolePolicies.roles.map((role) => <button key={role.key} className={`role-policy-role ${role.key === selectedPolicyRole?.key ? "selected" : ""}`} onClick={() => setSelectedPolicyRoleKey(role.key)}>
                <span><strong>{role.name}</strong><em>{role.scope === "organization" ? "组织" : role.scope === "workspace" ? "工作区" : "项目"}</em></span>
                <small>{role.permissions.length} 项有效权限</small>
              </button>)}
            </div>
            <div className="role-policy-permissions">
              <div className="role-policy-editor-head">
                <div><strong>{selectedPolicyRole?.name || "选择角色"}</strong><span>{selectedPolicyRole?.description || ""}</span></div>
                <label className="policy-search"><Search size={15} /><input value={policySearch} onChange={(event) => setPolicySearch(event.target.value)} placeholder="搜索权限" aria-label="搜索权限" /></label>
              </div>
              {selectedPolicyRole && <div className="role-policy-locks">
                <span>{selectedPolicyRole.key === "org_owner" ? "组织所有者策略已锁定" : "组织级覆盖不修改内置角色模板"}</span>
                <span>{policyOverrides.size} 项组织覆盖</span>
              </div>}
              <div className="permission-check-grid">
                {visiblePolicyPermissions.map((permission) => {
                  const checked = selectedPolicyRole?.permissions.includes(permission.key);
                  const override = policyOverrides.get(permission.key);
                  const locked = !canManageRolePolicies || selectedPolicyRole?.key === "org_owner" || permission.systemOnly;
                  return <label className={`permission-check ${locked ? "locked" : ""}`} key={permission.key}>
                    <input type="checkbox" checked={Boolean(checked)} disabled={locked} onChange={(event) => savePolicyPermission(permission, event.target.checked)} />
                    <span className="permission-check-copy"><strong>{permission.key}</strong><small>{permission.description}</small></span>
                    <span className={`permission-origin ${override ? "overridden" : "inherited"}`}>{permission.systemOnly ? "系统锁定" : override ? "组织覆盖" : "内置"}</span>
                  </label>;
                })}
              </div>
              {!visiblePolicyPermissions.length && <p className="empty-state">没有匹配的权限。</p>}
            </div>
          </div> : <div className="empty-state">当前账号没有组织角色策略管理权限。</div>}
        </section>

        <section className="studio-card">
          <div className="card-heading-row"><div><span className="card-kicker">BILLING & USAGE</span><h3>套餐与用量</h3></div><Coins size={18} /></div>
          <dl className="compact-definition-list"><dt>套餐</dt><dd>{billing.plan_name || billing.name}</dd><dt>席位</dt><dd>{billing.seat_limit || billing.seats}</dd><dt>存储</dt><dd>{billing.storage_gb || billing.storageGb} GB</dd><dt>本月任务</dt><dd>{usage?.totalCost ?? "-"} 计量成本</dd></dl>
          <div className="quota-list">{usage?.quotas?.map((quota) => <div key={`${quota.metric}-${quota.unit}`}><span>{quota.metric}</span><ProgressBar value={Math.min(100, Math.round((quota.used_value / quota.limit_value) * 100))} /><em>{quota.used_value}/{quota.limit_value} {quota.unit}</em></div>)}</div>
        </section>

        <section className="studio-card wide-card">
          <div className="card-heading-row"><div><span className="card-kicker">AUDIT TRAIL</span><h3>审计日志</h3></div><StatusPill tone="ok">immutable events</StatusPill></div>
          <div className="audit-list">
            {auditLog.map((item) => <div key={item.id}><span>{item.created_at || item.time}</span><strong>{item.action}</strong><span>{item.target_id || item.target}</span><StatusPill tone={item.result === "ok" || item.result === "pass" ? "ok" : "warn"}>{item.result}</StatusPill></div>)}
          </div>
        </section>
      </div>
    </div>
  );
}

function DirectorDesk({ project, activeShot, setActiveShotId }) {
  return (
    <div className="platform-stage">
      <SectionTitle icon={Clapperboard} title="导演工作台" />
      <div className="director-toolbar">
        {project.directorDesk.batchActions.map((action) => (
          <button key={action} className="subtle">{action}</button>
        ))}
      </div>
      <div className="director-board">
        <div className="director-table">
          <div className="director-head">
            {project.directorDesk.columns.map((column) => <span key={column}>{column}</span>)}
          </div>
          {project.shots.map((shot) => (
            <button key={shot.id} className={shot.id === activeShot.id ? "selected" : ""} onClick={() => setActiveShotId(shot.id)}>
              <span>{shot.id}</span>
              <span>{shot.characterIds.join(", ")}</span>
              <span>{shot.locationId}</span>
              <span>{shot.firstFrame}</span>
              <span>{shot.lastFrame}</span>
              <StatusPill tone="warn">待生成</StatusPill>
              <StatusPill tone="ok">voice locked</StatusPill>
              <StatusPill tone="ok">QA</StatusPill>
              <span>{shot.transitionFromPrevious}</span>
            </button>
          ))}
        </div>
        <div className="director-preview">
          <ScenePreview shot={activeShot} active />
          <div className="detail-grid">
            <div>
              <h3>镜头动作</h3>
              <p>{activeShot.action}</p>
            </div>
            <div>
              <h3>视频提示</h3>
              <p>{activeShot.videoPrompt}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

const searchTypeIcons = {
  project: FolderKanban,
  episode: BookOpen,
  script: BookOpen,
  shot: Clapperboard,
  asset: Images,
  task: ListChecks,
  job: Wand2,
  delivery: Download
};

const searchStatusLabels = {
  production: "制作中",
  draft: "草稿",
  ready: "就绪",
  open: "待处理",
  in_progress: "进行中",
  blocked: "阻塞",
  done: "已完成",
  queued: "排队中",
  running: "运行中",
  completed: "已完成",
  failed: "失败",
  published: "已发布",
  submitted: "待审批",
  approved: "已批准"
};

function GlobalSearchPalette({ open, onClose, contextOverrides, onNavigate }) {
  const inputRef = useRef(null);
  const [query, setQuery] = useState("");
  const [scope, setScope] = useState("workspace");
  const [selectedIndex, setSelectedIndex] = useState(0);
  const [payload, setPayload] = useState({ results: [], total: 0 });
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  useEffect(() => {
    if (!open) return;
    setTimeout(() => inputRef.current?.focus(), 0);
  }, [open]);

  useEffect(() => {
    if (!open) return undefined;
    const normalized = query.trim();
    if (!normalized) {
      setPayload({ results: [], total: 0 });
      setSelectedIndex(0);
      setError("");
      return undefined;
    }
    let cancelled = false;
    const timer = setTimeout(async () => {
      setLoading(true);
      try {
        const next = await searchPlatform(normalized, { scope, limit: 40 }, contextOverrides);
        if (!cancelled) {
          setPayload(next);
          setSelectedIndex(0);
          setError("");
        }
      } catch (requestError) {
        if (!cancelled) {
          setPayload({ results: [], total: 0 });
          setError(requestError.message || "搜索失败");
        }
      } finally {
        if (!cancelled) setLoading(false);
      }
    }, 180);
    return () => {
      cancelled = true;
      clearTimeout(timer);
    };
  }, [open, query, scope, contextOverrides?.organizationId, contextOverrides?.workspaceId, contextOverrides?.projectId]);

  useEffect(() => {
    if (!open) return undefined;
    function handleKeyDown(event) {
      if (event.key === "Escape") {
        event.preventDefault();
        onClose();
      } else if (event.key === "ArrowDown") {
        event.preventDefault();
        setSelectedIndex((current) => Math.min(current + 1, Math.max(0, payload.results.length - 1)));
      } else if (event.key === "ArrowUp") {
        event.preventDefault();
        setSelectedIndex((current) => Math.max(0, current - 1));
      } else if (event.key === "Enter" && payload.results[selectedIndex]) {
        event.preventDefault();
        onNavigate(payload.results[selectedIndex]);
        onClose();
      }
    }
    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [open, onClose, onNavigate, payload.results, selectedIndex]);

  if (!open) return null;
  const results = payload.results || [];
  return (
    <div className="global-search-backdrop" role="presentation" onMouseDown={(event) => event.target === event.currentTarget && onClose()}>
      <section className="global-search-dialog" role="dialog" aria-modal="true" aria-label="全局搜索">
        <div className="global-search-head">
          <div className="global-search-input-wrap"><Search size={18} /><input ref={inputRef} value={query} onChange={(event) => setQuery(event.target.value)} placeholder="搜索项目、剧本、镜头、资产、任务…" aria-label="搜索项目、剧本、镜头、资产、任务" /></div>
          <button className="icon-only-button" type="button" onClick={onClose} title="关闭搜索" aria-label="关闭搜索"><XCircle size={17} /></button>
        </div>
        <div className="global-search-toolbar">
          <div className="global-search-scope" role="group" aria-label="搜索范围">
            <button type="button" className={scope === "project" ? "selected" : ""} onClick={() => setScope("project")} disabled={!contextOverrides?.projectId}>当前项目</button>
            <button type="button" className={scope === "workspace" ? "selected" : ""} onClick={() => setScope("workspace")}>当前工作区</button>
          </div>
          <span>{loading ? "搜索中…" : query.trim() ? `${payload.total || 0} 条结果` : "输入关键词开始搜索"}</span>
        </div>
        {error && <div className="global-search-error"><AlertTriangle size={15} />{error}</div>}
        <div className="global-search-results">
          {!query.trim() && <div className="global-search-empty"><Search size={24} /><strong>搜索整个生产工作区</strong><span>项目、剧本、分集、镜头、资产、任务、生成任务和交付记录都支持快速定位。</span></div>}
          {query.trim() && !loading && !error && !results.length && <div className="global-search-empty"><Search size={24} /><strong>没有找到匹配内容</strong><span>试试项目名、镜头编号、角色名或任务关键词。</span></div>}
          {results.map((result, index) => {
            const Icon = searchTypeIcons[result.type] || Search;
            return <button key={`${result.type}-${result.id}`} type="button" className={`global-search-result ${index === selectedIndex ? "selected" : ""}`} onMouseEnter={() => setSelectedIndex(index)} onClick={() => { onNavigate(result); onClose(); }}>
              <span className="global-search-result-icon"><Icon size={16} /></span>
              <span className="global-search-result-copy"><strong>{result.title}</strong><small><b>{result.typeLabel}</b>{result.subtitle ? ` · ${result.subtitle}` : ""}</small></span>
              {result.status && <span className="global-search-result-status">{searchStatusLabels[result.status] || result.status}</span>}
              <ChevronRight size={15} />
            </button>;
          })}
        </div>
        <div className="global-search-foot"><span><kbd>↑</kbd><kbd>↓</kbd>选择</span><span><kbd>Enter</kbd>打开</span><span><kbd>Esc</kbd>关闭</span></div>
      </section>
    </div>
  );
}

function App() {
  const storedContext = getClientContext();
  const storedAuthSession = getAuthSession();
  const publicPortalToken = portalTokenFromLocation();
  const [project, setProject] = useState(emptyProject);
  const [platformContext, setPlatformContext] = useState(null);
  const [authSession, setAuthSession] = useState(storedAuthSession);
  const [authLoading, setAuthLoading] = useState(Boolean(storedAuthSession?.token));
  const [authError, setAuthError] = useState("");
  const [pendingAuthChallenge, setPendingAuthChallenge] = useState(null);
  const [loginPending, setLoginPending] = useState(false);
  const [contextLoading, setContextLoading] = useState(true);
  const [contextError, setContextError] = useState("");
  const [activeOrgId, setActiveOrgId] = useState(storedContext.organizationId || "org-studio-lab");
  const [activeWorkspaceId, setActiveWorkspaceId] = useState(storedContext.workspaceId || "ws-local-aidrama");
  const [activeProjectId, setActiveProjectId] = useState(storedContext.projectId || "");
  const [activeEpisodeId, setActiveEpisodeId] = useState(storedContext.episodeId || "");
  const [activeTabState, setActiveTabState] = useState(tabFromLocation);
  const [mobileNavOpen, setMobileNavOpen] = useState(false);
  const [searchOpen, setSearchOpen] = useState(false);
  const [activeShotId, setActiveShotId] = useState("");
  const [adapterId, setAdapterId] = useState(emptyProject.production.defaultAdapter);
  const [taskLog, setTaskLog] = useState([
    "等待当前项目数据",
    "单画面规则已启用",
    "默认适配器：用户自有模型平台"
  ]);

  function setActiveTab(nextTab) {
    const next = navigationTabIds.has(nextTab) ? nextTab : "creator-home";
    setActiveTabState(next);
    setMobileNavOpen(false);
    if (typeof window !== "undefined" && window.location.hash !== `#${next}`) {
      window.history.replaceState(null, "", `${window.location.pathname}${window.location.search}#${next}`);
    }
  }

  useEffect(() => {
    function handleHashChange() {
      const next = tabFromLocation();
      setActiveTabState(next);
      setMobileNavOpen(false);
    }
    window.addEventListener("hashchange", handleHashChange);
    return () => window.removeEventListener("hashchange", handleHashChange);
  }, []);

  useEffect(() => {
    function handleGlobalShortcut(event) {
      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
        event.preventDefault();
        setSearchOpen(true);
      }
    }
    window.addEventListener("keydown", handleGlobalShortcut);
    return () => window.removeEventListener("keydown", handleGlobalShortcut);
  }, []);

  const activeTab = activeTabState;
  const adapterCatalog = useMemo(() => adapterCatalogForContext(platformContext), [platformContext?.platform?.adapterCatalog, platformContext?.platform?.modelRegistry]);

  async function refreshContext(overrides = {}) {
    const selection = {
      userId: authSession?.user?.id || storedContext.userId || "u-owner",
      organizationId: activeOrgId,
      workspaceId: activeWorkspaceId,
      projectId: activeProjectId,
      ...overrides
    };
    setContextLoading(true);
    try {
      const payload = await fetchPlatformContext(selection);
      const current = payload.context;
      setPlatformContext(payload);
      setActiveOrgId(current.currentOrganization.id);
      setActiveWorkspaceId(current.currentWorkspace.id);
      setActiveProjectId(current.currentProject?.id || "");
      const projectPayload = await fetchProject({
        userId: current.currentUser.id,
        organizationId: current.currentOrganization.id,
        workspaceId: current.currentWorkspace.id,
        projectId: current.currentProject?.id || ""
      });
      const nextProject = projectPayload.project || createProjectShell();
      setProject(nextProject);
      setActiveEpisodeId(nextProject.episode?.id || "");
      setContextError("");
    } catch (error) {
      if (error.status === 401) {
        setAuthSession(null);
        setPlatformContext(null);
        setAuthError("登录会话已失效，请重新登录");
      }
      setContextError(error.message);
    } finally {
      setContextLoading(false);
    }
  }

  useEffect(() => {
    let cancelled = false;
    async function bootstrapAuth() {
      if (publicPortalToken) {
        setAuthLoading(false);
        setContextLoading(false);
        return;
      }
      const ssoTicket = ssoTicketFromLocation();
      const ssoError = ssoErrorFromLocation();
      if (ssoError) {
        window.history.replaceState(null, "", `${window.location.pathname}${window.location.hash || ""}`);
        setAuthError(ssoError);
      }
      if (!storedAuthSession?.token) {
        if (ssoTicket) {
          try {
            const payload = await redeemSsoTicket(ssoTicket);
            if (cancelled) return;
            window.history.replaceState(null, "", `${window.location.pathname}${window.location.hash || ""}`);
            if (payload.mfaRequired) {
              setPendingAuthChallenge(payload);
              setAuthError("");
            } else if (payload.session) {
              setAuthSession({ ...payload.session, user: payload.user });
              const current = payload.context;
              await refreshContext({ userId: payload.user.id, organizationId: current.currentOrganization.id, workspaceId: current.currentWorkspace.id, projectId: current.currentProject?.id || "" });
            }
          } catch (error) {
            if (!cancelled) setAuthError(error.message);
          }
        }
        setAuthLoading(false);
        setContextLoading(false);
        return;
      }
      try {
        const payload = await fetchAuthSession();
        if (cancelled) return;
        setAuthSession((current) => ({ ...current, user: payload.user, expiresAt: payload.session?.expiresAt }));
        await refreshContext({
          userId: payload.user.id,
          organizationId: payload.context.currentOrganization.id,
          workspaceId: payload.context.currentWorkspace.id,
          projectId: payload.context.currentProject?.id || ""
        });
      } catch (error) {
        if (cancelled) return;
        setAuthSession(null);
        setAuthError(error.status === 401 ? "登录会话已失效，请重新登录" : error.message);
      } finally {
        if (!cancelled) setAuthLoading(false);
      }
    }
    bootstrapAuth();
    return () => { cancelled = true; };
  }, [publicPortalToken]);

  async function handleLogin(credentials) {
    setLoginPending(true);
    setAuthError("");
    try {
      if (credentials.enrollmentAction === "setup") return await startMfaEnrollment(credentials.enrollmentToken);
      const payload = credentials.enrollmentAction === "complete" ? await completeMfaEnrollment(credentials) : credentials.challengeToken ? await loginWithMfa(credentials) : await login(credentials);
      if (payload.mfaRequired) return payload;
      if (!payload.session) return payload;
      setPendingAuthChallenge(null);
      setAuthSession({ ...payload.session, user: payload.user });
      const current = payload.context;
      await refreshContext({
        userId: payload.user.id,
        organizationId: current.currentOrganization.id,
        workspaceId: current.currentWorkspace.id,
        projectId: current.currentProject?.id || ""
      });
    } catch (error) {
      setAuthError(error.message);
    } finally {
      setLoginPending(false);
    }
  }

  async function handleRegistration(payload) {
    setAuthSession({ ...payload.session, user: payload.user });
    const current = payload.context;
    await refreshContext({
      userId: payload.user.id,
      organizationId: current.currentOrganization.id,
      workspaceId: current.currentWorkspace.id,
      projectId: current.currentProject?.id || ""
    });
    if (typeof window !== "undefined" && window.history.replaceState) window.history.replaceState(null, "", `${window.location.pathname}#creator-home`);
    setActiveTabState("creator-home");
  }

  async function handleLogout() {
    await logout();
    setAuthSession(null);
    setPlatformContext(null);
    setActiveTab("creator-home");
    setContextError("");
    setAuthError("");
  }

  useEffect(() => {
    setActiveShotId(project.shots[0]?.id || "");
  }, [project]);

  useEffect(() => {
    setAdapterId((current) => preferredAdapterId(adapterCatalog, current || project.production?.defaultAdapter));
  }, [adapterCatalog, project.production?.defaultAdapter]);

  function switchOrganization(organizationId) {
    refreshContext({ organizationId, workspaceId: "", projectId: "" });
  }

  function switchWorkspace(workspaceId) {
    refreshContext({ organizationId: activeOrgId, workspaceId, projectId: "" });
  }

  function switchProject(projectId) {
    refreshContext({ organizationId: activeOrgId, workspaceId: activeWorkspaceId, projectId });
  }

  async function navigateFromSearch(result) {
    const nextProjectId = result.projectId || (result.type === "project" ? result.id : activeProjectId);
    await refreshContext({
      organizationId: result.organizationId || activeOrgId,
      workspaceId: result.workspaceId || activeWorkspaceId,
      projectId: nextProjectId || ""
    });
    if (result.type === "shot" && typeof window !== "undefined") {
      window.setTimeout(() => setActiveShotId(result.id), 0);
    }
    setActiveTab(result.targetTab || "creator-home");
  }

  async function inviteFromAdmin(body) {
    const result = await inviteMember(activeOrgId, body, { organizationId: activeOrgId, workspaceId: activeWorkspaceId, projectId: activeProjectId });
    await refreshContext();
    return result;
  }

  async function resendInvitationFromAdmin(invitationId) {
    const result = await resendOrganizationInvitation(activeOrgId, invitationId, { organizationId: activeOrgId, workspaceId: activeWorkspaceId, projectId: activeProjectId });
    await refreshContext();
    return result;
  }

  async function revokeInvitationFromAdmin(invitationId) {
    const result = await revokeOrganizationInvitation(activeOrgId, invitationId, { organizationId: activeOrgId, workspaceId: activeWorkspaceId, projectId: activeProjectId });
    await refreshContext();
    return result;
  }

  async function updateOrganizationMemberFromAdmin(userId, body) {
    await updateOrganizationMember(activeOrgId, userId, body, { organizationId: activeOrgId, workspaceId: activeWorkspaceId, projectId: activeProjectId });
    await refreshContext();
  }

  async function updateOrganizationRolePolicyFromAdmin(roleKey, body) {
    await updateOrganizationRolePolicy(activeOrgId, roleKey, body, { organizationId: activeOrgId, workspaceId: activeWorkspaceId, projectId: activeProjectId });
    await refreshContext();
  }

  async function updateWorkspaceMemberFromAdmin(userId, body) {
    await updateWorkspaceMember(activeWorkspaceId, userId, body, { organizationId: activeOrgId, workspaceId: activeWorkspaceId, projectId: activeProjectId });
    await refreshContext();
  }

  async function updateProjectMemberFromAdmin(userId, body) {
    await updateProjectMember(activeProjectId, userId, body, { organizationId: activeOrgId, workspaceId: activeWorkspaceId, projectId: activeProjectId });
    await refreshContext();
  }

  async function addProjectMemberFromAdmin(userId, body) {
    await addProjectMember(activeProjectId, { userId, ...body }, { organizationId: activeOrgId, workspaceId: activeWorkspaceId, projectId: activeProjectId });
    await refreshContext();
  }

  async function updateOrganizationFromAdmin(body) {
    await updateOrganization(activeOrgId, body, { organizationId: activeOrgId, workspaceId: activeWorkspaceId, projectId: activeProjectId });
    await refreshContext();
  }

  async function updateWorkspaceFromAdmin(body) {
    await updateWorkspace(activeWorkspaceId, body, { organizationId: activeOrgId, workspaceId: activeWorkspaceId, projectId: activeProjectId });
    await refreshContext();
  }

  async function updateProjectFromAdmin(body) {
    await updateProject(activeProjectId, body, { organizationId: activeOrgId, workspaceId: activeWorkspaceId, projectId: activeProjectId });
    await refreshContext();
  }

  async function changeProjectLifecycleFromFactory(projectId, action) {
    const result = await changeProjectLifecycle(projectId, action, { organizationId: activeOrgId, workspaceId: activeWorkspaceId, projectId });
    const nextProjectId = action === "archive" && projectId === activeProjectId ? "" : activeProjectId;
    await refreshContext({ projectId: nextProjectId });
    return result;
  }

  async function createWorkspaceFromAdmin(body) {
    const result = await createWorkspace(body, { organizationId: activeOrgId, workspaceId: activeWorkspaceId, projectId: activeProjectId });
    await refreshContext({ workspaceId: result.workspace.id, projectId: "" });
  }

  async function createOrganizationFromAdmin(body) {
    const result = await createOrganization(body, { organizationId: activeOrgId, workspaceId: activeWorkspaceId, projectId: activeProjectId });
    await refreshContext({ organizationId: result.organization.id, workspaceId: "", projectId: "" });
  }

  async function createProjectFromAdmin(body) {
    const result = await createProject(body, { organizationId: activeOrgId, workspaceId: activeWorkspaceId, projectId: activeProjectId });
    await refreshContext({ projectId: result.project.id });
  }

  function syncModelRegistry(models) {
    setPlatformContext((current) => current ? { ...current, platform: { ...current.platform, modelRegistry: models, adapterCatalog: models } } : current);
  }

  async function handleInvitationAccepted(invitation) {
    await refreshContext({
      organizationId: invitation.organization_id,
      workspaceId: invitation.workspace_id || "",
      projectId: invitation.project_id || ""
    });
  }

  const activeShot = project.shots.find((shot) => shot.id === activeShotId) || project.shots[0] || {
    id: "",
    title: "尚未创建镜头",
    durationSec: 6,
    characterIds: [],
    propIds: [],
    locationId: "",
    firstFrame: "",
    lastFrame: "",
    transitionFromPrevious: "episode-start",
    voiceLines: [],
    prompt: "",
    negativePrompt: "",
    videoPrompt: "",
    seed: 0
  };
  const selectedAdapter = adapterCatalog.find((item) => item.id === adapterId) || adapterCatalog[0] || normalizeAdapter(adapters[0]);
  const qaResults = useMemo(() => projectQa(project), [project]);
  const activeQa = activeShot.id ? qaResults.find((item) => item.shotId === activeShot.id) : null;
  const exports = useMemo(() => buildAllExports(project), [project]);
  const requestPreview = useMemo(
    () => activeShot.id ? buildModelRequest(project, activeShot, selectedAdapter) : { schema: "ai-drama.job.v1", message: "请先在导演工作台创建至少一个镜头。" },
    [project, activeShot, selectedAdapter]
  );

  async function enqueueJob(kind, shotId = activeShot.id, options = {}) {
    const targetShot = project.shots.find((shot) => shot.id === shotId) || activeShot;
    if (!targetShot?.id) throw new Error("当前项目还没有可生成的镜头，请先在导演工作台创建镜头");
    const line = `${new Date().toLocaleTimeString("zh-CN", { hour12: false })} 已生成 ${targetShot.id} 的${kind}请求包，等待接入本地模型平台`;
    try {
      const result = await createJob({
        kind,
        shotId,
        adapter: options.adapter || adapterId,
        output: options.output,
        priority: options.priority,
        approveExternal: Boolean(options.approveExternal),
        dependsOnJobIds: options.dependsOnJobIds || []
      }, { organizationId: activeOrgId, workspaceId: activeWorkspaceId, projectId: activeProjectId });
      setProject((current) => ({ ...current, productionJobs: result.jobs || [result.job, ...(current.productionJobs || [])] }));
      setTaskLog((items) => [line, ...items].slice(0, 8));
      setContextError("");
      return result;
    } catch (error) {
      setContextError(error.message);
      setTaskLog((items) => [`请求未写入队列：${error.message}`, ...items].slice(0, 8));
      throw error;
    }
  }

  const qaPassCount = qaResults.flatMap((item) => item.gates).filter((gate) => gate.status === "pass").length;
  const qaGateCount = qaResults.flatMap((item) => item.gates).length;
  const contextPlatform = platformContext?.platform || {};
  const organizations = contextPlatform.organizations || [];
  const workspaces = contextPlatform.workspaces || [];
  const projects = contextPlatform.projects || [];
  const currentUser = platformContext?.context?.currentUser || authSession?.user;
  const currentRole = platformContext?.context?.systemAdmin ? "系统管理员" : (platformContext?.context?.workspaceRole || platformContext?.context?.organizationRole || "local-admin");
  const contextOverrides = {
    userId: currentUser?.id || storedContext.userId || "u-owner",
    organizationId: activeOrgId,
    workspaceId: activeWorkspaceId,
    projectId: activeProjectId,
    episodeId: activeEpisodeId
  };
  const enterpriseArea = activeTab === "creator-home" || activeTab === "tasks" || activeTab === "assistant" || activeTab === "knowledge" || activeTab === "asset-library" || activeTab === "voice-studio" || activeTab === "batch-production" || activeTab === "account" || activeTab === "factory" || activeTab === "script" || activeTab === "casting" || activeTab === "director" || activeTab === "jobs" || activeTab === "bible" || activeTab === "locks" || activeTab === "shots" || activeTab === "modelops" || activeTab === "qa" || activeTab === "export" || activeTab === "delivery-portal" || activeTab.startsWith("admin-") || activeTab.startsWith("system-");
  const effectivePermissions = new Set(platformContext?.context?.permissions || []);
  const canViewAdmin = ["workspace:create", "model:manage", "model:approve", "policy:manage", "policy:read", "organization:manage", "style:manage", "style:read", "usage:view", "compliance:manage", "audit:view", "queue:manage"].some((permission) => effectivePermissions.has(permission));
  const canViewSystem = platformContext?.context?.systemAdmin || effectivePermissions.has("system:settings:view");
  const canCreateProject = effectivePermissions.has("project:create");
  const canCreateJob = effectivePermissions.has("job:create");
  const canCreateJobNow = canCreateJob && project.status !== "archived";
  const canManageProject = effectivePermissions.has("project:manage");
  const canApproveDelivery = effectivePermissions.has("delivery:approve");
  const canApproveVoice = effectivePermissions.has("voice:approve");
  const canApproveAssets = effectivePermissions.has("compliance:manage");
  const canSeeNavigationItem = (item) => {
    if (item.requiredAnyPermissions) return item.requiredAnyPermissions.some((permission) => effectivePermissions.has(permission));
    return !item.requiredPermission || effectivePermissions.has(item.requiredPermission);
  };
  const visibleNavigationGroups = navigationGroups
    .filter((group) => group.label === "创作套件" || group.label === "账户" || group.label === "生产流水线" || (group.label === "管理员后台" && canViewAdmin) || (group.label === "系统设置" && canViewSystem))
    .map((group) => ({ ...group, items: group.items.filter(canSeeNavigationItem) }))
    .filter((group) => group.items.length);
  const activeNavigationItem = visibleNavigationGroups.flatMap((group) => group.items).find((item) => item.id === activeTab);

  useEffect(() => {
    if (platformContext && !activeNavigationItem) setActiveTab("creator-home");
  }, [platformContext, activeNavigationItem?.id]);

  if (authLoading) {
    return <div className="auth-loading"><RefreshCw size={18} />正在验证登录会话…</div>;
  }

  if (publicPortalToken) return <DeliveryPortalPage token={publicPortalToken} />;

  if (!authSession?.token) {
    const inviteToken = inviteTokenFromLocation();
    return inviteToken ? <RegisterPage inviteToken={inviteToken} onRegistered={handleRegistration} /> : <LoginPage initialChallenge={pendingAuthChallenge} onLogin={handleLogin} loading={loginPending} error={authError} />;
  }

  return (
    <div className={`app-shell ${mobileNavOpen ? "mobile-nav-open" : ""}`}>
      <aside className="sidebar">
        <div className="brand">
          <div className="brand-mark">
            <Film size={22} />
          </div>
          <div>
            <h1>AI 短剧本地生产台</h1>
            <p>{platformContext?.context?.currentOrganization?.name || project.series.title} / {project.episode.id}</p>
          </div>
        </div>

        <nav className="nav enterprise-nav">
          {visibleNavigationGroups.map((group) => (
            <div className="nav-group" key={group.label}>
              <span className="nav-group-label">{group.label}</span>
              {group.items.map((item) => {
                const Icon = item.icon;
                return <button key={item.id} className={activeTab === item.id ? "selected" : ""} onClick={() => setActiveTab(item.id)} title={item.label}><Icon size={17} /><span>{item.label}</span></button>;
              })}
            </div>
          ))}
        </nav>

        <div className="template-list">
          <h2>流程模板</h2>
            {canCreateJobNow && workflowTemplates.map((template) => (
            <button
              key={template.id}
              className={template.id === project.production.defaultTemplate ? "template active" : "template"}
              onClick={() => setActiveTab("jobs")}
            >
              <span>{template.name}</span>
              <StatusPill tone={template.status === "主流程" ? "ok" : "neutral"}>{template.status}</StatusPill>
            </button>
          ))}
        </div>
      </aside>

      {mobileNavOpen && <button className="mobile-nav-scrim" aria-label="关闭导航" onClick={() => setMobileNavOpen(false)} />}

      <main className="workspace">
        <header className="topbar">
          <div className="topbar-heading">
            <button className="mobile-menu-toggle" type="button" aria-label="打开导航" aria-expanded={mobileNavOpen} onClick={() => setMobileNavOpen(true)}><Menu size={18} /></button>
            <div>
            <p className="path">/Users/xz/Documents/daima/ai短剧/ai-drama-platform</p>
            <h2>{activeNavigationItem?.label || (activeTab === "overview" ? "商用生产总控台" : project.episode.title)}</h2>
            </div>
          </div>
          <div className="top-actions">
            <div className="scope-switchers">
              <label><Building2 size={14} /><span>组织</span><select value={activeOrgId} onChange={(event) => switchOrganization(event.target.value)} disabled={contextLoading || !organizations.length} aria-label="组织切换"><option value="">选择组织</option>{organizations.map((organization) => <option key={organization.id} value={organization.id}>{organization.name}</option>)}</select></label>
              <label><FolderKanban size={14} /><span>工作区</span><select value={activeWorkspaceId} onChange={(event) => switchWorkspace(event.target.value)} disabled={contextLoading || !workspaces.length} aria-label="工作区切换"><option value="">选择工作区</option>{workspaces.map((workspace) => <option key={workspace.id} value={workspace.id}>{workspace.name}</option>)}</select></label>
              <label><Film size={14} /><span>项目</span><select value={activeProjectId} onChange={(event) => switchProject(event.target.value)} disabled={contextLoading || !projects.length} aria-label="项目切换"><option value="">选择项目</option>{projects.map((projectItem) => <option key={projectItem.id} value={projectItem.id}>{projectItem.title || projectItem.name}</option>)}</select></label>
            </div>
            <button className="topbar-search-trigger" type="button" onClick={() => setSearchOpen(true)} title="打开全局搜索"><Search size={15} /><span>搜索生产内容</span><kbd>⌘K</kbd></button>
            <NotificationBell contextOverrides={contextOverrides} onOpen={setActiveTab} />
            <div className="user-context"><span className="user-avatar">{currentUser?.display_name?.slice(0, 1) || "林"}</span><div><strong>{currentUser?.display_name || "本地用户"}</strong><span>{currentRole}</span></div><button className="icon-only-button" title="账号与安全" aria-label="账号与安全" onClick={() => setActiveTab("account")}><KeyRound size={15} /></button><button className="icon-only-button" title="退出登录" aria-label="退出登录" onClick={handleLogout}><LogOut size={15} /></button></div>
            {canCreateJobNow && <select value={adapterId} onChange={(event) => setAdapterId(event.target.value)} aria-label="生成适配器">
              {adapterCatalog.map((adapter) => <option key={adapter.id} value={adapter.id}>{adapter.label} · {adapter.status === "ready" ? "就绪" : adapter.status === "optional" ? "可选" : adapter.status === "paused" ? "已暂停" : "未就绪"}</option>)}
            </select>}
            {canCreateJobNow && <button className="primary" onClick={() => enqueueJob("图生视频")}>
              <Play size={16} />
              <span>生成请求包</span>
            </button>}
          </div>
        </header>

        {contextError && <div className="context-alert"><AlertTriangle size={16} /><span>{contextError}</span><button className="subtle" onClick={() => refreshContext()}><RefreshCw size={14} />重试</button></div>}

        {project.status === "archived" && <div className="project-lifecycle-alert"><Archive size={17} /><div><strong>当前项目已归档</strong><span>生产数据仍可查看和审计；生成、资产编辑、剧本改稿、QA 和交付写操作已锁定。</span></div>{canManageProject && <button className="subtle" onClick={() => setActiveTab("factory")}><FolderKanban size={14} />打开项目目录</button>}</div>}

        {!enterpriseArea && <section className="metrics-row">
          <Metric icon={Layers3} label="分镜" value={`${project.shots.length} 个`} />
          <Metric icon={Mic2} label="对白" value={`${project.shots.flatMap((shot) => shot.voiceLines).length} 句`} />
          <Metric icon={Gauge} label="QA" value={`${qaPassCount}/${qaGateCount}`} />
          <Metric icon={TimerReset} label="批次" value={project.production.batchId} />
        </section>}

        <div className={`content-grid ${enterpriseArea ? "enterprise-content-grid" : ""}`}>
          <section className="primary-panel">
            {activeTab === "creator-home" && <CreatorHomePage project={project} platformContext={platformContext} contextOverrides={contextOverrides} setActiveTab={setActiveTab} canCreateProject={canCreateProject} allowedTabs={visibleNavigationGroups.flatMap((group) => group.items).map((item) => item.id)} />}

            {activeTab === "tasks" && <TaskCenterPage platformContext={platformContext} contextOverrides={contextOverrides} />}

            {activeTab === "account" && <AccountSecurityPage authSession={authSession} platformContext={platformContext} contextOverrides={contextOverrides} onInvitationAccepted={handleInvitationAccepted} />}

            {activeTab === "notifications" && <NotificationCenterPage contextOverrides={contextOverrides} setActiveTab={setActiveTab} />}

            {activeTab === "assistant" && <ProjectAssistantPage project={project} setActiveTab={setActiveTab} allowedTabs={visibleNavigationGroups.flatMap((group) => group.items).map((item) => item.id)} />}

            {activeTab === "knowledge" && <KnowledgeLibraryPage platformContext={platformContext} contextOverrides={contextOverrides} />}

            {activeTab === "asset-library" && <AssetLibraryPage project={project} contextOverrides={contextOverrides} canApproveAssets={canApproveAssets} />}

            {activeTab === "voice-studio" && <VoiceStudioPage project={project} onQueueJob={enqueueJob} contextOverrides={contextOverrides} canApproveVoice={canApproveVoice} />}

            {activeTab === "batch-production" && <BatchProductionPage project={project} contextOverrides={contextOverrides} onQueueJob={enqueueJob} />}

            {activeTab === "overview" && (
              <Cockpit
                project={project}
                qaResults={qaResults}
                setActiveTab={setActiveTab}
                setActiveShotId={setActiveShotId}
                platformContext={platformContext}
                canCreateJob={canCreateJobNow}
                canApproveDelivery={canApproveDelivery}
              />
            )}

            {activeTab === "factory" && <ProjectFactoryPage platformContext={platformContext} contextOverrides={contextOverrides} canCreateProject={canCreateProject} canManageProject={canManageProject} onProjectCreated={createProjectFromAdmin} onSwitchProject={switchProject} onProjectLifecycle={changeProjectLifecycleFromFactory} />}

            {activeTab === "script" && <ScriptProductionPage project={project} contextOverrides={contextOverrides} canEditAssets={effectivePermissions.has("asset:edit")} />}

            {activeTab === "casting" && <CastingBoardPage contextOverrides={contextOverrides} />}

            {activeTab === "director" && (
              <DirectorProductionPage project={project} contextOverrides={contextOverrides} canCreateJob={canCreateJobNow} onQueueJob={enqueueJob} />
            )}

            {activeTab === "bible" && <SeriesBiblePage project={project} contextOverrides={contextOverrides} canEdit={effectivePermissions.has("script:edit")} onEpisodeChange={setActiveEpisodeId} />}

            {activeTab === "locks" && <CastingBoardPage contextOverrides={contextOverrides} />}

            {activeTab === "shots" && <DirectorProductionPage project={project} contextOverrides={contextOverrides} canCreateJob={canCreateJobNow} onQueueJob={enqueueJob} />}

            {activeTab === "jobs" && <GenerationQueuePage project={project} contextOverrides={contextOverrides} canCreateJob={canCreateJobNow} canManageJobs={effectivePermissions.has("job:prioritize") || effectivePermissions.has("queue:manage")} canApproveExternal={effectivePermissions.has("model:manage")} adapters={adapterCatalog} adapterId={adapterId} setAdapterId={setAdapterId} activeShot={activeShot} requestPreview={requestPreview} onQueueJob={enqueueJob} setActiveShotId={setActiveShotId} />}

            {activeTab === "modelops" && <AdminModelsPage platformContext={platformContext} contextOverrides={contextOverrides} onModelsChanged={syncModelRegistry} />}

            {activeTab === "qa" && <QaReviewPage contextOverrides={contextOverrides} />}

            {activeTab === "compliance" && <ComplianceCenter platformContext={platformContext} />}

            {activeTab === "export" && <DeliveryOpsPage contextOverrides={contextOverrides} canApproveDelivery={canApproveDelivery} />}

            {activeTab === "delivery-portal" && <DeliveryAccessPage contextOverrides={contextOverrides} canApproveDelivery={canApproveDelivery} />}

            {activeTab === "admin" && <AdminCenter platformContext={platformContext} onRefresh={refreshContext} onSwitchOrganization={switchOrganization} onInvite={inviteFromAdmin} onResendInvitation={resendInvitationFromAdmin} onRevokeInvitation={revokeInvitationFromAdmin} onCreateOrganization={createOrganizationFromAdmin} onCreateWorkspace={createWorkspaceFromAdmin} onCreateProject={createProjectFromAdmin} onUpdateOrganization={updateOrganizationFromAdmin} onUpdateWorkspace={updateWorkspaceFromAdmin} onUpdateProject={updateProjectFromAdmin} onUpdateOrganizationMember={updateOrganizationMemberFromAdmin} onUpdateOrganizationRolePolicy={updateOrganizationRolePolicyFromAdmin} onUpdateWorkspaceMember={updateWorkspaceMemberFromAdmin} onUpdateProjectMember={updateProjectMemberFromAdmin} onAddProjectMember={addProjectMemberFromAdmin} />}
            {activeTab === "admin-overview" && <AdminOverviewPage platformContext={platformContext} contextOverrides={contextOverrides} setActiveTab={setActiveTab} />}
            {(activeTab === "admin-organizations" || activeTab === "admin-members") && <AdminCenter platformContext={platformContext} onRefresh={refreshContext} onSwitchOrganization={switchOrganization} onInvite={inviteFromAdmin} onResendInvitation={resendInvitationFromAdmin} onRevokeInvitation={revokeInvitationFromAdmin} onCreateOrganization={createOrganizationFromAdmin} onCreateWorkspace={createWorkspaceFromAdmin} onCreateProject={createProjectFromAdmin} onUpdateOrganization={updateOrganizationFromAdmin} onUpdateWorkspace={updateWorkspaceFromAdmin} onUpdateProject={updateProjectFromAdmin} onUpdateOrganizationMember={updateOrganizationMemberFromAdmin} onUpdateOrganizationRolePolicy={updateOrganizationRolePolicyFromAdmin} onUpdateWorkspaceMember={updateWorkspaceMemberFromAdmin} onUpdateProjectMember={updateProjectMemberFromAdmin} onAddProjectMember={addProjectMemberFromAdmin} />}
            {activeTab === "admin-policies" && <AdminPolicyCenterPage platformContext={platformContext} contextOverrides={contextOverrides} />}
            {activeTab === "admin-style-kits" && <AdminStyleKitsPage platformContext={platformContext} contextOverrides={contextOverrides} />}
            {activeTab === "admin-models" && <AdminModelsPage platformContext={platformContext} contextOverrides={contextOverrides} onModelsChanged={syncModelRegistry} />}
            {activeTab === "admin-queue" && <AdminQueuePage platformContext={platformContext} contextOverrides={contextOverrides} />}
            {activeTab === "admin-usage" && <AdminUsagePage contextOverrides={contextOverrides} platformContext={platformContext} />}
            {activeTab === "admin-audit" && <AdminAuditPage platformContext={platformContext} contextOverrides={contextOverrides} />}
            {activeTab === "system-overview" && <SystemSettingsPage section="overview" contextOverrides={contextOverrides} />}
            {activeTab === "system-identity" && <IdentityCenterPage contextOverrides={contextOverrides} />}
            {activeTab === "system-users" && <SystemUsersPage contextOverrides={contextOverrides} />}
            {activeTab === "system-generation" && <SystemSettingsPage section="generation" contextOverrides={contextOverrides} />}
            {activeTab === "system-storage" && <SystemSettingsPage section="storage" contextOverrides={contextOverrides} />}
            {activeTab === "system-notifications" && <SystemSettingsPage section="notifications" contextOverrides={contextOverrides} />}
            {activeTab === "system-features" && <SystemSettingsPage section="features" contextOverrides={contextOverrides} />}
          </section>

          {!enterpriseArea && <aside className="inspector">
            <SectionTitle icon={Settings2} title="镜头检查器" />
            <div className="inspector-block">
              <label>当前镜头</label>
              <select value={activeShotId} onChange={(event) => setActiveShotId(event.target.value)}>
                {project.shots.map((shot) => (
                  <option key={shot.id} value={shot.id}>
                    {shot.id} / {shot.title}
                  </option>
                ))}
              </select>
            </div>
            <div className="inspector-block">
              <label>Dialogue</label>
              {activeShot.voiceLines.map((line) => {
                const character = project.characters.find((item) => item.id === line.characterId);
                return (
                  <div className="line-card" key={line.id}>
                    <strong>{character?.name}</strong>
                    <p>{line.text}</p>
                    <span>{line.mouthPlan} / {line.targetDurationSec}s</span>
                  </div>
                );
              })}
            </div>
            <div className="inspector-block">
              <label>Continuity Ledger</label>
              {project.ledger.map((item) => (
                <div className="ledger-row" key={`${item.time}-${item.item}`}>
                  <strong>{item.time}</strong>
                  <span>{item.item}</span>
                  <p>{item.state}</p>
                </div>
              ))}
            </div>
          </aside>}
        </div>
      </main>
      <GlobalSearchPalette open={searchOpen} onClose={() => setSearchOpen(false)} contextOverrides={contextOverrides} onNavigate={navigateFromSearch} />
    </div>
  );
}

export default App;