// WTS Cyprus — Home views: Partner / Admin overview + Staff "My work"
const { useMemo } = React;

// ── Activity event styling ──────────────────────────────────────────────────
const EVENT_CONF = {
  item_submitted:     { icon: 'inbox',         color: 'hsl(213 80% 35%)', bg: 'hsl(213 90% 94%)' },
  item_accepted:      { icon: 'circle-check',  color: 'hsl(142 55% 28%)', bg: 'hsl(142 60% 93%)' },
  change_requested:   { icon: 'rotate-ccw',    color: 'hsl(32 95% 35%)',  bg: 'hsl(38 95% 93%)' },
  reminder_sent:      { icon: 'bell',          color: 'hsl(260 60% 42%)', bg: 'hsl(260 60% 94%)' },
  engagement_created: { icon: 'folder-plus',   color: 'hsl(213 80% 35%)', bg: 'hsl(213 90% 94%)' },
  study_completed:    { icon: 'bar-chart-2',   color: 'hsl(142 55% 28%)', bg: 'hsl(142 60% 93%)' },
  verdict_set:        { icon: 'gavel',         color: 'hsl(0 0% 30%)',    bg: 'hsl(0 0% 93%)' },
};

const getEng   = id => ENGAGEMENTS.find(e => e.id === id);
const getStudy = id => STUDIES.find(s => s.id === id);

// ── KPI Card ──────────────────────────────────────────────────────────────
const KPICard = ({ label, value, unit, subtext, trend, trendUp = true, sparkline, tooltip }) => (
  <Card>
    <CardHeader>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <CardTitle>{label}</CardTitle>
        {tooltip && (
          <Tooltip content={tooltip}>
            <Icon name="info" size={13} style={{ opacity: 0.35, cursor: 'help' }} />
          </Tooltip>
        )}
      </div>
    </CardHeader>
    <CardContent>
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 8 }}>
        <div style={{ minWidth: 0, flex: 1 }}>
          <div className="ck-kpi-value">
            {value}
            {unit && <span style={{ fontSize: 17, fontWeight: 500, letterSpacing: '-0.01em', marginLeft: 3 }}>{unit}</span>}
          </div>
          {subtext && (
            <div style={{ fontSize: 12, color: 'var(--muted-foreground)', marginTop: 5, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{subtext}</div>
          )}
          {trend && (
            <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginTop: 7, whiteSpace: 'nowrap' }}>
              <Icon name={trendUp ? 'trending-up' : 'trending-down'} size={12} style={{ opacity: 0.9 }} />
              <span style={{ fontSize: 12, fontWeight: 500, color: trendUp ? 'hsl(142 55% 32%)' : 'var(--destructive)' }}>{trend}</span>
            </div>
          )}
        </div>
        {sparkline && (
          <div style={{ width: 88, flexShrink: 0, marginBottom: -2 }}>
            <Sparkline data={sparkline} dataKey="v" />
          </div>
        )}
      </div>
    </CardContent>
  </Card>
);

// ── Activity item ─────────────────────────────────────────────────────────
const ActivityItem = ({ event }) => {
  const conf = EVENT_CONF[event.type] || { icon: 'circle', color: 'var(--muted-foreground)', bg: 'var(--secondary)' };
  const eng   = event.engId   ? getEng(event.engId)     : null;
  const study = event.studyId ? getStudy(event.studyId) : null;
  return (
    <li className="wts-activity-item">
      <span className="wts-activity-icon" style={{ background: conf.bg }}>
        <Icon name={conf.icon} size={13} style={{ opacity: 0.9 }} />
      </span>
      <div style={{ flex: 1, minWidth: 0 }}>
        <span style={{ fontSize: 13, lineHeight: 1.45, color: 'var(--foreground)' }}>
          {event.desc}
          {eng && (<> · <button type="button" className="wts-link">{eng.client}</button></>)}
          {study && !eng && (<> · <button type="button" className="wts-link">{study.name}</button></>)}
        </span>
      </div>
      <span style={{ fontSize: 11.5, color: 'var(--muted-foreground)', whiteSpace: 'nowrap', flexShrink: 0, paddingLeft: 12 }}>
        {event.when}
      </span>
    </li>
  );
};

// ── Attention panel — overdue or stalled engagements ───────────────────────
const buildAttention = () => {
  const rows = [];
  ENGAGEMENTS.forEach(e => {
    const items = getItemsForEngagement(e.id);
    const overdue = items.filter(i => (i.status === 'pending' || i.status === 'change_requested') && isOverdue(i.deadline)).length;
    if (e.status === 'on_hold') rows.push({ engId: e.id, reason: 'On hold', type: 'stale' });
    else if (overdue > 0) rows.push({ engId: e.id, reason: `${overdue} item${overdue > 1 ? 's' : ''} overdue`, type: 'overdue' });
  });
  return rows.slice(0, 4);
};

const AttentionPanel = () => (
  <Card style={{ flex: 1 }}>
    <CardHeader>
      <CardTitle>Needs attention</CardTitle>
      <CardDescription>Overdue or stalled engagements</CardDescription>
    </CardHeader>
    <CardContent>
      {buildAttention().map(({ engId, reason, type }, i) => {
        const eng = getEng(engId);
        return (
          <div key={i} className="wts-attention-item">
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 500, lineHeight: 1.3 }}>{eng.name}</div>
              <div style={{ fontSize: 12, color: 'var(--muted-foreground)', marginTop: 2 }}>{eng.client}</div>
            </div>
            <span className={cn('wts-tag', `wts-tag--${type}`)}>{reason}</span>
          </div>
        );
      })}
    </CardContent>
  </Card>
);

// ── Admin shortcuts card ──────────────────────────────────────────────────
const AdminShortcuts = ({ onNavigate }) => (
  <Card>
    <CardHeader><CardTitle>Admin shortcuts</CardTitle></CardHeader>
    <CardContent>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        <Button variant="outline" style={{ justifyContent: 'flex-start', fontSize: 13 }} onClick={() => onNavigate && onNavigate('admin-users')}>
          <Icon name="users" size={14} /> Manage users
        </Button>
        <Button variant="outline" style={{ justifyContent: 'flex-start', fontSize: 13 }} onClick={() => onNavigate && onNavigate('admin-clients')}>
          <Icon name="building-2" size={14} /> Client profiles
        </Button>
      </div>
    </CardContent>
  </Card>
);

// ── TP Studies table ──────────────────────────────────────────────────────
const TPStudiesTable = () => (
  <table className="ck-table">
    <thead>
      <tr>
        <th>Study</th>
        <th>Client</th>
        <th style={{ width: 90 }}>Candidates</th>
        <th style={{ width: 180 }}>Analyst review</th>
        <th style={{ width: 100 }}>Status</th>
      </tr>
    </thead>
    <tbody>
      {STUDIES.map(s => {
        const pct = s.candidates > 0 ? Math.round((s.reviewed / s.candidates) * 100) : 0;
        return (
          <tr key={s.id}>
            <td style={{ fontWeight: 500, fontSize: 13 }}>{s.name}</td>
            <td style={{ color: 'var(--muted-foreground)', fontSize: 13 }}>{s.engagement}</td>
            <td style={{ fontVariantNumeric: 'tabular-nums', fontSize: 13 }}>{s.status === 'draft' ? '—' : s.candidates}</td>
            <td>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <div style={{ flex: 1 }}><ProgressBar value={s.reviewed} max={s.candidates} /></div>
                <span style={{ fontSize: 11.5, color: 'var(--muted-foreground)', width: 30, textAlign: 'right', fontVariantNumeric: 'tabular-nums' }}>{pct}%</span>
              </div>
            </td>
            <td><StatusBadge status={s.status} /></td>
          </tr>
        );
      })}
    </tbody>
  </table>
);

// ── PARTNER / ADMIN HOME ──────────────────────────────────────────────────
const PartnerHome = ({ isAdmin, onNavigate, onStartTour, showBanner, onDismissBanner }) => {
  const activeCount = ENGAGEMENTS.filter(e => e.status === 'active').length;
  const toReview    = getSubmittedItems(ENGAGEMENTS).length;
  const overdue     = REQUEST_ITEMS.filter(i => (i.status === 'pending' || i.status === 'change_requested') && isOverdue(i.deadline)).length;
  const weekTotal   = WEEKLY_DATA.reduce((s, d) => s + d.v, 0);

  return (
    <div className="ck-page">
      {showBanner && <OnboardingBanner onStart={onStartTour} onDismiss={onDismissBanner} />}
      <div className="ck-page__header">
        <div>
          <div className="ck-page__title">Overview</div>
          <div className="ck-muted" style={{ marginTop: 5 }}>All engagements and studies · {new Date().toLocaleDateString('en-GB', { day: 'numeric', month: 'long', year: 'numeric' })}</div>
        </div>
      </div>

      <div className="ck-kpi-grid">
        <KPICard label="Active engagements" value={activeCount} subtext={`${ENGAGEMENTS.length} total · 1 on hold`} />
        <KPICard label="Items to review"    value={toReview}   subtext="submitted, awaiting staff" />
        <KPICard label="Accepted this week"  value={weekTotal}  subtext="items accepted" sparkline={WEEKLY_DATA} />
        <KPICard label="Overdue items"      value={overdue}    subtext="past deadline, still open" />
      </div>

      <div className="wts-cols-2-1" style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 16, alignItems: 'start' }}>
        <Card>
          <CardHeader>
            <CardTitle>Recent activity</CardTitle>
            <CardDescription>Across both modules</CardDescription>
          </CardHeader>
          <CardContent style={{ padding: '0 0' }}>
            <ul className="wts-activity">{ACTIVITY.map(ev => <ActivityItem key={ev.id} event={ev} />)}</ul>
          </CardContent>
        </Card>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {isAdmin && <AdminShortcuts onNavigate={onNavigate} />}
          <AttentionPanel />
        </div>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>TP studies in flight</CardTitle>
          <CardDescription>Across all engagements</CardDescription>
        </CardHeader>
        <CardContent style={{ padding: 0 }}><TPStudiesTable /></CardContent>
      </Card>
    </div>
  );
};

// ── STAFF HOME ────────────────────────────────────────────────────────────
const StaffHome = ({ userId, onStartTour, showBanner, onDismissBanner }) => {
  const myEngs    = useMemo(() => ENGAGEMENTS.filter(e => e.assigned.includes(userId)), [userId]);
  const myStudies = useMemo(() => STUDIES.filter(s => s.createdBy === userId), [userId]);
  const myEngIds  = useMemo(() => new Set(myEngs.map(e => e.id)), [myEngs]);
  const myStuIds  = useMemo(() => new Set(myStudies.map(s => s.id)), [myStudies]);
  const myActivity = useMemo(() =>
    ACTIVITY.filter(ev => (ev.engId && myEngIds.has(ev.engId)) || (ev.studyId && myStuIds.has(ev.studyId))),
    [myEngIds, myStuIds]
  );

  return (
    <div className="ck-page">
      {showBanner && <OnboardingBanner onStart={onStartTour} onDismiss={onDismissBanner} />}
      <div className="ck-page__header">
        <div>
          <div className="ck-page__title">My work</div>
          <div className="ck-muted" style={{ marginTop: 5 }}>Your assigned engagements and studies</div>
        </div>
      </div>

      <div className="wts-cols-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        <Card>
          <CardHeader>
            <CardTitle>My engagements</CardTitle>
            <CardDescription>{myEngs.length} assigned to you</CardDescription>
          </CardHeader>
          <CardContent>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
              {myEngs.map(e => {
                const st = engagementStats(e.id);
                return (
                  <div key={e.id}>
                    <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 8, marginBottom: 8 }}>
                      <div style={{ minWidth: 0 }}>
                        <div style={{ fontSize: 13, fontWeight: 500, lineHeight: 1.3 }}>{e.name}</div>
                        <div style={{ fontSize: 12, color: 'var(--muted-foreground)', marginTop: 2 }}>{e.client}</div>
                      </div>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexShrink: 0 }}>
                        <StatusBadge status={e.status} />
                        <span style={{ fontSize: 11.5, color: 'var(--muted-foreground)', fontVariantNumeric: 'tabular-nums' }}>{st.acceptedRequired}/{st.requiredTotal}</span>
                      </div>
                    </div>
                    <ProgressBar value={st.acceptedRequired} max={st.requiredTotal} />
                  </div>
                );
              })}
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>My studies</CardTitle>
            <CardDescription>{myStudies.length} created by you</CardDescription>
          </CardHeader>
          <CardContent>
            {myStudies.length === 0 ? (
              <div style={{ fontSize: 13, color: 'var(--muted-foreground)' }}>No studies yet.</div>
            ) : (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
                {myStudies.map(s => (
                  <div key={s.id}>
                    <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 8, marginBottom: 8 }}>
                      <div style={{ minWidth: 0 }}>
                        <div style={{ fontSize: 13, fontWeight: 500, lineHeight: 1.3 }}>{s.name}</div>
                        <div style={{ fontSize: 12, color: 'var(--muted-foreground)', marginTop: 2 }}>{s.engagement}</div>
                      </div>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexShrink: 0 }}>
                        <StatusBadge status={s.status} />
                        <span style={{ fontSize: 11.5, color: 'var(--muted-foreground)', fontVariantNumeric: 'tabular-nums' }}>{s.reviewed}/{s.candidates}</span>
                      </div>
                    </div>
                    <ProgressBar value={s.reviewed} max={s.candidates} />
                  </div>
                ))}
              </div>
            )}
          </CardContent>
        </Card>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>Recent updates</CardTitle>
          <CardDescription>Activity on your engagements and studies</CardDescription>
        </CardHeader>
        <CardContent style={{ padding: '0 0' }}>
          <ul className="wts-activity">{myActivity.slice(0, 8).map(ev => <ActivityItem key={ev.id} event={ev} />)}</ul>
        </CardContent>
      </Card>
    </div>
  );
};

Object.assign(window, { PartnerHome, StaffHome });