// Dashboard view — role-aware

const ReminderWidget = ({ role }) => {
  const items = role === 'supplier' ? [
    { num: 2, label: 'documents to renew', icon: 'alert' },
    { num: 1, label: 'pending task', icon: 'inbox' },
    { num: 3, label: 'unread messages', icon: 'chat' },
  ] : [
    { num: 3, label: 'documents expiring this week', icon: 'alert' },
    { num: 2, label: 'suppliers awaiting approval', icon: 'workflow' },
    { num: 5, label: 'tasks due today', icon: 'clock' },
  ];
  return (
    <div className="reminder">
      <div>
        <div className="reminder-title">Pending — needs your attention</div>
        <div className="reminder-items">
          {items.map((it, i) => (
            <div key={i} className="reminder-item">
              <Icon name={it.icon} size={16}/>
              <span className="reminder-item-num">{it.num}</span>
              <span style={{ opacity: 0.85 }}>{it.label}</span>
            </div>
          ))}
        </div>
      </div>
      <button className="btn btn-accent">View all <Icon name="arrowRight" size={13}/></button>
    </div>
  );
};

const KPICard = ({ label, value, meta, trend, icon }) => (
  <div className="kpi">
    <div className="kpi-spark"><Icon name={icon} size={16} className="text-dim"/></div>
    <div className="kpi-label">{label}</div>
    <div className="kpi-value">{value}</div>
    <div className="kpi-meta">
      {trend && <span className={`kpi-trend ${trend.dir}`}><Icon name={trend.dir === 'up' ? 'arrowUp' : 'arrowDown'} size={11}/>{trend.value}</span>}
      <span>{meta}</span>
    </div>
  </div>
);

const Dashboard = ({ role, company, openTask, openSupplier, setPage }) => {
  const { TASKS, SUPPLIERS, DOCUMENTS, ACTIVITY, STAFF, SAIF_COMPANIES, ME_ADMIN, ME_STAFF } = window.SaifData;
  const me = role === 'admin' ? ME_ADMIN : ME_STAFF;
  const allUsers = [...STAFF, ME_ADMIN];
  const userById = (id) => allUsers.find(u => u.id === id) || { name: 'Unknown', initials: '?', tone: 'var(--text-dim)' };
  const coById = (id) => SAIF_COMPANIES.find(c => c.id === id);

  const filteredTasks = company === 'all' ? TASKS : TASKS.filter(t => t.company === company);
  const myTasks = role === 'admin'
    ? filteredTasks.filter(t => t.assignee === 'me_admin')
    : filteredTasks.filter(t => t.assignee === me.id);
  const pendingApprovals = filteredTasks.filter(t => t.status === 'pending review');
  const expiring = DOCUMENTS.filter(d => d.status !== 'green').length;
  const activeSuppliers = SUPPLIERS.filter(s => s.status === 'approved').length;
  const openPOs = window.SaifData.POS.filter(p => p.status === 'open' || p.status === 'pending approval').length;

  const kpis = role === 'admin' ? [
    { label: 'Open Tasks (Group)', value: filteredTasks.filter(t => t.status !== 'done').length, meta: 'across all companies', icon: 'inbox', trend: { dir: 'up', value: '+3' } },
    { label: 'Pending Approvals', value: pendingApprovals.length, meta: 'awaiting your sign-off', icon: 'workflow' },
    { label: 'Docs Expiring 30d', value: expiring, meta: 'red & amber combined', icon: 'alert', trend: { dir: 'down', value: '-2' } },
    { label: 'Active Suppliers', value: activeSuppliers, meta: `of ${SUPPLIERS.length} total`, icon: 'suppliers' },
    { label: 'Open POs', value: openPOs, meta: 'across the group', icon: 'po' },
  ] : [
    { label: 'My Open Tasks', value: myTasks.filter(t => t.status !== 'done').length, meta: 'assigned to you', icon: 'inbox' },
    { label: 'Awaiting My Review', value: myTasks.filter(t => t.status === 'pending review').length, meta: 'reviewer queue', icon: 'workflow' },
    { label: 'Docs to Follow-up', value: 4, meta: 'across my suppliers', icon: 'alert' },
    { label: 'My Suppliers', value: 7, meta: 'I manage', icon: 'suppliers' },
  ];

  return (
    <div className="page">
      <div className="page-header">
        <div>
          <h1 className="page-title">Good morning, {(me.name || '').split(' ')[0]}</h1>
          <p className="page-subtitle">
            {role === 'admin' ? 'Group-wide overview · ' : ''}
            {fmtDate(new Date().toISOString())}
            {company !== 'all' && coById(company) && <> · viewing <b style={{ color: 'var(--ink)' }}>{coById(company).name}</b></>}
          </p>
        </div>
        <div className="page-actions">
          <button className="btn"><Icon name="download" size={14}/> Export</button>
          <button className="btn btn-primary" onClick={() => setPage('tasks')}><Icon name="plus" size={14}/> New task</button>
        </div>
      </div>

      <ReminderWidget role={role} />

      <div className="kpi-grid">
        {kpis.map((k, i) => <KPICard key={i} {...k}/>)}
      </div>

      <div className="dash-grid">
        <div className="card">
          <div className="card-header">
            <div>
              <h3 className="card-title">Pending tasks</h3>
              <div className="card-sub">{role === 'admin' ? 'Across the group' : 'Assigned to you'}</div>
            </div>
            <button className="btn btn-ghost btn-sm" onClick={() => setPage('tasks')}>View all <Icon name="chevronRight" size={12}/></button>
          </div>
          <div>
            {(role === 'admin' ? pendingApprovals : myTasks).slice(0, 6).map(t => {
              const co = coById(t.company);
              const assignee = userById(t.assignee);
              return (
                <div key={t.id} className="task-row" style={{ gridTemplateColumns: '1fr 100px 90px 80px' }} onClick={() => openTask(t.id)}>
                  <div>
                    <div className="task-title">{t.title}</div>
                    <div className="task-meta">
                      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}><span className="company-dot" style={{ background: co.color, width: 6, height: 6, borderRadius: '50%' }}></span> {co.name}</span>
                      <span className="dot-sep">{t.type}</span>
                    </div>
                  </div>
                  <Badge kind={statusToBadge(t.status)}>{t.status}</Badge>
                  <span className={`priority-${t.priority}`} style={{ fontSize: 12 }}>● {t.priority}</span>
                  <span className="text-mono text-xs text-mute">{fmtDateShort(t.due)}</span>
                </div>
              );
            })}
          </div>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
          <div className="card">
            <div className="card-header">
              <div>
                <h3 className="card-title">Recent activity</h3>
                <div className="card-sub">Across the group</div>
              </div>
            </div>
            <div className="card-body" style={{ paddingTop: 0, paddingBottom: 6 }}>
              {ACTIVITY.slice(0, 7).map(a => {
                const actor = userById(a.actor);
                return (
                  <div key={a.id} className="activity-item">
                    <div className={`activity-icon ${a.icon}`}><Icon name={a.icon === 'po' ? 'po' : a.icon === 'reject' ? 'x' : a.icon === 'check' ? 'check' : a.icon === 'comment' ? 'comment' : a.icon === 'edit' ? 'edit' : a.icon === 'upload' ? 'upload' : a.icon === 'eye' ? 'eye' : 'alert'} size={13}/></div>
                    <div style={{ flex: 1 }}>
                      <div className="activity-text"><b>{actor.name}</b> {a.verb} <b>{a.target}</b></div>
                      <div className="activity-time">{a.time}</div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          <div className="card">
            <div className="card-header">
              <div>
                <h3 className="card-title">Group health</h3>
                <div className="card-sub">Suppliers per company</div>
              </div>
            </div>
            <div className="card-body" style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {SAIF_COMPANIES.slice(0, 5).map(c => {
                const count = SUPPLIERS.filter(s => s.companies.includes(c.id)).length;
                const pct = (count / SUPPLIERS.length) * 100;
                return (
                  <div key={c.id} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <span className="company-dot" style={{ background: c.color, width: 8, height: 8, borderRadius: '50%' }}></span>
                    <span style={{ fontSize: 12, minWidth: 130, color: 'var(--text)' }}>{c.name}</span>
                    <div style={{ flex: 1, height: 6, background: 'var(--surface-3)', borderRadius: 3, overflow: 'hidden' }}>
                      <div style={{ height: '100%', width: pct + '%', background: c.color, borderRadius: 3 }}></div>
                    </div>
                    <span className="text-mono text-xs text-mute" style={{ minWidth: 22, textAlign: 'right' }}>{count}</span>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { Dashboard });