import type { Props } from "./schema";

const CSS = String.raw`
.asset-incident-escalation-policy{font-family:var(--font-sans);color:var(--color-primary);background:var(--color-surface);max-width:var(--container-slide);margin:auto;padding:3rem 2.5rem;line-height:1.6;font-size:var(--text-body-sm)}
.asset-incident-escalation-policy *{box-sizing:border-box}.asset-incident-escalation-policy header{margin-bottom:2rem}.asset-incident-escalation-policy .eyebrow{font-family:var(--font-mono);font-size:var(--text-label);color:var(--color-tertiary);margin-bottom:.75rem}.asset-incident-escalation-policy h1{font-size:var(--text-h1);line-height:1.3;max-width:28em}.asset-incident-escalation-policy .subtitle{margin-top:.75rem;color:var(--color-secondary)}
.asset-incident-escalation-policy .policy{border-top:2px solid var(--color-primary)}.asset-incident-escalation-policy .tier{display:grid;grid-template-columns:minmax(9rem,1fr) minmax(18rem,2fr) minmax(12rem,1.15fr) minmax(16rem,1.6fr);gap:1rem;padding:1.2rem 0;border-bottom:1px solid var(--color-outline);align-items:start}.asset-incident-escalation-policy .tier>*{min-width:0}.asset-incident-escalation-policy .priority{display:flex;gap:.7rem;align-items:baseline}.asset-incident-escalation-policy .priority b{font-family:var(--font-mono);font-size:var(--text-h2);font-variant-numeric:tabular-nums}.asset-incident-escalation-policy .priority span{font-weight:650}.asset-incident-escalation-policy .trigger{margin-top:.45rem;color:var(--color-secondary);overflow-wrap:anywhere}.asset-incident-escalation-policy .target{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}.asset-incident-escalation-policy .target div{border-left:2px solid var(--color-tertiary);padding-left:.65rem}.asset-incident-escalation-policy .target dt,.asset-incident-escalation-policy .small-label{font-size:var(--text-label);color:var(--color-secondary)}.asset-incident-escalation-policy .target dd{margin:0;font-family:var(--font-mono);font-size:var(--text-h3);font-variant-numeric:tabular-nums}.asset-incident-escalation-policy .updates{margin-top:.7rem;font-size:var(--text-label)}.asset-incident-escalation-policy .steps{display:flex;flex-direction:column;gap:.5rem;list-style:none;margin:0;padding:0}.asset-incident-escalation-policy .steps li{display:grid;grid-template-columns:3.5rem minmax(0,1fr);gap:.6rem;border-left:1px solid var(--color-outline);padding-left:.7rem}.asset-incident-escalation-policy .steps time{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--color-tertiary);font-weight:650;white-space:nowrap}.asset-incident-escalation-policy .steps p{margin:0;overflow-wrap:anywhere}.asset-incident-escalation-policy .steps strong{font-weight:650}.asset-incident-escalation-policy .details{margin-top:1.25rem;border-top:1px solid var(--color-outline)}.asset-incident-escalation-policy .details summary{cursor:pointer;padding:.8rem 0;min-height:2.75rem;color:var(--color-secondary)}.asset-incident-escalation-policy .details summary:focus-visible{outline:2px solid var(--color-tertiary);outline-offset:2px}.asset-incident-escalation-policy .detail{padding:1rem 0;border-top:1px solid var(--color-outline)}.asset-incident-escalation-policy .detail h3{margin:0 0 .6rem;font-size:var(--text-body-md)}.asset-incident-escalation-policy .detail p{margin:.35rem 0;overflow-wrap:anywhere}.asset-incident-escalation-policy .detail ol{margin:.6rem 0;padding-left:1.4rem}.asset-incident-escalation-policy .detail li+li{margin-top:.4rem}.asset-incident-escalation-policy footer{margin-top:1.5rem;padding-top:.75rem;border-top:1px solid var(--color-outline);color:var(--color-secondary);font-size:var(--text-label)}
.asset-incident-escalation-policy .still-svg{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:760px){.asset-incident-escalation-policy{padding:1.5rem 1rem}.asset-incident-escalation-policy h1{font-size:var(--text-h2)}.asset-incident-escalation-policy header{margin-bottom:1.25rem}.asset-incident-escalation-policy .tier{grid-template-columns:minmax(0,1fr);gap:.8rem;padding:1rem 0}.asset-incident-escalation-policy .target{max-width:26rem}.asset-incident-escalation-policy .updates{margin-top:.4rem}.asset-incident-escalation-policy .steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem 1rem}.asset-incident-escalation-policy .steps li{grid-template-columns:1fr;gap:.1rem}.asset-incident-escalation-policy .steps time{font-size:var(--text-label)}}
@media print{.asset-incident-escalation-policy{max-width:none;padding:1rem}.asset-incident-escalation-policy .details>*{display:block}.asset-incident-escalation-policy .details summary{display:none}}
`;

const priorityNumber = (priority: string) => Number(priority.slice(1));
const compact = (value: string, max: number) => [...value].length > max ? `${[...value].slice(0, max - 1).join("")}…` : value;

function Still({ data }: { data: Props }) {
  const sorted = [...data.tiers].sort((a, b) => priorityNumber(a.priority) - priorityNumber(b.priority));
  const rowHeight = 112;
  const firstY = 132;
  return <svg className="still-svg" data-layout-still="true" width="1280" height="720" viewBox="0 0 1280 720" aria-hidden="true">
    <rect width="1280" height="720" fill="var(--color-surface)" />
    <text x="48" y="50" fontSize="14" fontFamily="sans-serif" fill="var(--color-secondary)">{data.service}</text>
    <text x="48" y="91" fontSize="28" fontWeight="700" fontFamily="sans-serif" fill="var(--color-on-surface)">{compact(data.title, 54)}</text>
    <text x="48" y="119" fontSize="13" fontFamily="sans-serif" fill="var(--color-secondary)">初動目標・顧客連絡・段階的な引き継ぎ</text>
    {sorted.map((tier, index) => {
      const y = firstY + index * rowHeight;
      return <g key={tier.id}>
        <line x1="48" x2="1232" y1={y - 22} y2={y - 22} stroke="var(--color-outline)" />
        <text x="52" y={y + 16} fontSize="25" fontWeight="700" fontFamily="sans-serif" fill="var(--color-tertiary)">{tier.priority}</text>
        <text x="52" y={y + 39} fontSize="15" fontWeight="600" fontFamily="sans-serif" fill="var(--color-on-surface)">{compact(tier.label, 16)}</text>
        <text x="52" y={y + 62} fontSize="12" fontFamily="sans-serif" fill="var(--color-secondary)">{compact(tier.trigger, 28)}</text>
        <text x="360" y={y + 4} fontSize="11" fontFamily="sans-serif" fill="var(--color-secondary)">一次応答</text>
        <text x="360" y={y + 31} fontSize="22" fontFamily="sans-serif" fill="var(--color-on-surface)">{tier.acknowledgeMinutes}分</text>
        <text x="480" y={y + 4} fontSize="11" fontFamily="sans-serif" fill="var(--color-secondary)">影響緩和</text>
        <text x="480" y={y + 31} fontSize="22" fontFamily="sans-serif" fill="var(--color-on-surface)">{tier.mitigationTargetMinutes}分</text>
        <text x="610" y={y + 4} fontSize="11" fontFamily="sans-serif" fill="var(--color-secondary)">顧客連絡</text>
        <text x="610" y={y + 31} fontSize="22" fontFamily="sans-serif" fill="var(--color-on-surface)">{tier.customerUpdateEveryMinutes}分ごと</text>
        {tier.steps.map((step, stepIndex) => {
          const x = 770 + stepIndex * 112;
          return <g key={step.id}>
            <line x1={x - 14} x2={x + 92} y1={y + 20} y2={y + 20} stroke="var(--color-outline)" strokeWidth="2" />
            <circle cx={x} cy={y + 20} r="5" fill="var(--color-tertiary)" />
            <text x={x} y={y - 1} fontSize="11" fontFamily="sans-serif" fill="var(--color-tertiary)">{step.afterMinutes}分後</text>
            <text x={x} y={y + 48} fontSize="12" fontWeight="600" fontFamily="sans-serif" fill="var(--color-on-surface)">{compact(step.owner, 11)}</text>
            <text x={x} y={y + 68} fontSize="11" fontFamily="sans-serif" fill="var(--color-secondary)">{compact(step.id, 12)}</text>
          </g>;
        })}
      </g>;
    })}
    <text x="48" y="704" fontSize="12" fontFamily="sans-serif" fill="var(--color-secondary)">適用前に当番・連絡先・時刻の起点を確認する</text>
  </svg>;
}

export default function Template(data: Props) {
  const tiers = [...data.tiers].sort((a, b) => priorityNumber(a.priority) - priorityNumber(b.priority));
  return <section className="asset asset-incident-escalation-policy">
    <style>{CSS}</style>
    <header>
      <p className="eyebrow">{data.service} の対応方針</p>
      <h1>{data.title}</h1>
      {data.subtitle && <p className="subtitle">{data.subtitle}</p>}
    </header>
    <div className="policy" aria-label="重大度ごとの初動とエスカレーション">
      {tiers.map((tier) => <article className="tier" data-tier-id={tier.id} key={tier.id}>
        <div>
          <div className="priority"><b>{tier.priority}</b><span>{tier.label}</span></div>
          <p className="trigger">{tier.trigger}</p>
        </div>
        <dl className="target">
          <div><dt>一次応答まで</dt><dd>{tier.acknowledgeMinutes} 分</dd></div>
          <div><dt>影響緩和の目標</dt><dd>{tier.mitigationTargetMinutes} 分</dd></div>
          <div className="updates"><dt>顧客への状況連絡</dt><dd>{tier.customerUpdateEveryMinutes} 分ごと</dd></div>
        </dl>
        <div className="small-label">経過時間による引き継ぎ</div>
        <ol className="steps">{tier.steps.map((step) => <li key={step.id}>
          <time>{step.afterMinutes}分後</time>
          <p><strong>{step.owner}</strong><br />{step.action}</p>
        </li>)}</ol>
      </article>)}
    </div>
    <details className="details">
      <summary>対応条件をまとめて確認</summary>
      {tiers.map((tier) => <section className="detail" key={tier.id}>
        <h3>{tier.priority} · {tier.label}</h3>
        <p><strong>適用条件:</strong> {tier.trigger}</p>
        <p><strong>初動:</strong> {tier.acknowledgeMinutes}分以内に応答、{tier.mitigationTargetMinutes}分以内に影響を緩和。顧客へ{tier.customerUpdateEveryMinutes}分ごとに状況を連絡。</p>
        <ol>{tier.steps.map((step) => <li key={step.id}>{step.afterMinutes}分後 — {step.owner}: {step.action}</li>)}</ol>
      </section>)}
    </details>
    <footer>通知先と経過時間の起点を運用手順に明記し、定期的に見直す。</footer>
    <Still data={data} />
  </section>;
}