/* global React */
// Shared dashboard sidebar used by several screens
const DashSidebar = ({ active = 'Dashboard' }) => {
  const items = [
    { label: 'Dashboard', icon: Ic.dashboard },
    { label: 'Verkoopdossier', icon: Ic.folder },
    { label: 'KozijnLAB', icon: Ic.wrench },
    { label: 'Offertes', icon: Ic.file },
    { label: 'Orders', icon: Ic.bag },
    { label: 'Planning', icon: Ic.cal },
    { label: 'Klanten', icon: Ic.users },
    { label: 'Rapportages', icon: Ic.chart },
  ];
  return (
    <aside style={{
      width: 210, background: '#0B2319', color: '#C9D6CD',
      padding: '18px 12px', display: 'flex', flexDirection: 'column', gap: 2,
      borderRight: '1px solid rgba(255,255,255,0.04)',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '4px 8px 18px' }}>
        <BrandMark size={22} variant="dark" />
        <span style={{ fontFamily: 'Sora', fontWeight: 600, fontSize: 14.5, color: '#F7F5F2', letterSpacing: '-0.01em' }}>
          Kozijn<span style={{ color: '#D4AE6C' }}>Suite</span>
        </span>
      </div>
      {items.map(({ label, icon: Icn }) => {
        const isActive = label === active;
        return (
          <div key={label} style={{
            display: 'flex', alignItems: 'center', gap: 10,
            padding: '8px 10px', borderRadius: 7,
            fontSize: 12.5, fontWeight: isActive ? 500 : 400,
            color: isActive ? '#F7F5F2' : '#96A89E',
            background: isActive ? 'rgba(184,138,59,0.14)' : 'transparent',
            borderLeft: isActive ? '2px solid #B88A3B' : '2px solid transparent',
            paddingLeft: isActive ? 8 : 10,
          }}>
            <Icn style={{ opacity: 0.85 }} />
            {label}
          </div>
        );
      })}
      <div style={{ flex: 1 }} />
      <div style={{
        marginTop: 10, padding: '10px', borderRadius: 8,
        background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.06)',
        display: 'flex', alignItems: 'center', gap: 8, fontSize: 11.5,
      }}>
        <div style={{ width: 26, height: 26, borderRadius: '50%', background: '#B88A3B', color: '#0F2B22', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 600, fontSize: 11 }}>MV</div>
        <div>
          <div style={{ color: '#F7F5F2', fontWeight: 500 }}>Mark de Vries</div>
          <div style={{ color: '#8AA093', fontSize: 10.5 }}>EcoPro Kozijnen</div>
        </div>
      </div>
    </aside>
  );
};

const DashTopbar = ({ title, sub, actions }) => (
  <div style={{
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    padding: '14px 22px', borderBottom: '1px solid #EEEAE2', background: '#fff',
  }}>
    <div>
      <div style={{ fontFamily: 'Sora', fontWeight: 600, fontSize: 17, color: '#0F2B22', letterSpacing: '-0.015em' }}>{title}</div>
      {sub && <div style={{ fontSize: 11.5, color: '#7E8C83', marginTop: 1 }}>{sub}</div>}
    </div>
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      {actions}
      <div style={{ width: 30, height: 30, borderRadius: '50%', background: '#0F2B22', color: '#F7F5F2', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 600 }}>MV</div>
    </div>
  </div>
);

/* ============ 1. ORDERDASHBOARD ============ */
const ScreenDashboard = () => {
  const kpis = [
    { label: 'Offertes open', value: '47', delta: '+12%', tone: 'up' },
    { label: 'Orders in productie', value: '89', delta: '+6%', tone: 'up' },
    { label: 'Omzet (MTD)', value: '€ 284.502', delta: '+8,4%', tone: 'up' },
    { label: 'Openstaand debiteuren', value: '€ 24.670', delta: '−5%', tone: 'down' },
  ];
  const pipeline = [
    { fase: 'Lead', aantal: 34, bedrag: '€ 182.400', color: '#7A846A' },
    { fase: 'Offerte', aantal: 47, bedrag: '€ 612.800', color: '#B88A3B' },
    { fase: 'Akkoord', aantal: 75, bedrag: '€ 1.240.300', color: '#0F2B22' },
    { fase: 'Productie', aantal: 89, bedrag: '€ 1.682.900', color: '#163A2E' },
    { fase: 'Montage', aantal: 23, bedrag: '€ 398.200', color: '#1E4A3A' },
  ];
  const recent = [
    { klant: 'Fam. Jansen', project: 'Verbouwing Enschede', status: 'Offerte verstuurd', tone: 'gold', bedrag: '€ 18.865,00' },
    { klant: 'Mark de Vries', project: 'Nieuwbouw Hengelo', status: 'Akkoord ontvangen', tone: 'green', bedrag: '€ 9.075,50' },
    { klant: 'Project Hofzicht', project: 'Hofzicht — 16 woningen', status: 'In productie', tone: 'ink', bedrag: '€ 124.570,00' },
    { klant: 'Villa Lonneker', project: 'Lonneker — Zuidzijde', status: 'Montage ingepland', tone: 'olive', bedrag: '€ 12.280,00' },
    { klant: 'Nieuwbouw De Esch', project: '12 woningen — De Esch', status: 'Offerte concept', tone: 'grey', bedrag: '€ 15.420,00' },
  ];
  const toneMap = {
    gold: { bg: 'rgba(184,138,59,0.12)', c: '#8E6624' },
    green: { bg: 'rgba(15,43,34,0.08)', c: '#0F2B22' },
    ink: { bg: 'rgba(122,132,106,0.18)', c: '#4A5547' },
    olive: { bg: 'rgba(122,132,106,0.12)', c: '#5B6551' },
    grey: { bg: '#EFEBE3', c: '#7E8C83' },
  };

  // Sparkline
  const spark = [18, 24, 22, 30, 28, 38, 34, 46, 42, 56, 52, 64];
  const max = Math.max(...spark);
  const min = Math.min(...spark);
  const w = 360, h = 80;
  const pts = spark.map((v, i) => [
    (i / (spark.length - 1)) * w,
    h - ((v - min) / (max - min)) * (h - 8) - 4,
  ]);
  const path = 'M' + pts.map(p => p.join(',')).join(' L');
  const area = path + ` L${w},${h} L0,${h} Z`;

  return (
    <div style={{ display: 'flex', height: '100%', background: '#FBFAF7' }}>
      <DashSidebar active="Dashboard" />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
        <DashTopbar
          title="Goedemorgen, Mark"
          sub="Dinsdag 28 april · 3 taken vandaag"
          actions={<>
            <div style={{ position: 'relative', marginRight: 4 }}>
              <Ic.search style={{ position: 'absolute', left: 9, top: 9, color: '#8A968E' }} />
              <input defaultValue="" placeholder="Zoek klant of project…" style={{
                border: '1px solid #EEEAE2', background: '#fff', borderRadius: 7,
                padding: '7px 10px 7px 28px', fontSize: 12, width: 200, outline: 'none',
              }}/>
            </div>
            <button style={{ background: '#0F2B22', color: '#F7F5F2', padding: '8px 13px', borderRadius: 7, fontSize: 12, fontWeight: 500, display: 'flex', alignItems: 'center', gap: 6 }}>
              <Ic.plus /> Nieuwe offerte
            </button>
          </>}
        />
        <div className="thin-scroll" style={{ padding: 22, overflow: 'auto', flex: 1 }}>
          {/* KPIs */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 20 }}>
            {kpis.map(k => (
              <div key={k.label} style={{ background: '#fff', border: '1px solid #EEEAE2', borderRadius: 10, padding: '14px 16px' }}>
                <div style={{ fontSize: 11, color: '#8A968E', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 500 }}>{k.label}</div>
                <div style={{ fontFamily: 'Sora', fontWeight: 600, fontSize: 22, color: '#0F2B22', marginTop: 6, letterSpacing: '-0.02em' }}>{k.value}</div>
                <div style={{ fontSize: 11, marginTop: 4, color: k.tone === 'up' ? '#2E6A4E' : '#A84B3B', fontWeight: 500 }}>
                  {k.delta} <span style={{ color: '#8A968E', fontWeight: 400 }}>t.o.v. vorige maand</span>
                </div>
              </div>
            ))}
          </div>

          {/* Pipeline + chart */}
          <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 14, marginBottom: 20 }}>
            <div style={{ background: '#fff', border: '1px solid #EEEAE2', borderRadius: 10, padding: 16 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 14 }}>
                <div style={{ fontFamily: 'Sora', fontWeight: 600, fontSize: 14, color: '#0F2B22' }}>Pipeline</div>
                <div style={{ fontSize: 11, color: '#8A968E' }}>5 fases · 268 dossiers</div>
              </div>
              <div style={{ display: 'flex', gap: 6, alignItems: 'flex-end', height: 110 }}>
                {pipeline.map((p, i) => (
                  <div key={p.fase} style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 5 }}>
                    <div style={{ height: `${30 + p.aantal * 0.8}%`, background: p.color, borderRadius: 5, position: 'relative' }}>
                      <div style={{ position: 'absolute', top: -18, left: 0, right: 0, textAlign: 'center', fontSize: 10.5, fontWeight: 600, color: '#0F2B22' }}>{p.aantal}</div>
                    </div>
                    <div style={{ fontSize: 10, color: '#5A6B62', textAlign: 'center', fontWeight: 500 }}>{p.fase}</div>
                    <div style={{ fontSize: 9.5, color: '#8A968E', textAlign: 'center' }} className="num">{p.bedrag}</div>
                  </div>
                ))}
              </div>
            </div>
            <div style={{ background: '#fff', border: '1px solid #EEEAE2', borderRadius: 10, padding: 16 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6 }}>
                <div style={{ fontFamily: 'Sora', fontWeight: 600, fontSize: 14, color: '#0F2B22' }}>Omzetontwikkeling</div>
                <div style={{ fontSize: 11, color: '#8A968E' }}>2026 YTD</div>
              </div>
              <div style={{ fontFamily: 'Sora', fontSize: 22, fontWeight: 600, color: '#0F2B22', letterSpacing: '-0.02em' }} className="num">€ 1.284.502</div>
              <svg viewBox={`0 0 ${w} ${h}`} style={{ width: '100%', height: 80, marginTop: 6 }}>
                <defs>
                  <linearGradient id="d-grad" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0" stopColor="#B88A3B" stopOpacity="0.28"/>
                    <stop offset="1" stopColor="#B88A3B" stopOpacity="0"/>
                  </linearGradient>
                </defs>
                <path d={area} fill="url(#d-grad)" />
                <path d={path} fill="none" stroke="#B88A3B" strokeWidth="1.8" />
                {pts.map((p, i) => i === pts.length - 1 && <circle key={i} cx={p[0]} cy={p[1]} r="3" fill="#B88A3B" />)}
              </svg>
            </div>
          </div>

          {/* Recent orders */}
          <div style={{ background: '#fff', border: '1px solid #EEEAE2', borderRadius: 10 }}>
            <div style={{ padding: '14px 16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid #EEEAE2' }}>
              <div style={{ fontFamily: 'Sora', fontWeight: 600, fontSize: 14, color: '#0F2B22' }}>Recente dossiers</div>
              <div style={{ fontSize: 11.5, color: '#B88A3B', fontWeight: 500 }}>Bekijk alle orders →</div>
            </div>
            <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12 }}>
              <thead>
                <tr style={{ color: '#8A968E', fontSize: 10.5, textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 500 }}>
                  <th style={{ textAlign: 'left', padding: '10px 16px', fontWeight: 500 }}>Klant</th>
                  <th style={{ textAlign: 'left', padding: '10px 16px', fontWeight: 500 }}>Project</th>
                  <th style={{ textAlign: 'left', padding: '10px 16px', fontWeight: 500 }}>Status</th>
                  <th style={{ textAlign: 'right', padding: '10px 16px', fontWeight: 500 }}>Bedrag</th>
                </tr>
              </thead>
              <tbody>
                {recent.map((r, i) => (
                  <tr key={i} style={{ borderTop: '1px solid #F3F0E8' }}>
                    <td style={{ padding: '10px 16px', fontWeight: 500, color: '#0F2B22' }}>{r.klant}</td>
                    <td style={{ padding: '10px 16px', color: '#5A6B62' }}>{r.project}</td>
                    <td style={{ padding: '10px 16px' }}>
                      <span style={{ fontSize: 10.5, padding: '3px 8px', borderRadius: 999, background: toneMap[r.tone].bg, color: toneMap[r.tone].c, fontWeight: 500 }}>{r.status}</span>
                    </td>
                    <td style={{ padding: '10px 16px', textAlign: 'right', fontWeight: 500, color: '#0F2B22' }} className="num">{r.bedrag}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { DashSidebar, DashTopbar, ScreenDashboard });