const { Badge: PBadge, Tag: PTag } = window.OrefyDesignSystem_e8d108;

const Ico = ({ d, size = 16, sw = 2 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">{d.map((p, i) => <path key={i} d={p}></path>)}</svg>
);
const I = {
  arrow: ['M5 12h14', 'm12 5 7 7-7 7'],
  check: ['M20 6 9 17l-5-5'],
  checkCircle: ['M21.8 10A10 10 0 1 1 17 3.3', 'm9 11 3 3L22 4'],
};

const SHOTS_DATA = {
  en: [
    { k: 'VPCs', src: 'assets/aws-vpcs.png', blur: [[31.4, 73.6, 8.8, 6.4]] },
    { k: 'Subnets', src: 'assets/aws-subnets.png', blur: [[37.4, 53.4, 11.8, 21.8], [62, 53.4, 10.3, 21.8]] },
  ],
};

function ConsoleShots({ lang = 'en' }) {
  const [s, setS] = React.useState(0);
  const shots = SHOTS_DATA[lang] || SHOTS_DATA.en;
  React.useEffect(() => { const t = setInterval(() => setS(x => (x + 1) % shots.length), 3000); return () => clearInterval(t); }, [shots.length]);
  return (<div className="shots">
    <div className="shots-h">
      <span>Today · AWS console</span>
      <div className="shots-tabs">{shots.map((x, n) => <button key={x.k} className={n === s ? 'on' : ''} onClick={() => setS(n)}>{x.k}</button>)}</div>
    </div>
    <div className="shot-stage">{shots.map((x, n) => <div key={x.k} className={'shot' + (n === s ? ' on' : '')}><img src={x.src} alt={'AWS console · ' + x.k}></img>{x.blur.map((b, j) => <i key={j} className="mask" style={{ left: b[0] + '%', top: b[1] + '%', width: b[2] + '%', height: b[3] + '%' }}></i>)}</div>)}</div>
  </div>);
}

function DiscoverPanel({ lang = 'en' }) {
  const rows = [
    ['vpc-07c1e9a4f2d83b51', 'VPC', '172.31.0.0/16', 'ClickOps'],
    ['subnet-0b7a2e19c4d58f03', 'Subnet', '172.31.16.0/20', 'ClickOps'],
    ['subnet-04e8c3f6a91b72d5', 'Subnet', '172.31.0.0/20', 'ClickOps'],
    ['subnet-0c95d1b7e3a40f68', 'Subnet', '172.31.32.0/20', 'ClickOps'],
  ];
  return (<>
    <div className="stats">
      <div><b>2,418</b><span>Resources</span></div>
      <div><b>3</b><span>Accounts</span></div>
      <div><b>6</b><span>Regions</span></div>
      <div><b>71%</b><span>Unmanaged</span></div>
    </div>
    <div className="table-wrap">
      <table className="t">
        <thead><tr><th>Resource</th><th>Type</th><th>CIDR</th><th>Managed by</th></tr></thead>
        <tbody>{rows.map(r => <tr key={r[0]}><td className="mono">{r[0]}</td><td>{r[1]}</td><td className="mono" style={{ color: 'var(--text-muted)' }}>{r[2]}</td>
          <td><PBadge tone={r[3] === 'ClickOps' ? 'warning' : r[3].includes('stale') ? 'danger' : 'neutral'} dot>{r[3]}</PBadge></td></tr>)}</tbody>
      </table>
    </div>
  </>);
}

function CodifyPanel() {
  return (<div className="two">
    <div className="ftree">
      infrastructure/<br />├─ modules/<br />│&nbsp; ├─ network/<br />│&nbsp; ├─ <span className="cur">database/</span><br />│&nbsp; └─ compute/<br />└─ envs/<br />&nbsp;&nbsp;&nbsp;├─ prod/<br />&nbsp;&nbsp;&nbsp;└─ staging/
    </div>
    <div className="code-l"><div className="code">
<span className="c"># envs/prod/database.tf · generated by Orefy</span>{'\n'}
<span className="kw">module</span> <span className="s">"orders_db"</span> {'{'}{'\n'}
{'  '}<span className="a">source</span>         = <span className="s">"../../modules/database"</span>{'\n'}
{'  '}<span className="a">name</span>           = <span className="s">"prod-orders-db"</span>{'\n'}
{'  '}<span className="a">engine_version</span> = <span className="s">"16.4"</span>{'\n'}
{'  '}<span className="a">instance_class</span> = var.db_class{'\n'}
{'  '}<span className="a">subnet_ids</span>     = module.network.private_ids{'\n'}
{'  '}<span className="a">tags</span>           = local.tags{'\n'}
{'}'}{'\n'}{'\n'}
<span className="kw">import</span> {'{'}{'\n'}
{'  '}<span className="a">to</span> = module.orders_db.aws_db_instance.this{'\n'}
{'  '}<span className="a">id</span> = <span className="s">"prod-orders-db"</span>{'\n'}
{'}'}
    </div></div>
  </div>);
}

function VerifyPanel({ lang = 'en' }) {
  const rows = [['module.network', 412], ['module.database', 38], ['module.compute', 1206], ['module.storage', 94]];
  return (<div className="verify">
    <div className="ok"><Ico d={I.checkCircle} size={22} />
      <div>
        <b>No changes. Code matches your live environment.</b>
        <span>Plan ran against 2,418 imported resources in 3 accounts: 0 to add, 0 to change, 0 to destroy.</span>
      </div>
    </div>
    <div>
      <div className="diffrow" style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--text-subtle)', borderBottom: '1px solid var(--border-default)' }}>
        <span>Module</span>
        <span>Resources</span>
        <span>Drift</span>
        <span>Status</span>
      </div>
      {rows.map(r => <div className="diffrow" key={r[0]}>
        <span className="mono">{r[0]}</span>
        <span>{r[1].toLocaleString('en-US')}</span>
        <span className="mono">0</span>
        <span className="match"><Ico d={I.check} size={14} />Match</span>
      </div>)}
    </div>
  </div>);
}

function ScanPanel({ lang = 'en' }) {
  const f = [
    ['danger', 'High', 'Storage bucket allows public read', 's3-media-uploads', 'CIS 2.1.5'],
    ['danger', 'High', 'Database not encrypted at rest', 'legacy-reports-db', 'BSI C5 KRY-03'],
    ['warning', 'Medium', 'Security group open to 0.0.0.0/0 on 22', 'sg-bastion-old', 'ISO 27001 A.8.20'],
    ['info', 'Low', 'Missing cost-center tag', '184 resources', 'Internal policy'],
  ];

  return (<>
    <div className="fw">{['CIS Benchmarks', 'ISO 27001', 'BSI C5', 'NIS2', 'Custom policies'].map(x => <PTag key={x}>{x}</PTag>)}</div>
    {f.map(r => <div className="finding" key={r[2]}><PBadge tone={r[0]}>{r[1]}</PBadge><div><b>{r[2]}</b><small className="mono">{r[3]}</small></div><span className="ctl">{r[4]}</span></div>)}
    <p style={{ marginTop: 16, fontSize: 13, color: 'var(--text-muted)' }}>
      Every finding ships with a fix, as a change to your code, not a console click.
    </p>
  </>);
}

function PreparePanel({ lang = 'en' }) {
  const r = [
    ['Network', 'module.network', 100],
    ['Compute', 'module.compute', 92],
    ['Database', 'module.database', 85],
    ['Object storage', 'module.storage', 100],
    ['Managed queue', 'module.events', 40]
  ];
  return (<>
    <div className="stats" style={{ gridTemplateColumns: 'repeat(3,minmax(0,1fr))' }}>
      <div><b>83%</b><span>Portable today</span></div>
      <div><b>11</b><span>Provider lock-ins found</span></div>
      <div><b>EU</b><span>Sovereign target</span></div>
    </div>
    <div className="table-wrap">
      <table className="t">
        <thead><tr><th>Service</th><th>Module</th><th>Readiness</th></tr></thead>
        <tbody>{r.map(x => <tr key={x[0]}><td>{x[0]}</td><td className="mono">{x[1]}</td>
          <td><div className="meter"><div className="bar"><i style={{ width: x[2] + '%', background: x[2] === 100 ? 'var(--success)' : x[2] < 50 ? 'var(--danger)' : 'var(--accent)' }}></i></div><span className="mono" style={{ fontSize: 12 }}>{x[2]}%</span></div></td></tr>)}</tbody>
      </table>
    </div>
  </>);
}

Object.assign(window, { Ico, I, DiscoverPanel, CodifyPanel, VerifyPanel, ScanPanel, PreparePanel });