/* global React */
const { useState, useEffect } = React;

function HomeScreen({ onNavigate }) {
  const [pdStatus, setPdStatus] = useState(null);
  const [kbStatus, setKbStatus] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setLoading(true);
    Promise.allSettled([
      fetch('/api/pd/api/status', { headers: authHeader() }).then(r => r.json()),
      fetch('/api/kb/status', { headers: authHeader() }).then(r => r.json()),
    ]).then(([pd, kb]) => {
      if (pd.status === 'fulfilled') setPdStatus(pd.value);
      if (kb.status === 'fulfilled') setKbStatus(kb.value);
      setLoading(false);
    });
  }, []);

  // Derived stats
  const pdRunning = pdStatus?.isRunning;
  const pdLastSync = pdStatus?.history?.[0]?.ts ? formatAge(new Date(pdStatus.history[0].ts)) : '—';
  const pdRecords = pdStatus ? Object.values(pdStatus.entityCounts || {}).reduce((a, b) => a + b, 0) : null;
  const pdEntityCount = pdStatus?.entities?.length || 0;

  const kbCrm = kbStatus?.crm || {};
  const kbDocs = kbStatus?.documents || {};
  const kbDocsDone = Number(kbDocs.done || 0);
  const kbDocsTotal = Object.values(kbDocs).reduce((a, b) => a + Number(b), 0);
  const kbChunks = Number(kbStatus?.total_chunks || 0);

  const tools = [
    {
      id: 'pipedrive', name: 'Pipedrive Sync', icon: I.database, accent: 'brand',
      stats: [
        { label: 'Last sync', value: loading ? '…' : pdLastSync },
        { label: 'Status', value: loading ? '…' : pdRunning ? 'Running' : 'Idle', tone: pdRunning ? 'success' : 'neutral' },
        { label: 'Entities', value: loading ? '…' : String(pdEntityCount) },
      ],
    },
    {
      id: 'knowledge', name: 'Knowledge Base', icon: I.book, accent: 'info',
      stats: [
        { label: 'Documents', value: loading ? '…' : kbDocsTotal.toLocaleString() },
        { label: 'Status', value: loading ? '…' : 'Idle', tone: 'neutral' },
        { label: 'Embeddings', value: loading ? '…' : kbChunks.toLocaleString() },
      ],
    },
    {
      id: 'monitoring', name: 'System Monitoring', icon: I.activity, accent: 'neutral', soon: true,
      stats: [
        { label: 'Services', value: '—' },
        { label: 'Status', value: 'Coming soon', tone: 'neutral' },
        { label: 'Alerts', value: '—' },
      ],
    },
  ];

  const kpiRecords = pdRecords != null ? Number(pdRecords).toLocaleString() : '…';

  return (
    <div className="route-in" style={{ padding: '32px 32px 64px', maxWidth: 1280, margin: '0 auto' }}>
      <div style={{ marginBottom: 24, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap' }}>
        <h1 style={{ fontFamily: 'var(--s-font-display)', fontWeight: 400, fontSize: 24, letterSpacing: '-0.01em' }}>Tools</h1>
      </div>

      {/* KPI strip */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 32 }}>
        <Kpi label="Tools online"     value="2 / 3" hint="System monitoring coming soon"/>
        <Kpi label="Last PD sync"     value={loading ? '…' : pdLastSync} hint={`${pdEntityCount} entities`} tone="accent"/>
        <Kpi label="Records mirrored" value={kpiRecords} hint="across all Pipedrive entities"/>
        <Kpi label="KB embeddings"    value={loading ? '…' : kbChunks.toLocaleString()} hint={`${kbDocsDone}/${kbDocsTotal} documents processed`}/>
      </div>

      {/* Tools grid */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(340px, 1fr))', gap: 14 }}>
        {tools.map(t => <ToolCard key={t.id} tool={t} onClick={() => !t.soon && onNavigate(t.id)}/>)}
      </div>

      {/* Recent PD runs */}
      {pdStatus?.history?.length > 0 && (
        <div style={{ marginTop: 40 }}>
          <SectionHead title="Recent Pipedrive sync runs" hint="From sync state"/>
          <div className="card" style={{ overflow: 'hidden' }}>
            {pdStatus.history.slice(0, 5).map((h, i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '16px 1fr auto', gap: 14, alignItems: 'center', padding: '11px 16px', borderBottom: i === Math.min(4, pdStatus.history.length - 1) ? 0 : '1px solid var(--s-divider)' }}>
                <span className={`status-dot ${h.status === 'success' ? 'success' : 'danger'}`}/>
                <span style={{ fontSize: 13, fontFamily: 'var(--s-font-mono)', color: 'var(--s-fg-2)' }}>{new Date(h.ts).toLocaleString()}</span>
                <Badge tone={h.status === 'success' ? 'success' : 'danger'}>{h.status}</Badge>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

function ToolCard({ tool, onClick }) {
  const [hover, setHover] = useState(false);
  return (
    <button onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} disabled={tool.soon}
      style={{
        textAlign: 'left',
        background: hover && !tool.soon ? 'var(--s-bg-3)' : 'var(--s-bg-2)',
        border: `1px solid ${hover && !tool.soon ? 'var(--s-border-strong)' : 'var(--s-border)'}`,
        borderRadius: 'var(--s-r-md)', padding: 18, cursor: tool.soon ? 'not-allowed' : 'pointer',
        display: 'flex', flexDirection: 'column', gap: 14,
        transition: 'all var(--s-dur-ui) var(--s-ease)', opacity: tool.soon ? 0.62 : 1,
        color: 'inherit', fontFamily: 'inherit',
      }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
        <div style={{
          width: 40, height: 40, borderRadius: 8, flexShrink: 0,
          background: tool.accent === 'brand' ? 'var(--s-brand-weak)' : tool.accent === 'info' ? 'var(--s-info-weak)' : 'var(--s-bg-3)',
          color: tool.accent === 'brand' ? 'var(--s-link)' : tool.accent === 'info' ? 'var(--s-info)' : 'var(--s-fg-2)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}><Icon d={tool.icon} size={20}/></div>
        <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 8 }}>
          <h3 style={{ fontSize: 15, fontWeight: 600 }}>{tool.name}</h3>
          {tool.soon && <Badge tone="neutral">Soon</Badge>}
        </div>
        <span style={{ color: 'var(--s-fg-3)', display: 'flex', transform: hover && !tool.soon ? 'translate(2px,-2px)' : 'none', transition: 'transform var(--s-dur-ui) var(--s-ease)' }}>
          <Icon d={I.arrowUpRight} size={16}/>
        </span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', borderTop: '1px solid var(--s-border)', marginTop: 4, paddingTop: 14 }}>
        {tool.stats.map((s, i) => (
          <div key={i} style={{ paddingLeft: i === 0 ? 0 : 12, borderLeft: i === 0 ? 0 : '1px solid var(--s-border)' }}>
            <div className="micro" style={{ marginBottom: 4 }}>{s.label}</div>
            <div style={{ fontSize: 13, fontWeight: 500, color: s.tone === 'success' ? 'var(--s-success)' : s.tone === 'neutral' ? 'var(--s-fg-2)' : 'var(--s-fg-1)', display: 'flex', alignItems: 'center', gap: 6 }}>
              {s.tone === 'success' && <span className="status-dot running"/>}
              {s.value}
            </div>
          </div>
        ))}
      </div>
    </button>
  );
}

function formatAge(date) {
  const diff = Math.round((Date.now() - date) / 60000);
  if (isNaN(diff)) return '—';
  if (diff < 1) return 'just now';
  if (diff < 60) return `${diff}m ago`;
  if (diff < 1440) return `${Math.floor(diff / 60)}h ago`;
  return date.toLocaleDateString();
}

window.HomeScreen = HomeScreen;