// A reference dashboard for an app built on Outlevo: credits left, each campaign's numbers, the Readiness Cards
// waiting for a rep and the queued Revenue Actions. Copy it and change what you like.
// Data comes through your own server route (/api/outlevo, see allow.ts); no key reaches the browser.
// Needs @outlevo/components (install line: https://developers.outlevo.com/components.html) and React 18+.
import { useEffect, useState } from 'react';
import { OutlevoProvider, ReadinessCard, RevenueActionList } from '@outlevo/components';

const BASE = '/api/outlevo';
const fetcher = (path: string, init?: RequestInit) => fetch(`${BASE}${path}`, init);

type Usage = { plan: string; monthly: { granted: number; remaining: number }; available: number };
type Campaign = { id: string; name: string; status: string };
type Stats = { leads: number; sent: number; emails_sent: number; replied: number; bounced: number; reply_rate: number | null };
type Handoff = { id: string };

function useJson<T>(path: string | null) {
  const [data, setData] = useState<T | null>(null);
  const [error, setError] = useState<string | null>(null);
  useEffect(() => {
    if (!path) return;
    let live = true;
    fetcher(path).then(async (r) => {
      const body = await r.json();
      if (!live) return;
      if (r.ok) setData(body as T);
      else setError(body?.error?.message ?? `HTTP ${r.status}`);   // error.fix says what to do next
    }).catch((e) => live && setError(String(e)));
    return () => { live = false; };
  }, [path]);
  return { data, error };
}

const pct = (n: number | null | undefined) => (n == null ? '–' : `${(n * 100).toFixed(1)}%`);

function Credits() {
  const { data, error } = useJson<Usage>('/v1/usage');
  if (error) return <p role="alert">{error}</p>;
  if (!data) return <p>Loading credits…</p>;
  return <p><b>{data.available.toLocaleString()}</b> credits available · {data.monthly.remaining.toLocaleString()} of {data.monthly.granted.toLocaleString()} left this cycle ({data.plan})</p>;
}

function CampaignRow({ c }: { c: Campaign }) {
  const { data } = useJson<Stats>(`/v1/campaigns/${c.id}/stats`);
  return (
    <tr>
      <td>{c.name}</td><td>{c.status}</td>
      <td>{data?.leads ?? '…'}</td><td>{data?.emails_sent ?? '…'}</td><td>{data?.replied ?? '…'}</td><td>{pct(data?.reply_rate)}</td><td>{data?.bounced ?? '…'}</td>
    </tr>
  );
}

function Campaigns() {
  const { data, error } = useJson<{ data: Campaign[] }>('/v1/campaigns?limit=20');
  if (error) return <p role="alert">{error}</p>;
  if (!data) return <p>Loading campaigns…</p>;
  if (!data.data.length) return <p>No campaigns yet. They are set up and started in Outlevo.</p>;
  return (
    <table>
      <thead><tr><th>Campaign</th><th>Status</th><th>Leads</th><th>Emails sent</th><th>Replied</th><th>Reply rate</th><th>Bounced</th></tr></thead>
      <tbody>{data.data.map((c) => <CampaignRow key={c.id} c={c} />)}</tbody>
    </table>
  );
}

function WaitingCards() {
  const { data, error } = useJson<{ data: Handoff[] }>('/v1/handoffs?status=delivered&limit=5');
  if (error) return <p role="alert">{error}</p>;
  if (!data) return <p>Loading Readiness Cards…</p>;
  if (!data.data.length) return <p>No Readiness Cards waiting.</p>;
  return <>{data.data.map((h) => <ReadinessCard key={h.id} handoffId={h.id} />)}</>;
}

export function Dashboard() {
  return (
    <OutlevoProvider fetcher={fetcher}>
      <main style={{ maxWidth: 960, margin: '0 auto', padding: 16 }}>
        <h1>Outbound</h1>
        <Credits />
        <h2>Campaigns</h2>
        <Campaigns />
        <h2>Readiness Cards waiting for a rep</h2>
        <WaitingCards />
        <h2>Queued actions</h2>
        <RevenueActionList status="queued" />
      </main>
    </OutlevoProvider>
  );
}

export default Dashboard;