// ManifestoDashboard — fake "your back office" dashboard for the manifesto section.
// Apple-clean white UI; tabs on the left switch the main content.
// First tab (Home) shows the manifesto copy. Hovering the surface shows the custom blue cursor.

const { useState: useStateD, useEffect: useEffectD } = React;

const DASH_LOGO = "assets/icon.png";

// Icon strokes (24×24)
const Icon = ({ name }) => {
  const paths = {
    home: <path d="M4 11.5L12 5l8 6.5V19a1 1 0 0 1-1 1h-4v-6h-6v6H5a1 1 0 0 1-1-1v-7.5Z" />,
    chats: <path d="M5 5h14a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H10l-4 3v-3H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Z" />,
    files: <path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7Z" />,
    compliance: <g><rect x="4" y="5" width="16" height="15" rx="2" /><path d="M8 3v4M16 3v4M4 10h16" /><path d="M9 14.5l2 2 4-4" /></g>,
    reports: <g><rect x="4" y="14" width="3" height="6" /><rect x="10.5" y="9" width="3" height="11" /><rect x="17" y="4" width="3" height="16" /></g>,
    company: <g><path d="M4 21V8l8-4 8 4v13" /><path d="M9 21v-5h6v5" /></g>,
    invoices: <g><path d="M7 3h10v18l-3-2-2 2-2-2-3 2V3Z" /><path d="M10 8h4M10 12h4M10 16h2" /></g>,
    mailbox: <g><rect x="3" y="6" width="18" height="13" rx="1.5" /><path d="M3 7l9 7 9-7" /></g>
  };
  return (
    <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      {paths[name] || null}
    </svg>);

};

const TABS = [
{ id: 'home', label: 'Home', icon: 'home' },
{ id: 'chats', label: 'Chats', icon: 'chats', badge: 2 },
{ id: 'files', label: 'Files', icon: 'files' },
{ id: 'compliance', label: 'Compliance', icon: 'compliance' },
{ id: 'reports', label: 'Reports', icon: 'reports' },
{ id: 'company', label: 'Company', icon: 'company' },
{ id: 'invoices', label: 'Invoices', icon: 'invoices' },
{ id: 'mailbox', label: 'Mailbox', icon: 'mailbox' }];


// ─── Tab content ────────────────────────────────────────
const HomeTab = () =>
<div className="dash-home">
    <div className="dash-home-eyebrow">
      <span className="dash-home-dot" />
      You're all caught up
    </div>
    <h3 className="dash-home-title" style={{ fontFamily: "\"Mona Sans\"" }}>
      Run your business, <em style={{ fontFamily: "\"Mona Sans\"" }}>stress-free.</em>
    </h3>
    <p className="dash-home-body">
      We handle the paperwork — incorporation, annual returns, beneficial
      ownership records, every filing SSM expects. You handle the business.
    </p>
    <div className="dash-home-cards">
      <div className="dash-home-card">
        <div className="dash-home-card-num" style={{ fontFamily: "\"Mona Sans\"" }}>12</div>
        <div className="dash-home-card-label">Filings on schedule</div>
      </div>
      <div className="dash-home-card">
        <div className="dash-home-card-num" style={{ fontFamily: "\"Mona Sans\"" }}>0</div>
        <div className="dash-home-card-label">Items needing your attention</div>
      </div>
      <div className="dash-home-card">
        <div className="dash-home-card-num" style={{ fontFamily: "\"Mona Sans\"" }}>94 days</div>
        <div className="dash-home-card-label">Until next annual return</div>
      </div>
    </div>
  </div>;


const ChatsTab = () => {
  const threads = [
  { title: 'Beneficial ownership records — Q2 confirmation', preview: "Hi! Just confirming the cap-table snapshot we filed last quarter is still accurate.", date: '14 May', unread: true, who: 'agent' },
  { title: 'Annual return for FY2025/26', preview: "Reminder: AR is due 12 Jul. We've prepped the draft — review when you can.", date: '08 May', who: 'agent' },
  { title: 'New director appointment — Aishah Rahman', preview: "We've filed the Section 58 form with SSM. Confirmation expected within 5 working days.", date: '01 May', who: 'agent' }];

  return (
    <div className="dash-chats">
      <div className="dash-subtabs">
        <button className="dash-subtab dash-subtab-on">Active</button>
        <button className="dash-subtab">Resolved</button>
      </div>
      <div className="dash-list">
        {threads.map((t, i) =>
        <div key={i} className={`dash-thread ${t.unread ? 'dash-thread-unread' : ''}`}>
            <div className="dash-thread-avatar"><img src={DASH_LOGO} alt="" /></div>
            <div className="dash-thread-body">
              <div className="dash-thread-title">{t.title}</div>
              <div className="dash-thread-preview">{t.preview}</div>
            </div>
            <div className="dash-thread-meta">
              {t.unread && <span className="dash-thread-dot" />}
              <span className="dash-thread-date">{t.date}</span>
            </div>
          </div>
        )}
      </div>
    </div>);

};

const FilesTab = () => {
  const files = [
    { name: "INV-76204.pdf",                                    date: "17 May 2026", cat: "Accounting", type: "Purchases invoice", status: "Uploaded", color: "#E04A4A" },
    { name: "Register of Nominee Shareholders 2026.pdf",        date: "12 May 2026", cat: "Corporate",  type: "Other",            status: "Uploaded", color: "#E04A4A" },
    { name: "Register of Nominee Directors 2026.pdf",           date: "12 May 2026", cat: "Corporate",  type: "Register",         status: "Signed",   color: "#E04A4A" },
    { name: "Register of Registrable Controllers 2026.pdf",     date: "12 May 2026", cat: "Corporate",  type: "Register",         status: "Signed",   color: "#E04A4A" },
    { name: "ssm---ar-preview---12052026.pdf",                  date: "12 May 2026", cat: "Corporate",  type: "Regulatory",       status: "Uploaded", color: "#E04A4A" },
    { name: "ssm---ar-acknowledgement---12052026.pdf",          date: "12 May 2026", cat: "Corporate",  type: "Regulatory",       status: "Uploaded", color: "#E04A4A" }
  ];
  return (
    <div className="dash-files">
      <div className="dash-files-toolbar">
        <div className="dash-files-search">
          <svg viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="7" cy="7" r="5" /><path d="M11 11l3 3" strokeLinecap="round" /></svg>
          Search
        </div>
        <button className="dash-files-upload">↑ Upload files</button>
      </div>
      <div className="dash-files-header">
        <span className="dash-fcol-file">File</span>
        <span className="dash-fcol-date">Date ▾</span>
        <span className="dash-fcol-cat">Category ▾</span>
        <span className="dash-fcol-type">Type</span>
        <span className="dash-fcol-status">Status</span>
      </div>
      <div className="dash-files-list">
        {files.map((f, i) => (
          <div key={i} className="dash-file-row">
            <div className="dash-fcol-file">
              <span className="dash-file-icon" style={{ background: f.color }}>PDF</span>
              <span className="dash-file-name-text">{f.name}</span>
            </div>
            <div className="dash-fcol-date">{f.date}</div>
            <div className="dash-fcol-cat">{f.cat}</div>
            <div className="dash-fcol-type">{f.type}</div>
            <div className="dash-fcol-status">
              <span className={`dash-file-status dash-file-status-${f.status.toLowerCase()}`}>{f.status}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

const ComplianceTab = () => {
  const items = [
  { date: '12 Jul', title: 'Annual return (AR)', status: 'On track', detail: 'Draft prepared. Awaiting your e-signature.' },
  { date: '31 Aug', title: 'Statutory audit kickoff', status: 'Scheduled', detail: 'Auditor briefing booked with KPMG SEA.' },
  { date: '30 Sep', title: 'Corporate tax (Form C)', status: 'Pending data', detail: 'Awaiting Q3 management accounts.' },
  { date: '15 Nov', title: 'AGM', status: 'Not started', detail: 'We\'ll prep the notice 21 days prior.' }];

  return (
    <div className="dash-compliance">
      {items.map((it, i) =>
      <div key={i} className="dash-comp-row">
          <div className="dash-comp-date">
            <div className="dash-comp-day">{it.date.split(' ')[0]}</div>
            <div className="dash-comp-month">{it.date.split(' ')[1]}</div>
          </div>
          <div className="dash-comp-body">
            <div className="dash-comp-title">{it.title}</div>
            <div className="dash-comp-detail">{it.detail}</div>
          </div>
          <div className={`dash-comp-status dash-comp-status-${it.status.toLowerCase().replace(/\s+/g, '-')}`}>{it.status}</div>
        </div>
      )}
    </div>);

};

// ─── Reports tab (Business Health Dashboard) ───────────
const ReportsTab = () => {
  // Inline bar/line chart points
  const trend = [38, 46, 42, 58, 52, 68, 74, 82, 78, 88, 96, 104];
  const cash  = [54, 48, 62, 60, 72, 70, 84, 80, 92, 88, 100, 110];
  const w = 540, h = 80;
  const mkPath = (arr, max = 120) => {
    const stepX = w / (arr.length - 1);
    return arr.map((v, i) => `${i === 0 ? "M" : "L"} ${i * stepX} ${h - (v / max) * h}`).join(" ");
  };
  return (
    <div className="dash-reports">
      <div className="dash-rep-tabs">
        {["Overview", "Profit & loss", "Balance sheet", "Aged payables", "Aged receivables"].map((t, i) => (
          <button key={i} className={`dash-rep-tab ${i === 0 ? "on" : ""}`}>{t}</button>
        ))}
      </div>
      <div className="dash-rep-month">
        May 2026
        <svg viewBox="0 0 12 12" width="10" height="10" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M3 5l3 3 3-3" /></svg>
      </div>
      <div className="dash-rep-cards">
        {[
          { l: "Revenue",       v: "RM 248,400" },
          { l: "Gross Profit",  v: "RM 168,920" },
          { l: "Net Profit",    v: "RM  72,140" },
          { l: "Est. Corp. Tax", v: "RM  12,264" }
        ].map((c, i) => (
          <div key={i} className="dash-rep-card">
            <div className="dash-rep-card-l">{c.l}</div>
            <div className="dash-rep-card-v">{c.v}</div>
          </div>
        ))}
      </div>
      <div className="dash-rep-charts">
        <div className="dash-rep-chart">
          <div className="dash-rep-chart-head">
            <div>
              <div className="dash-rep-chart-l">Revenue Trend</div>
              <div className="dash-rep-chart-v">RM 248k</div>
            </div>
            <span className="dash-rep-delta dash-rep-delta-up">▲ 12.4%</span>
          </div>
          <svg viewBox={`0 0 ${w} ${h}`} className="dash-rep-svg" preserveAspectRatio="none">
            <path d={`${mkPath(trend)} L ${w} ${h} L 0 ${h} Z`} fill="rgba(31,94,160,0.10)" />
            <path d={mkPath(trend)} fill="none" stroke="#1F5EA0" strokeWidth="2" />
          </svg>
        </div>
        <div className="dash-rep-chart">
          <div className="dash-rep-chart-head">
            <div>
              <div className="dash-rep-chart-l">Cash Flow Trend</div>
              <div className="dash-rep-chart-v">RM 184k</div>
            </div>
            <span className="dash-rep-delta dash-rep-delta-up">▲ 8.2%</span>
          </div>
          <svg viewBox={`0 0 ${w} ${h}`} className="dash-rep-svg" preserveAspectRatio="none">
            <path d={`${mkPath(cash)} L ${w} ${h} L 0 ${h} Z`} fill="rgba(91,168,232,0.14)" />
            <path d={mkPath(cash)} fill="none" stroke="#5BA8E8" strokeWidth="2" />
          </svg>
        </div>
      </div>
    </div>
  );
};

// ─── Company tab ────────────────────────────────────────
const CompanyTab = () => (
  <div className="dash-company">
    <div className="dash-co-tabs">
      {["Details", "Calendar", "Shares", "Documents"].map((t, i) => (
        <button key={i} className={`dash-co-tab ${i === 0 ? "on" : ""}`}>{t}</button>
      ))}
    </div>
    <div className="dash-co-section-label">Registration data</div>
    <div className="dash-co-docs">
      <div className="dash-co-doc">
        <div className="dash-co-doc-thumb">
          <div className="dash-co-doc-thumb-lines" />
        </div>
        <div className="dash-co-doc-body">
          <div className="dash-co-doc-title">Company Constitution (M&amp;AA)</div>
          <a className="dash-co-doc-dl">Download ↓</a>
        </div>
      </div>
      <div className="dash-co-doc">
        <div className="dash-co-doc-thumb">
          <div className="dash-co-doc-thumb-lines" />
        </div>
        <div className="dash-co-doc-body">
          <div className="dash-co-doc-title">SSM Bizfile</div>
          <a className="dash-co-doc-dl">Download ↓</a>
        </div>
      </div>
    </div>
    <div className="dash-co-fields">
      {[
        { l: "Company name",         v: "Your Company Sdn. Bhd." },
        { l: "Email for documents",  v: "4f32c6e75f11-708831@my.seckira.com", link: true },
        { l: "Registration number",  v: "202401012345-X",                     link: true },
        { l: "Incorporation Date",   v: "12.06.2025" },
        { l: "Company address",      v: "Unit 12-3, Menara KL Eco, 50450 KL", link: true },
        { l: "Paid up capital",      v: "RM 100,000.00" }
      ].map((f, i) => (
        <div key={i} className="dash-co-field">
          <div className="dash-co-field-l">{f.l}</div>
          <div className={`dash-co-field-v ${f.link ? "dash-co-field-link" : ""}`}>{f.v}</div>
        </div>
      ))}
    </div>
  </div>
);

// ─── Invoices tab ───────────────────────────────────────
const InvoicesTab = () => (
  <div className="dash-invoices">
    <div className="dash-inv-banner">
      <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="8" cy="8" r="6.5" /><path d="M8 5v4M8 11h.01" strokeLinecap="round" /></svg>
      Only invoices made in Seckira show up here. Invoices from elsewhere live in <a>Files</a>.
    </div>
    <div className="dash-inv-empty">
      <div className="dash-inv-illu">
        <svg viewBox="0 0 120 80" fill="none">
          <rect x="14" y="14" width="68" height="44" rx="4" stroke="#0E1F33" strokeWidth="1.6" />
          <circle cx="22" cy="22" r="1.5" fill="#0E1F33" />
          <circle cx="28" cy="22" r="1.5" fill="#0E1F33" />
          <path d="M22 32h40M22 38h32M22 44h28" stroke="#0E1F33" strokeWidth="1.4" strokeLinecap="round" />
          <rect x="78" y="10" width="22" height="22" rx="3" fill="#1F5EA0" />
          <path d="M84 21l3 3 6-6" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </div>
      <div className="dash-inv-empty-body">Get paid faster with Seckira invoices. Your first one is just a few clicks away.</div>
      <button className="dash-inv-cta">Create invoice</button>
    </div>
    <div className="dash-inv-features">
      {[
        { t: "Save bank details, links and QR codes" },
        { t: "Save client details once — reuse anytime" },
        { t: "Add line items with price, tax and notes" }
      ].map((f, i) => (
        <div key={i} className="dash-inv-feat">
          <div className="dash-inv-feat-icon">
            <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="#0E1F33" strokeWidth="1.6">
              {i === 0 && <g><rect x="3" y="6" width="18" height="12" rx="2" /><path d="M3 10h18" /></g>}
              {i === 1 && <g><circle cx="9" cy="10" r="3" /><path d="M3 19c1-3 4-5 6-5s5 2 6 5" /><rect x="15" y="4" width="6" height="6" rx="1" /></g>}
              {i === 2 && <g><rect x="4" y="4" width="12" height="12" rx="1.5" /><path d="M8 8l4 4M12 8l-4 4" /><rect x="14" y="14" width="6" height="6" rx="1.5" /></g>}
            </svg>
          </div>
          <div className="dash-inv-feat-t">{f.t}</div>
        </div>
      ))}
    </div>
  </div>
);

// ─── Mailbox tab (bank transactions placeholder) ───────
const MailboxTab = () => (
  <div className="dash-mailbox">
    <div className="dash-mb-illu">
      <svg viewBox="0 0 120 80" fill="none">
        <path d="M30 50c8-4 16-4 24 0" stroke="#E04A4A" strokeWidth="1.6" strokeLinecap="round" />
        <path d="M70 30l8-4-3 7" stroke="#E04A4A" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M28 30l-6 4 5 3" stroke="#E04A4A" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M50 22h28a4 4 0 0 1 4 4v20a4 4 0 0 1-4 4H38L30 58V26a4 4 0 0 1 4-4h8" stroke="#0E1F33" strokeWidth="1.6" strokeLinejoin="round" />
        <path d="M62 34l3 3 7-7" stroke="#1F8A5B" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    </div>
    <div className="dash-mb-title">All your bank transactions land here</div>
    <div className="dash-mb-body">Complete a few quick steps to start automatic sync.</div>
    <div className="dash-mb-action">
      <div className="dash-mb-action-icon">
        <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="#1F5EA0" strokeWidth="1.6"><path d="M4 10l8-5 8 5v9a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-9Z" /><path d="M9 20v-6h6v6" /></svg>
      </div>
      <div className="dash-mb-action-body">
        <div className="dash-mb-action-title">Set up bank accounts</div>
        <div className="dash-mb-action-sub">Open a new business account or connect one you already have</div>
      </div>
      <button className="dash-mb-action-cta">Connect</button>
    </div>
  </div>
);

const PlaceholderTab = ({ name }) =>
<div className="dash-placeholder">
    <div className="dash-placeholder-icon"><Icon name={name === 'Reports' ? 'reports' : name === 'Company' ? 'company' : name === 'Invoices' ? 'invoices' : 'mailbox'} /></div>
    <div className="dash-placeholder-title">{name}</div>
    <div className="dash-placeholder-body">Everything tidy. No items need your attention.</div>
  </div>;


const TAB_CONTENT = {
  home: <HomeTab />,
  chats: <ChatsTab />,
  files: <FilesTab />,
  compliance: <ComplianceTab />,
  reports: <ReportsTab />,
  company: <CompanyTab />,
  invoices: <InvoicesTab />,
  mailbox: <MailboxTab />
};

const TITLES = {
  home: 'Home',
  chats: 'Chats',
  files: 'Files',
  compliance: 'Compliance',
  reports: 'Reports',
  company: 'Company',
  invoices: 'Invoices',
  mailbox: 'Mailbox'
};

const ManifestoDashboard = () => {
  const [tab, setTab] = useStateD('home');
  return (
    <div className="dash-window">
      <div className="dash-chrome">
        <div className="dash-chrome-dots"><span /><span /><span /></div>
        <div className="dash-chrome-title">seckira.my · dashboard</div>
        <div />
      </div>
      <div className="dash-body">
        <aside className="dash-sidebar">
          <div className="dash-sidebar-brand">
            <img src={DASH_LOGO} alt="Seckira" />
          </div>
          <nav className="dash-nav">
            {TABS.map((t) =>
            <button
              key={t.id}
              className={`dash-nav-item ${tab === t.id ? 'dash-nav-item-on' : ''}`}
              onClick={() => setTab(t.id)}>
              
                <Icon name={t.icon} />
                <span>{t.label}</span>
                {t.badge && <span className="dash-nav-badge">{t.badge}</span>}
              </button>
            )}
          </nav>
          <div className="dash-sidebar-foot">
            <div className="dash-sidebar-foot-avatar">M</div>
            <div className="dash-sidebar-foot-text">
              <div className="dash-sidebar-foot-name">Your Company Sdn. Bhd.</div>
              <div className="dash-sidebar-foot-role">Founder · Owner</div>
            </div>
          </div>
        </aside>
        <main className="dash-main">
          <div className="dash-main-head">
            <h4 className="dash-main-title" style={{ fontFamily: "\"Mona Sans\"" }}>{TITLES[tab]}</h4>
            <div className="dash-main-search">
              <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="7" cy="7" r="5" /><path d="M11 11l3 3" strokeLinecap="round" /></svg>
              Search
            </div>
          </div>
          <div className="dash-main-content">
            {TAB_CONTENT[tab]}
          </div>
        </main>
      </div>
    </div>);

};

window.ManifestoDashboard = ManifestoDashboard;