// Dashboard — at-a-glance stats + expiring soon + recent approvals.

const DashboardScreen = ({ domains, servers, clients, approvals, employees, role, onGoTo, onEdit }) => {
  const allItems = [
    ...domains.map(d => ({ ...d, _kind: 'domain', _id: d.id, _name: d.name })),
    ...servers.map(s => ({ ...s, _kind: 'server', _id: s.id, _name: s.label })),
  ];
  const expired = allItems.filter(x => window.daysUntil(x.expiry) < 0);
  const soon = allItems.filter(x => { const n = window.daysUntil(x.expiry); return n >= 0 && n <= 30; });
  const active = allItems.length - expired.length - soon.length;

  const upcoming = [...expired, ...soon].sort((a, b) => window.daysUntil(a.expiry) - window.daysUntil(b.expiry)).slice(0, 8);

  // Normalize per-cycle cost to a monthly figure based on start→expiry span
  const monthlyFromCycle = (item) => {
    if (!item.start || !item.expiry) return item.billedCost || 0;
    const days = (new Date(item.expiry) - new Date(item.start)) / 86400000;
    if (days < 1) return item.billedCost || 0;
    return Math.round((item.billedCost || 0) * 30 / days);
  };
  const purchasedMonthlyFromCycle = (item) => {
    if (!item.start || !item.expiry) return item.purchasedCost || 0;
    const days = (new Date(item.expiry) - new Date(item.start)) / 86400000;
    if (days < 1) return item.purchasedCost || 0;
    return Math.round((item.purchasedCost || 0) * 30 / days);
  };
  const monthlySpend = servers.reduce((sum, s) => sum + monthlyFromCycle(s), 0);
  const monthlyCost = servers.reduce((sum, s) => sum + purchasedMonthlyFromCycle(s), 0);
  const annualDomainSpend = domains.reduce((sum, d) => sum + (d.billedCost || 0), 0);
  const annualDomainCost = domains.reduce((sum, d) => sum + (d.purchasedCost || 0), 0);

  return (
    <>
      <div className="page-head">
        <div>
          <h1>Dashboard</h1>
          <div className="sub">
            {role === 'admin'
              ? `Workspace overview · ${clients.length} clients · ${employees.length} employees`
              : 'Your workspace at a glance'}
          </div>
        </div>
      </div>

      <div className="stats">
        <button className="stat clickable" onClick={() => onGoTo('subscriptions', { status: 'expired' })}>
          <div className="stat-label">
            <span className="stat-icon red"><Icon name="alert" size={13}/></span>
            Expired
            <span className="stat-arrow"><Icon name="chevron" size={12}/></span>
          </div>
          <div className="stat-value">{expired.length}</div>
          <div className="stat-trend">{expired.filter(x => x._kind === 'domain').length} domains · {expired.filter(x => x._kind === 'server').length} servers</div>
        </button>
        <button className="stat clickable" onClick={() => onGoTo('subscriptions', { status: 'soon' })}>
          <div className="stat-label">
            <span className="stat-icon amber"><Icon name="clock" size={13}/></span>
            Expiring ≤ 30d
            <span className="stat-arrow"><Icon name="chevron" size={12}/></span>
          </div>
          <div className="stat-value">{soon.length}</div>
          <div className="stat-trend">Renew soon to avoid downtime</div>
        </button>
        <button className="stat clickable" onClick={() => onGoTo('subscriptions', { status: 'active' })}>
          <div className="stat-label">
            <span className="stat-icon green"><Icon name="check" size={13}/></span>
            Active
            <span className="stat-arrow"><Icon name="chevron" size={12}/></span>
          </div>
          <div className="stat-value">{active}</div>
          <div className="stat-trend">{domains.length} domains · {servers.length} servers total</div>
        </button>
        <button className="stat clickable" onClick={() => onGoTo('approvals')}>
          <div className="stat-label">
            <span className="stat-icon"><Icon name="pending" size={13}/></span>
            Pending approvals
            <span className="stat-arrow"><Icon name="chevron" size={12}/></span>
          </div>
          <div className="stat-value">{approvals.length}</div>
          <div className="stat-trend">{approvals.filter(a => a.kind === 'edit').length} edits · {approvals.filter(a => a.kind === 'create').length} new</div>
        </button>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 16 }}>
        <div className="card">
          <div className="card-head">
            <h3>Expiring & expired</h3>
            <div className="sub">· next 30 days, oldest first</div>
            <button className="btn ghost sm" style={{ marginLeft: 'auto' }} onClick={() => onGoTo('subscriptions')}>
              View all <Icon name="chevron" size={12}/>
            </button>
          </div>
          <div className="table-wrap">
            <table className="data">
              <thead>
                <tr>
                  <th>Item</th>
                  <th>Client</th>
                  <th>Expiry</th>
                  <th>Status</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                {upcoming.length === 0 ? (
                  <tr><td colSpan={5}><Empty title="Nothing expiring soon" body="All subscriptions have more than 30 days left." /></td></tr>
                ) : upcoming.map(x => {
                  const c = clients.find(c => c.id === x.clientId);
                  return (
                    <tr key={x._kind + x._id}>
                      <td>
                        <div className="cell-primary" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                          <Icon name={x._kind === 'domain' ? 'globe' : 'server'} size={13} stroke={2}/>
                          {x._name}
                        </div>
                        <div className="cell-sub">{x._kind === 'domain' ? x.registrar : x.provider}</div>
                      </td>
                      <td>{c?.name}</td>
                      <td className="mono">{window.fmtDate(x.expiry)}</td>
                      <td><StatusBadge iso={x.expiry} /></td>
                      <td><button className="btn sm" onClick={() => onEdit(x._kind, x)}>Renew</button></td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div className="card">
            <div className="card-head">
              <h3>Pending approvals</h3>
              <button className="btn ghost sm" style={{ marginLeft: 'auto' }} onClick={() => onGoTo('approvals')}>
                Open <Icon name="chevron" size={12}/>
              </button>
            </div>
            <div className="card-body" style={{ padding: 0 }}>
              {approvals.length === 0 ? (
                <Empty title="Inbox zero" body="No requests waiting." />
              ) : approvals.slice(0, 4).map(a => (
                <div key={a.id} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 16px', borderTop: '1px solid var(--border)' }}>
                  <Avatar name={a.by} size={26} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 13, fontWeight: 500 }}>
                      {a.kind === 'create' ? 'New ' : 'Edit '}
                      {a.entity}: {a.entity === 'domain' ? (a.payload?.name || a.entityId) : (a.payload?.label || a.entityId)}
                    </div>
                    <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{a.by} · {a.at}</div>
                  </div>
                  <KindPill kind={a.entity} />
                </div>
              ))}
            </div>
          </div>

          <div className="card">
            <div className="card-head">
              <h3>Spend</h3>
            </div>
            <div className="card-body">
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 12, gap: 18 }}>
                <div>
                  <div style={{ fontSize: 12, color: 'var(--text-secondary)' }}>Servers · month (billed)</div>
                  <div style={{ fontSize: 20, fontWeight: 600 }}>{window.fmtINR(monthlySpend)}</div>
                  <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 2 }}>cost {window.fmtINR(monthlyCost)} · margin {monthlySpend - monthlyCost > 0 ? window.fmtINR(monthlySpend - monthlyCost) : '—'}</div>
                </div>
                <div>
                  <div style={{ fontSize: 12, color: 'var(--text-secondary)' }}>Domains · yr (billed)</div>
                  <div style={{ fontSize: 20, fontWeight: 600 }}>{window.fmtINR(annualDomainSpend)}</div>
                  <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 2 }}>cost {window.fmtINR(annualDomainCost)}</div>
                </div>
              </div>
              <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>Annual server billing: {window.fmtINR(monthlySpend * 12)}</div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

window.DashboardScreen = DashboardScreen;