---
import Base from '../layouts/Base.astro';

// Sample data, clearly labelled as mock in the UI. Per SPEC §3.3.2 the dashboard
// aggregates: proposal statuses, scheduling info, data products, help-desk tickets.
const proposals = [
  { id: 'PROP-2026-0142', title: 'AGN flare monitoring with LST sub-array', status: 'In review', kind: 'review' },
  { id: 'PROP-2026-0089', title: 'Galactic PeVatron survey follow-up', status: 'Accepted', kind: 'ok' },
  { id: 'PROP-2025-0231', title: 'GRB afterglow ToO programme', status: 'Draft', kind: 'draft' },
];
const products = [
  { id: 'OBS-88213', desc: 'DL3 event lists — PKS 2155-304 (12 runs)', date: '2026-07-18' },
  { id: 'OBS-87990', desc: 'DL3 event lists — Crab Nebula calibration', date: '2026-07-02' },
];
const fmt = (iso) => new Intl.DateTimeFormat('en-GB', { dateStyle: 'medium' }).format(new Date(iso));
const tickets = [
  { id: '#4821', subject: 'Proposal form: co-I affiliation not saved', status: 'Answered', kind: 'ok' },
  { id: '#4711', subject: 'Data download quota question', status: 'Open', kind: 'review' },
];
---
<Base title="CTAO Science Portal — Dashboard" description="User dashboard (mock)">
  <section class="band--moon">
    <header class="container page-head">
      <h1>Dashboard</h1>
      <p class="standfirst">Your proposals, data products and support tickets in one place.</p>
    </header>
    <div class="container page">
    <span class="badge-mock">Mock — sample data, no live services connected</span>
    <div class="dash-grid">
      <div class="panel">
        <h2 class="panel-title">My proposals</h2>
        <ul class="rows">
          {proposals.map((p) => (
            <li>
              <span class="row-id">{p.id}</span>
              <span class="row-main">{p.title}</span>
              <span class={`pill pill--${p.kind}`}>{p.status}</span>
            </li>
          ))}
        </ul>
      </div>
      <div class="panel">
        <h2 class="panel-title">Recent data products</h2>
        <ul class="rows">
          {products.map((d) => (
            <li>
              <span class="row-id">{d.id}</span>
              <span class="row-main">{d.desc}</span>
              <time class="row-date" datetime={d.date}>{fmt(d.date)}</time>
            </li>
          ))}
        </ul>
        <p class="notice">Search and download in the <a href="https://padc-ctao-data-explorer.obspm.fr/" target="_blank" rel="noopener" class="external">Data Explorer</a> (external, LUX team).</p>
      </div>
      <div class="panel">
        <h2 class="panel-title">Support tickets</h2>
        <ul class="rows">
          {tickets.map((t) => (
            <li>
              <span class="row-id">{t.id}</span>
              <span class="row-main">{t.subject}</span>
              <span class={`pill pill--${t.kind}`}>{t.status}</span>
            </li>
          ))}
        </ul>
      </div>
    </div>
    </div>
  </section>
</Base>