"use client";

/**
 * 安全合規 (/security-compliance) — Sprint 5 整合頁面
 * 整合: 安全掃描 + 合規報告
 * @updated 2026-04-09 Claude Opus 4.6 — 改用 Panel 元件解決 double AppLayout
 */

import { useTranslations } from "next-intl";
import Link from "next/link";
import type { Route } from "next";
import {
  Activity,
  ArrowRight,
  CheckCircle2,
  ClipboardCheck,
  GitBranch,
  Lock,
  Radar,
  ShieldCheck,
} from "lucide-react";
import { AppLayout } from "@/components/layout";
import { PageTabs, type TabConfig } from "@/components/layout/page-tabs";
import { SecurityPanel } from "@/components/panels/SecurityPanel";
import { CompliancePanel } from "@/components/panels/CompliancePanel";

const integrationItems = [
  { key: "routePreserved", value: "保留", icon: ShieldCheck, color: "#1f7a4d" },
  { key: "iwooosBridge", value: "整合", icon: GitBranch, color: "#d97757" },
  {
    key: "dedupeNarrative",
    value: "收斂",
    icon: CheckCircle2,
    color: "#1f7a4d",
  },
  { key: "noRuntimeControl", value: "0", icon: Lock, color: "#6f6d66" },
] as const;

const authoritySignals = [
  { key: "source", value: "IwoooS", icon: ShieldCheck, color: "#1f7a4d" },
  { key: "progress", value: "64%", icon: Activity, color: "#d97757" },
  { key: "gate", value: "0", icon: Lock, color: "#6f6d66" },
  { key: "mode", value: "只讀", icon: ClipboardCheck, color: "#1f7a4d" },
] as const;

const integrationBoundaries = [
  "security_compliance_route_preserved=true",
  "security_compliance_removed=false",
  "security_compliance_integration_mode=iwooos_frontstage_bridge",
  "security_compliance_authoritative_entry=iwooos",
  "security_compliance_frontstage_summary_mode=compact_first",
  "security_compliance_frontstage_default_detail_collapsed=true",
  "security_compliance_frontstage_route_role_count=5",
  "security_compliance_frontstage_primary_source=iwooos",
  "security_compliance_frontstage_execution_entry_count=0",
  "security_compliance_frontstage_links_read_only=true",
  "iwooos_authoritative_security_entry=true",
  "runtime_execution_authorized=false",
  "active_runtime_gate_count=0",
  "action_buttons_allowed=false",
  "not_authorization=true",
] as const;

const routeRoleItems = [
  {
    key: "iwooosOverview",
    href: "/iwooos",
    route: "IwoooS",
    icon: ShieldCheck,
    color: "#1f7a4d",
  },
  {
    key: "securityComplianceHub",
    href: "/security-compliance",
    route: "安全合規",
    icon: Radar,
    color: "#d97757",
  },
  {
    key: "securityMonitor",
    href: "/security",
    route: "安全",
    icon: Activity,
    color: "#d97757",
  },
  {
    key: "complianceStats",
    href: "/compliance",
    route: "合規",
    icon: ClipboardCheck,
    color: "#1f7a4d",
  },
  {
    key: "awooopApprovals",
    href: "/awooop/approvals",
    route: "AwoooP",
    icon: Lock,
    color: "#6f6d66",
  },
] as const;

const rolloutPhaseItems = [
  { key: "observe", phase: "01", state: "現在", icon: Radar, color: "#d97757" },
  {
    key: "evidence",
    phase: "02",
    state: "補證",
    icon: ClipboardCheck,
    color: "#1f7a4d",
  },
  {
    key: "humanReview",
    phase: "03",
    state: "人控",
    icon: CheckCircle2,
    color: "#1f7a4d",
  },
  {
    key: "runtimeGate",
    phase: "04",
    state: "批准後",
    icon: ShieldCheck,
    color: "#6f6d66",
  },
  {
    key: "tightening",
    phase: "05",
    state: "收斂",
    icon: Lock,
    color: "#6f6d66",
  },
] as const;

const rolloutBoundaries = [
  "security_compliance_rollout_phase_count=5",
  "security_compliance_rollout_current_phase=observe_first",
  "security_compliance_rollout_runtime_phase_enabled=false",
  "security_compliance_rollout_enforcement_enabled=false",
  "security_compliance_rollout_action_buttons_allowed=false",
  "runtime_execution_authorized=false",
  "active_runtime_gate_count=0",
  "action_buttons_allowed=false",
  "not_authorization=true",
] as const;

function SecurityComplianceFrontStage({ locale: _locale }: { locale: string }) {
  const t = useTranslations("securityCompliance.frontStage");
  const textWrap = {
    overflowWrap: "anywhere" as const,
    wordBreak: "break-word" as const,
  };

  return (
    <section
      data-testid="security-compliance-iwooos-frontstage-bridge"
      style={{
        background: "#fffdf8",
        borderTop: "0.5px solid #e0ddd4",
        borderBottom: "0.5px solid #e0ddd4",
        padding: "18px 24px",
      }}
    >
      <div
        style={{
          display: "grid",
          gridTemplateColumns:
            "repeat(auto-fit, minmax(min(100%, 300px), 1fr))",
          gap: 16,
          alignItems: "start",
          maxWidth: 1280,
          margin: "0 auto",
        }}
      >
        <div style={{ minWidth: 0 }}>
          <div
            style={{
              display: "flex",
              alignItems: "center",
              gap: 8,
              marginBottom: 8,
            }}
          >
            <ShieldCheck size={18} color="#1f7a4d" />
            <span style={{ fontSize: 12, color: "#6f6d66", fontWeight: 700 }}>
              {t("eyebrow")}
            </span>
          </div>
          <h1
            style={{
              fontSize: 24,
              lineHeight: 1.15,
              margin: 0,
              color: "#141413",
            }}
          >
            {t("title")}
          </h1>
          <p
            style={{
              fontSize: 12,
              color: "#5f5d56",
              lineHeight: 1.65,
              margin: "8px 0 0",
              ...textWrap,
            }}
          >
            {t("subtitle")}
          </p>
          <div
            data-testid="security-compliance-authoritative-iwooos-strip"
            style={{
              display: "grid",
              gridTemplateColumns:
                "repeat(auto-fit, minmax(min(100%, 260px), 1fr))",
              gap: 10,
              alignItems: "stretch",
              marginTop: 14,
            }}
          >
            <div
              style={{
                background: "#141413",
                border: "0.5px solid #2f2d29",
                borderRadius: 8,
                padding: 14,
                display: "grid",
                alignContent: "center",
                gap: 6,
                ...textWrap,
              }}
            >
              <span style={{ fontSize: 11, color: "#d7d2c5", fontWeight: 700 }}>
                {t("authority.eyebrow")}
              </span>
              <h2
                style={{
                  fontSize: 16,
                  lineHeight: 1.25,
                  margin: 0,
                  color: "#fffdf8",
                }}
              >
                {t("authority.title")}
              </h2>
              <p
                style={{
                  fontSize: 12,
                  color: "#d7d2c5",
                  lineHeight: 1.5,
                  margin: 0,
                }}
              >
                {t("authority.body")}
              </p>
            </div>
            <div
              style={{
                background: "#fff",
                border: "0.5px solid #eee9dd",
                borderRadius: 8,
                padding: 10,
                display: "grid",
                gap: 8,
              }}
            >
              <div
                style={{
                  display: "grid",
                  gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
                  gap: 8,
                }}
              >
                {authoritySignals.map((item) => {
                  const Icon = item.icon;
                  return (
                    <div
                      key={item.key}
                      style={{
                        border: "0.5px solid #eee9dd",
                        borderRadius: 8,
                        minHeight: 72,
                        padding: 9,
                        display: "grid",
                        alignContent: "start",
                        gap: 6,
                        background: "#fffdf8",
                        ...textWrap,
                      }}
                    >
                      <div
                        style={{
                          display: "flex",
                          alignItems: "center",
                          justifyContent: "space-between",
                          gap: 8,
                        }}
                      >
                        <span style={{ fontSize: 10, color: "#87867f" }}>
                          {t(`authority.signals.${item.key}.label` as never)}
                        </span>
                        <Icon size={14} color={item.color} />
                      </div>
                      <div
                        style={{
                          fontSize: 18,
                          fontWeight: 700,
                          lineHeight: 1,
                          color: item.color,
                        }}
                      >
                        {item.value}
                      </div>
                    </div>
                  );
                })}
              </div>
              <Link
                href="/iwooos"
                aria-label={t("authority.open")}
                style={{
                  display: "inline-flex",
                  alignItems: "center",
                  justifyContent: "center",
                  gap: 7,
                  minHeight: 34,
                  padding: "0 12px",
                  border: "0.5px solid #d97757",
                  borderRadius: 8,
                  background: "#fff",
                  color: "#141413",
                  textDecoration: "none",
                  fontSize: 12,
                  fontWeight: 700,
                }}
              >
                {t("authority.open")}
                <ArrowRight size={14} strokeWidth={1.8} />
              </Link>
            </div>
          </div>
          <div
            style={{
              display: "grid",
              gridTemplateColumns:
                "repeat(auto-fit, minmax(min(100%, 180px), 1fr))",
              gap: 8,
              marginTop: 14,
            }}
          >
            {integrationItems.map((item) => {
              const Icon = item.icon;
              return (
                <div
                  key={item.key}
                  style={{
                    background: "#fff",
                    border: "0.5px solid #eee9dd",
                    borderRadius: 8,
                    minHeight: 98,
                    padding: 12,
                    display: "grid",
                    alignContent: "start",
                    gap: 8,
                    ...textWrap,
                  }}
                >
                  <div
                    style={{
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "space-between",
                      gap: 8,
                    }}
                  >
                    <span style={{ fontSize: 11, color: "#87867f" }}>
                      {t(`items.${item.key}.label` as never)}
                    </span>
                    <Icon size={16} color={item.color} />
                  </div>
                  <div
                    style={{
                      fontSize: 20,
                      fontWeight: 700,
                      color: item.color,
                      lineHeight: 1,
                    }}
                  >
                    {item.value}
                  </div>
                  <p
                    style={{
                      fontSize: 11,
                      lineHeight: 1.45,
                      color: "#6f6d66",
                      margin: 0,
                    }}
                  >
                    {t(`items.${item.key}.detail` as never)}
                  </p>
                </div>
              );
            })}
          </div>
          <details
            data-testid="security-compliance-frontstage-route-role-map"
            style={{
              background: "#fff",
              border: "0.5px solid #eee9dd",
              borderRadius: 8,
              marginTop: 14,
              padding: 12,
              ...textWrap,
            }}
          >
            <summary
              style={{
                cursor: "pointer",
                display: "grid",
                gridTemplateColumns: "minmax(0, 1fr) auto",
                gap: 10,
                alignItems: "center",
                listStyle: "none",
              }}
            >
              <div>
                <h2 style={{ fontSize: 14, margin: 0, color: "#141413" }}>
                  {t("routeRoleTitle")}
                </h2>
                <p
                  style={{
                    fontSize: 11,
                    color: "#6f6d66",
                    lineHeight: 1.55,
                    margin: "5px 0 0",
                  }}
                >
                  {t("routeRoleSubtitle")}
                </p>
              </div>
              <ArrowRight size={14} color="#87867f" strokeWidth={1.8} />
            </summary>
            <div
              style={{
                display: "grid",
                gridTemplateColumns:
                  "repeat(auto-fit, minmax(min(100%, 220px), 1fr))",
                gap: 8,
                marginTop: 10,
              }}
            >
              {routeRoleItems.map((item) => {
                const Icon = item.icon;
                const routeHref = item.href as Route;
                return (
                  <Link
                    key={item.key}
                    href={routeHref}
                    aria-label={t(`routeRoles.${item.key}.title` as never)}
                    style={{
                      display: "grid",
                      gap: 6,
                      minHeight: 118,
                      border: "0.5px solid #e7e1d3",
                      borderRadius: 8,
                      padding: 10,
                      color: "#141413",
                      textDecoration: "none",
                      background: "#fffdf8",
                      ...textWrap,
                    }}
                  >
                    <div
                      style={{
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "space-between",
                        gap: 8,
                      }}
                    >
                      <span style={{ fontSize: 10, color: "#87867f" }}>
                        {t("routeLabel")} {item.route}
                      </span>
                      <Icon size={15} color={item.color} />
                    </div>
                    <h3
                      style={{
                        fontSize: 13,
                        lineHeight: 1.25,
                        margin: 0,
                        color: "#141413",
                      }}
                    >
                      {t(`routeRoles.${item.key}.title` as never)}
                    </h3>
                    <p
                      style={{
                        fontSize: 11,
                        color: "#6f6d66",
                        lineHeight: 1.45,
                        margin: 0,
                      }}
                    >
                      {t(`routeRoles.${item.key}.body` as never)}
                    </p>
                  </Link>
                );
              })}
            </div>
          </details>
          <details
            data-testid="security-compliance-low-friction-rollout-ladder"
            style={{
              background: "#fff",
              border: "0.5px solid #eee9dd",
              borderRadius: 8,
              marginTop: 14,
              padding: 12,
              ...textWrap,
            }}
          >
            <summary
              style={{
                cursor: "pointer",
                display: "grid",
                gridTemplateColumns: "minmax(0, 1fr) auto",
                gap: 10,
                alignItems: "center",
                listStyle: "none",
              }}
            >
              <div>
                <h2 style={{ fontSize: 14, margin: 0, color: "#141413" }}>
                  {t("rolloutTitle")}
                </h2>
                <p
                  style={{
                    fontSize: 11,
                    color: "#6f6d66",
                    lineHeight: 1.55,
                    margin: "5px 0 0",
                  }}
                >
                  {t("rolloutSubtitle")}
                </p>
              </div>
              <ArrowRight size={14} color="#87867f" strokeWidth={1.8} />
            </summary>
            <div
              style={{
                display: "grid",
                gridTemplateColumns:
                  "repeat(auto-fit, minmax(min(100%, 210px), 1fr))",
                gap: 8,
                marginTop: 10,
              }}
            >
              {rolloutPhaseItems.map((item) => {
                const Icon = item.icon;
                return (
                  <div
                    key={item.key}
                    style={{
                      display: "grid",
                      alignContent: "start",
                      gap: 6,
                      minHeight: 128,
                      border: "0.5px solid #e7e1d3",
                      borderRadius: 8,
                      padding: 10,
                      background: "#fffdf8",
                      ...textWrap,
                    }}
                  >
                    <div
                      style={{
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "space-between",
                        gap: 8,
                      }}
                    >
                      <span style={{ fontSize: 10, color: "#87867f" }}>
                        {t("phaseLabel")} {item.phase}
                      </span>
                      <Icon size={15} color={item.color} />
                    </div>
                    <div
                      style={{
                        fontSize: 18,
                        lineHeight: 1,
                        fontWeight: 700,
                        color: item.color,
                      }}
                    >
                      {item.state}
                    </div>
                    <h3
                      style={{
                        fontSize: 13,
                        lineHeight: 1.25,
                        margin: 0,
                        color: "#141413",
                      }}
                    >
                      {t(`rolloutPhases.${item.key}.title` as never)}
                    </h3>
                    <p
                      style={{
                        fontSize: 11,
                        color: "#6f6d66",
                        lineHeight: 1.45,
                        margin: 0,
                      }}
                    >
                      {t(`rolloutPhases.${item.key}.body` as never)}
                    </p>
                  </div>
                );
              })}
            </div>
            <div
              style={{
                display: "grid",
                gridTemplateColumns: "repeat(auto-fit, minmax(190px, 1fr))",
                gap: 6,
                marginTop: 10,
              }}
            >
              {rolloutBoundaries.map((boundary) => (
                <code
                  key={boundary}
                  style={{
                    background: "#f7f5ee",
                    border: "0.5px solid #e7e1d3",
                    borderRadius: 8,
                    padding: "7px 9px",
                    color: "#4f4c45",
                    fontSize: 11,
                    lineHeight: 1.45,
                    ...textWrap,
                  }}
                >
                  {boundary}
                </code>
              ))}
            </div>
          </details>
        </div>

        <div
          style={{
            background: "#f7f5ee",
            border: "0.5px solid #e0ddd4",
            borderRadius: 8,
            padding: 14,
            minWidth: 0,
          }}
        >
          <div
            style={{
              display: "flex",
              alignItems: "center",
              gap: 8,
              marginBottom: 8,
            }}
          >
            <Lock size={16} color="#6f6d66" />
            <h2 style={{ fontSize: 14, margin: 0, color: "#141413" }}>
              {t("boundaryTitle")}
            </h2>
          </div>
          <p
            style={{
              fontSize: 12,
              color: "#6f6d66",
              lineHeight: 1.55,
              margin: "0 0 10px",
              ...textWrap,
            }}
          >
            {t("boundaryIntro")}
          </p>
          <details
            data-testid="security-compliance-frontstage-boundary-codes"
            style={{
              background: "#fff",
              border: "0.5px solid #e7e1d3",
              borderRadius: 8,
              padding: 10,
              marginBottom: 12,
              ...textWrap,
            }}
          >
            <summary
              style={{
                cursor: "pointer",
                display: "grid",
                gridTemplateColumns: "minmax(0, 1fr) auto",
                gap: 10,
                alignItems: "center",
                listStyle: "none",
                fontSize: 12,
                fontWeight: 700,
                color: "#4f4c45",
              }}
            >
              <span>{t("boundaryCodesSummary")}</span>
              <ArrowRight size={14} color="#87867f" strokeWidth={1.8} />
            </summary>
            <div style={{ display: "grid", gap: 6, marginTop: 10 }}>
              {integrationBoundaries.map((boundary) => (
                <code
                  key={boundary}
                  style={{
                    background: "#fff",
                    border: "0.5px solid #e7e1d3",
                    borderRadius: 8,
                    padding: "7px 9px",
                    color: "#4f4c45",
                    fontSize: 11,
                    lineHeight: 1.45,
                    ...textWrap,
                  }}
                >
                  {boundary}
                </code>
              ))}
            </div>
          </details>
          <Link
            href="/iwooos"
            aria-label={t("openIwooos")}
            style={{
              display: "inline-flex",
              alignItems: "center",
              justifyContent: "center",
              gap: 7,
              minHeight: 34,
              padding: "0 12px",
              border: "0.5px solid #d97757",
              borderRadius: 8,
              background: "#fff",
              color: "#141413",
              textDecoration: "none",
              fontSize: 12,
              fontWeight: 700,
            }}
          >
            {t("openIwooos")}
            <ArrowRight size={14} strokeWidth={1.8} />
          </Link>
        </div>
      </div>
    </section>
  );
}

export default function SecurityCompliancePage({
  params,
}: {
  params: { locale: string };
}) {
  const t = useTranslations("nav");

  const tabs: TabConfig[] = [
    { id: "security", label: t("security"), content: <SecurityPanel /> },
    { id: "compliance", label: t("compliance"), content: <CompliancePanel /> },
  ];

  return (
    <AppLayout locale={params.locale}>
      <SecurityComplianceFrontStage locale={params.locale} />
      <PageTabs tabs={tabs} defaultTab="security" syncWithUrl={true} />
    </AppLayout>
  );
}
