// ============================================================================
// public/screens/_stubs.jsx — placeholder screens for not-yet-built sections
// ----------------------------------------------------------------------------
// Each screen renders a tasteful "Coming soon" card with the phase it's
// scheduled for, so navigation works even before the real screen exists.
// As each phase delivers a real screen, the matching stub is deleted from
// the Router switch in app.jsx and the real component takes over.
// ============================================================================

function ComingSoon({ title, phase, description, icon }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "var(--gap-grid)" }}>
      <Card>
        <div style={{ padding: "40px 24px", textAlign: "center", maxWidth: 520, margin: "0 auto" }}>
          <div style={{
            width: 64, height: 64, borderRadius: 16, margin: "0 auto 20px",
            display: "grid", placeItems: "center",
            background: "var(--accent-soft)", color: "var(--accent)",
          }}>
            {icon || <I.spark size={28}/>}
          </div>
          <Badge tone="blue" dot>{phase}</Badge>
          <h2 style={{ fontSize: 22, fontWeight: 600, letterSpacing: "-0.02em", margin: "14px 0 10px" }}>{title}</h2>
          <p style={{ color: "var(--ink-3)", fontSize: 13.5, lineHeight: 1.6, margin: 0 }}>{description}</p>
        </div>
      </Card>
    </div>
  );
}

// ── User screens ────────────────────────────────────────────────────────
// NOTE: CampaignsScreen, AgentsScreen, ContactsScreen are now REAL screens
// (built in Phase 3) — see public/screens/{campaigns,agents,contacts}.jsx.
function FlowBuilderScreen()  { return <ComingSoon icon={<I.flow size={28}/>}         phase="Phase 4"  title="Flow Builder"         description="Visually design conversation logic — branches, intents, transfers, and integrations."/>; }
function KnowledgeBaseScreen(){ return <ComingSoon icon={<I.kb size={28}/>}           phase="Phase 6"  title="Knowledge Base"       description="Upload product docs your AI agents will use to answer questions accurately."/>; }
function CallHistoryScreen()  { return <ComingSoon icon={<I.history size={28}/>}      phase="Phase 5"  title="Call History"         description="Every call, transcript, recording, and outcome — searchable and exportable."/>; }
function AnalyticsScreen()    { return <ComingSoon icon={<I.analytics size={28}/>}    phase="Phase 7"  title="Analytics"            description="Deep performance insights — agent comparison, campaign ROI, lead quality trends."/>; }
function IntegrationsScreen() { return <ComingSoon icon={<I.integrations size={28}/>} phase="Phase 7"  title="Integrations"         description="Connect VoAIs to your CRM, calendar, WhatsApp, Slack, and webhooks."/>; }
function PricingScreen()      { return <ComingSoon icon={<I.billing size={28}/>}      phase="Phase 7"  title="Plans & Billing"      description="View your plan, usage, invoices, and upgrade options."/>; }
function SettingsScreen()     { return <ComingSoon icon={<I.settings size={28}/>}     phase="Phase 7"  title="Settings"             description="Profile, team members, security, telephony, and notification preferences."/>; }
function InboxScreen()        { return <ComingSoon icon={<I.inbox size={28}/>}        phase="Phase 6"  title="Unified Inbox"        description="All conversations across calls, WhatsApp, and email — one place to follow up."/>; }
function WhatsAppScreen()     { return <ComingSoon icon={<I.whatsapp size={28}/>}     phase="Phase 6"  title="WhatsApp Business"    description="Templates, broadcasts, and conversations for post-call follow-up."/>; }
function MonitorScreen()      { return <ComingSoon icon={<I.monitor size={28}/>}      phase="Phase 5"  title="Live Call Monitor"    description="Real-time view of active calls. Listen, barge, or take over with one click."/>; }

// ── Admin screens ───────────────────────────────────────────────────────
function AdminOverviewScreen()   { return <ComingSoon icon={<I.dashboard size={28}/>} phase="Phase 8" title="Admin Overview"     description="Platform-wide KPIs across all tenants."/>; }
function AdminClientsScreen()    { return <ComingSoon icon={<I.users size={28}/>}     phase="Phase 8" title="Clients"            description="All tenant accounts — usage, billing, status."/>; }
function AdminSipScreen()        { return <ComingSoon icon={<I.network size={28}/>}   phase="Phase 8" title="SIP Trunks"         description="Telephony providers, channel capacity, uptime."/>; }
function AdminAgentLibScreen()   { return <ComingSoon icon={<I.agents size={28}/>}    phase="Phase 8" title="Agent Library"      description="Global persona templates available to all clients."/>; }
function AdminBillingScreen()    { return <ComingSoon icon={<I.billing size={28}/>}   phase="Phase 8" title="Billing & Usage"    description="Revenue, MRR, and per-client usage."/>; }
function AdminComplianceScreen() { return <ComingSoon icon={<I.shield size={28}/>}    phase="Phase 8" title="Compliance Center"  description="DND, TRAI rules, calling hours enforcement."/>; }
function AdminHealthScreen()     { return <ComingSoon icon={<I.server size={28}/>}    phase="Phase 8" title="System Health"      description="AI providers, SIP trunks, queues, error rates."/>; }
function AdminAuditScreen()      { return <ComingSoon icon={<I.history size={28}/>}   phase="Phase 8" title="Audit Logs"         description="Every admin action, billing event, API call."/>; }

// Expose all globally so the Router in app.jsx can switch on them.
// CampaignsScreen, AgentsScreen, ContactsScreen are real now — assigned in
// their own files (campaigns.jsx, agents.jsx, contacts.jsx).
window.FlowBuilderScreen   = FlowBuilderScreen;
window.KnowledgeBaseScreen = KnowledgeBaseScreen;
window.CallHistoryScreen   = CallHistoryScreen;
window.AnalyticsScreen     = AnalyticsScreen;
window.IntegrationsScreen  = IntegrationsScreen;
window.PricingScreen       = PricingScreen;
window.SettingsScreen      = SettingsScreen;
window.InboxScreen         = InboxScreen;
window.WhatsAppScreen      = WhatsAppScreen;
window.MonitorScreen       = MonitorScreen;
window.AdminOverviewScreen   = AdminOverviewScreen;
window.AdminClientsScreen    = AdminClientsScreen;
window.AdminSipScreen        = AdminSipScreen;
window.AdminAgentLibScreen   = AdminAgentLibScreen;
window.AdminBillingScreen    = AdminBillingScreen;
window.AdminComplianceScreen = AdminComplianceScreen;
window.AdminHealthScreen     = AdminHealthScreen;
window.AdminAuditScreen      = AdminAuditScreen;