/* Dashboard screen */
const DashboardScreen = ({ onNav }) => {
  const stats = [
    { label: 'Active Evaluation Cycles', value: '6', icon: 'cycles', tint: 'tint-indigo', delta: '+2', deltaDir: 'up', foot: 'vs last quarter' },
    { label: 'Pending Evaluations',      value: '348', icon: 'myeval', tint: 'tint-violet', delta: '-42', deltaDir: 'down', foot: 'past 7 days' },
    { label: 'Completion Rate',          value: '74.2%', icon: 'chart_line', tint: 'tint-mint', delta: '+6.1%', deltaDir: 'up', foot: 'org-wide average' },
    { label: 'Avg. Competency Score',    value: '4.08 / 5', icon: 'competency', tint: 'tint-sky', delta: '+0.12', deltaDir: 'up', foot: 'vs Q1 2026' },
    { label: 'Anonymity Risk Alerts',    value: '3', icon: 'shield', tint: 'tint-amber', delta: '2 unresolved', deltaDir: 'neutral', foot: 'min. threshold = 4 raters' },
    { label: 'Departments Covered',      value: '8 / 8', icon: 'dept', tint: 'tint-emerald', delta: '100%', deltaDir: 'up', foot: 'across all business units' },
    { label: 'Total Participants',       value: '1,284', icon: 'users', tint: 'tint-indigo', delta: '+114', deltaDir: 'up', foot: 'invited this cycle' },
    { label: 'Open Feedback Comments',   value: '2,617', icon: 'message', tint: 'tint-violet', delta: '+318', deltaDir: 'up', foot: 'awaiting theme analysis' },
  ];

  const trendData = [
    { x: 'May 02', invites: 320, completed: 18 },
    { x: 'May 05', invites: 480, completed: 96 },
    { x: 'May 08', invites: 740, completed: 268 },
    { x: 'May 11', invites: 960, completed: 482 },
    { x: 'May 14', invites: 1180, completed: 712 },
    { x: 'May 17', invites: 1284, completed: 952 },
  ];

  const deptParticipation = [
    { x: 'Engineering', value: 92, color: '#4F46E5' },
    { x: 'Human Resources', value: 88, color: '#8B5CF6' },
    { x: 'Sales', value: 81, color: '#38BDF8' },
    { x: 'Customer Support', value: 79, color: '#14B8A6' },
    { x: 'Operations', value: 74, color: '#F59E0B' },
    { x: 'Finance', value: 68, color: '#10B981' },
    { x: 'IT', value: 62, color: '#EF4444' },
    { x: 'PMO / Digital', value: 54, color: '#94A3B8' },
  ];

  const radarAxes = ['Communication', 'Teamwork', 'Accountability', 'Problem Solving', 'Customer Focus', 'Leadership', 'Digital Awareness', 'Change Adapt.'];
  const radarSeries = [
    { name: 'This cycle', color: '#4F46E5', values: [4.2, 4.4, 4.1, 3.9, 4.3, 3.8, 3.6, 3.7] },
    { name: 'Previous cycle', color: '#94A3B8', values: [3.9, 4.2, 4.0, 3.8, 4.1, 3.6, 3.1, 3.3] },
  ];

  const donutData = [
    { label: 'Self',            value: 132, color: '#4F46E5' },
    { label: 'Manager',         value: 178, color: '#8B5CF6' },
    { label: 'Peer',            value: 412, color: '#38BDF8' },
    { label: 'Direct Report',   value: 96,  color: '#14B8A6' },
    { label: 'Internal Cust.',  value: 84,  color: '#F59E0B' },
  ];

  const heatRows = ['Engineering', 'Sales', 'Customer Support', 'HR', 'Finance', 'IT'];
  const heatCols = ['Communication', 'Teamwork', 'Accountability', 'Problem Solving', 'Leadership', 'Digital Awareness'];
  const heatVals = [
    [4.3, 4.5, 4.1, 4.2, 3.9, 4.4],
    [4.1, 4.0, 4.2, 3.8, 4.0, 3.5],
    [4.4, 4.6, 4.3, 4.0, 3.7, 3.6],
    [4.2, 4.3, 4.0, 3.9, 3.8, 3.4],
    [3.8, 3.9, 4.1, 3.7, 3.6, 3.3],
    [3.7, 3.8, 3.9, 3.6, 3.5, 4.0],
  ];

  const activity = [
    { who: 'Defne A.', action: 'launched', target: 'Q2 2026 Leadership 360 cycle', when: '12 min ago', tint: 'tint-indigo', icon: 'cycles' },
    { who: 'System',   action: 'flagged anonymity risk on', target: 'PMO / Digital — Customer Focus group (3 raters, min 4)', when: '38 min ago', tint: 'tint-amber', icon: 'shield' },
    { who: 'Ergin K.', action: 'published template', target: 'Engineering Team Review v2.4', when: '1h ago', tint: 'tint-violet', icon: 'template' },
    { who: 'Selin Y.', action: 'closed', target: 'Sales Org Upward Feedback — report ready', when: '3h ago', tint: 'tint-emerald', icon: 'check' },
    { who: 'HR Ops',   action: 'sent reminder to', target: '184 pending raters across Engineering', when: 'Yesterday', tint: 'tint-sky', icon: 'bell' },
    { who: 'You',      action: 'opened', target: 'Manager Calibration 360 dashboard', when: 'Yesterday', tint: 'tint-slate', icon: 'eye' },
  ];

  return (
    <div className="fade-in">
      <div className="page-header">
        <div>
          <h1>Good morning, Defne 👋</h1>
          <div className="subtitle">Here's how performance evaluation is going across the organization today.</div>
        </div>
        <div className="page-actions">
          <button className="btn btn-secondary">
            <Icon name="download" size={15}/> Export snapshot
          </button>
          <button className="btn btn-primary" onClick={() => onNav('cycles')}>
            <Icon name="plus" size={15}/> Create Cycle
          </button>
        </div>
      </div>

      {/* Anonymity alert */}
      <div className="alert alert-warning" style={{ marginBottom: 20 }}>
        <Icon name="shield" size={18}/>
        <div style={{ flex: 1 }}>
          <div className="alert-title">3 rater groups are below the anonymity threshold</div>
          <div className="alert-body">Results for these groups will be hidden in reports until at least 4 raters submit. Affected: PMO/Digital — Customer Focus · Finance — Leadership · IT — Coaching Others.</div>
        </div>
        <button className="btn btn-sm btn-secondary" onClick={() => onNav('raters')} style={{ borderColor: '#FDE68A', background: 'white' }}>Review now</button>
      </div>

      {/* KPI grid */}
      <div className="grid grid-4" style={{ marginBottom: 20 }}>
        {stats.map((s, i) => <StatCard key={i} {...s}/>)}
      </div>

      {/* Charts row 1 */}
      <div className="grid grid-12" style={{ marginBottom: 20 }}>
        <div className="card col-span-8">
          <div className="card-header">
            <div>
              <h3>Evaluation completion trend</h3>
              <div className="desc">Q2 2026 cycles — invitations vs submitted responses</div>
            </div>
            <div className="legend">
              <span className="legend-item"><span className="legend-swatch" style={{ background: '#4F46E5' }}></span>Invitations sent</span>
              <span className="legend-item"><span className="legend-swatch" style={{ background: '#8B5CF6' }}></span>Submitted</span>
            </div>
          </div>
          <div className="card-body">
            <LineChart
              data={trendData}
              series={[{ key: 'invites', color: '#4F46E5' }, { key: 'completed', color: '#8B5CF6' }]}
              height={240}
            />
          </div>
        </div>
        <div className="card col-span-4">
          <div className="card-header">
            <div>
              <h3>Rater type distribution</h3>
              <div className="desc">Across all active cycles</div>
            </div>
          </div>
          <div className="card-body" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14 }}>
            <DonutChart data={donutData} size={180}/>
            <div className="legend" style={{ justifyContent: 'center', columnGap: 14, rowGap: 6 }}>
              {donutData.map(d => (
                <span key={d.label} className="legend-item">
                  <span className="legend-swatch" style={{ background: d.color }}></span>{d.label} <span style={{ color: 'var(--ink-400)', marginLeft: 2 }}>{d.value}</span>
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Charts row 2 */}
      <div className="grid grid-12" style={{ marginBottom: 20 }}>
        <div className="card col-span-4">
          <div className="card-header">
            <div>
              <h3>Department participation</h3>
              <div className="desc">% completion this cycle</div>
            </div>
          </div>
          <div className="card-body">
            <BarChart data={deptParticipation} series={[{ key: 'value', suffix: '%' }]} horizontal height={260}/>
          </div>
        </div>
        <div className="card col-span-4">
          <div className="card-header">
            <div>
              <h3>Competency score profile</h3>
              <div className="desc">Org-wide — this vs previous cycle</div>
            </div>
          </div>
          <div className="card-body" style={{ display: 'grid', placeItems: 'center' }}>
            <RadarChart axes={radarAxes} series={radarSeries} size={280}/>
            <div className="legend" style={{ marginTop: 8 }}>
              <span className="legend-item"><span className="legend-swatch" style={{ background: '#4F46E5' }}></span>This cycle</span>
              <span className="legend-item"><span className="legend-swatch" style={{ background: '#94A3B8' }}></span>Previous cycle</span>
            </div>
          </div>
        </div>
        <div className="card col-span-4">
          <div className="card-header">
            <div>
              <h3>Heatmap — department × competency</h3>
              <div className="desc">Average score (1.0–5.0)</div>
            </div>
          </div>
          <div className="card-body">
            <Heatmap rows={heatRows} cols={heatCols} values={heatVals}/>
          </div>
        </div>
      </div>

      {/* Activity timeline */}
      <div className="card">
        <div className="card-header">
          <div>
            <h3>Recent activity</h3>
            <div className="desc">Audit-grade trail of what changed across the platform</div>
          </div>
          <button className="btn btn-ghost btn-sm">View all <Icon name="chevright" size={13}/></button>
        </div>
        <div className="card-body" style={{ paddingTop: 0 }}>
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {activity.map((a, i) => (
              <div key={i} style={{ display: 'flex', gap: 12, padding: '12px 0', borderBottom: i < activity.length - 1 ? '1px solid var(--border)' : 'none' }}>
                <div className={`stat-icon ${a.tint}`} style={{ width: 32, height: 32, marginBottom: 0, borderRadius: 8 }}>
                  <Icon name={a.icon} size={15}/>
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13 }}>
                    <span style={{ fontWeight: 600, color: 'var(--ink-900)' }}>{a.who}</span> {a.action}{' '}
                    <span style={{ color: 'var(--ink-700)', fontWeight: 500 }}>{a.target}</span>
                  </div>
                  <div style={{ fontSize: 11.5, color: 'var(--ink-500)', marginTop: 2 }}>{a.when}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

window.DashboardScreen = DashboardScreen;