/* ============================================================
   Bizia — Admin: Client Readiness
   Route: /app/admin/client-readiness
   ============================================================ */
(function () {
  const { useState, useEffect } = React;
  const API = window.__BIZIA_API_URL || (/^(localhost|127\.0\.0\.1|\[::1\])$/.test(location.hostname) ? 'http://localhost:4000' : '');

  const FLOW_COLOR = {
    pending_quote: 'var(--muted-2)',
    pending_approval: 'var(--warning)',
    pending_payment: 'var(--warning)',
    generating: 'var(--primary)',
    pending_preview: 'var(--primary)',
    pending_go_live: 'var(--accent-2, #7c5cfc)',
    live: 'var(--success)',
  };

  function Badge({ label, color }) {
    return React.createElement('span', {
      style: {
        fontSize: 11, fontWeight: 700, padding: '2px 8px', borderRadius: 999,
        background: 'var(--surface-3)', color: color || 'var(--text-2)',
        border: `1px solid ${color || 'var(--border)'}`,
        whiteSpace: 'nowrap',
      },
    }, label);
  }

  function ProjectRow({ proj, onMarkPaid }) {
    const [marking, setMarking] = useState(false);
    const [expanded, setExpanded] = useState(false);

    async function markPaid() {
      const token = sessionStorage.getItem('bz_token') || '';
      setMarking(true);
      try {
        const r = await fetch(`${API}/api/payment/mark-paid/${proj.id}`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
          body: JSON.stringify({ notes: 'Marked paid by admin from client readiness panel' }),
        });
        const d = await r.json();
        if (d.success) {
          window.toast && window.toast({ title: `${proj.name} marked as paid`, tone: 'success' });
          onMarkPaid && onMarkPaid(proj.id);
        } else {
          window.toast && window.toast({ title: d.error || 'Failed', tone: 'error' });
        }
      } catch {
        window.toast && window.toast({ title: 'Request failed', tone: 'error' });
      }
      setMarking(false);
    }

    const checks = proj._checklist?.checks || [];
    const failCount = checks.filter(c => c.status === 'fail').length;
    const warnCount = checks.filter(c => c.status === 'warn').length;
    const checklistStatus = proj._checklist?.status || 'not_run';
    const paymentStatus = proj._payment?.status || 'none';
    const isPaid = paymentStatus === 'paid';

    return React.createElement('div', {
      style: {
        border: '1px solid var(--border-soft)', borderRadius: 'var(--r)', marginBottom: 12,
        background: 'var(--surface)', overflow: 'hidden',
      },
    },
      // Row header
      React.createElement('div', {
        onClick: () => setExpanded(e => !e),
        style: {
          display: 'flex', alignItems: 'center', gap: 12, padding: '12px 16px',
          cursor: 'pointer', flexWrap: 'wrap',
        },
      },
        React.createElement('div', { style: { flex: 1, minWidth: 140 } },
          React.createElement('div', { style: { fontWeight: 700, fontSize: 14 } }, proj.name || proj.slug),
          React.createElement('div', { style: { fontSize: 12, color: 'var(--text-2)', marginTop: 2 } }, proj.id),
        ),
        React.createElement(Badge, {
          label: proj.clientFlowStatus || 'pending_quote',
          color: FLOW_COLOR[proj.clientFlowStatus] || 'var(--muted-2)',
        }),
        React.createElement(Badge, {
          label: `Payment: ${paymentStatus}`,
          color: isPaid ? 'var(--success)' : 'var(--muted-2)',
        }),
        React.createElement(Badge, {
          label: `Checklist: ${checklistStatus}`,
          color: checklistStatus === 'passed' ? 'var(--success)' : checklistStatus === 'failed' ? 'var(--danger)' : 'var(--muted-2)',
        }),
        React.createElement(window.Icon, { name: expanded ? 'chevronUp' : 'chevronDown', size: 16, style: { color: 'var(--muted-2)' } }),
      ),

      // Expanded detail
      expanded && React.createElement('div', { style: { padding: '0 16px 16px', borderTop: '1px solid var(--border-soft)' } },
        // Actions row
        React.createElement('div', { style: { display: 'flex', gap: 8, marginTop: 12, flexWrap: 'wrap' } },
          !isPaid && React.createElement(window.Button, {
            size: 'sm', variant: 'outline', icon: 'checkCircle',
            loading: marking, onClick: markPaid,
          }, 'Mark paid'),
          React.createElement(window.Button, {
            size: 'sm', variant: 'outline', icon: 'rocket',
            onClick: () => window.navigate(`/app/go-live/${proj.id}`),
          }, 'Go Live screen'),
          proj.productionUrl && React.createElement('a', {
            href: proj.productionUrl, target: '_blank', rel: 'noopener noreferrer',
            style: {
              display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 13,
              fontWeight: 600, color: 'var(--primary)', textDecoration: 'none',
              padding: '4px 10px', border: '1px solid var(--primary)', borderRadius: 'var(--r-sm)',
            },
          }, React.createElement(window.Icon, { name: 'externalLink', size: 13 }), 'View live'),
        ),

        // Checklist summary
        checks.length > 0 && React.createElement('div', { style: { marginTop: 14 } },
          React.createElement('div', { style: { fontSize: 12, fontWeight: 700, color: 'var(--text-2)', marginBottom: 8 } },
            `Checklist — ${failCount} fail · ${warnCount} warn`,
          ),
          checks.filter(c => c.status !== 'pass' && c.status !== 'skip').map(c =>
            React.createElement('div', { key: c.id, style: { display: 'flex', gap: 8, alignItems: 'flex-start', marginBottom: 6 } },
              React.createElement(window.Icon, {
                name: c.status === 'fail' ? 'x' : 'alertTriangle', size: 13,
                style: { color: c.status === 'fail' ? 'var(--danger)' : 'var(--warning)', marginTop: 1, flexShrink: 0 },
              }),
              React.createElement('div', { style: { fontSize: 12 } },
                React.createElement('strong', null, c.label), ': ', c.message,
              ),
            ),
          ),
          checks.every(c => c.status === 'pass' || c.status === 'skip') &&
            React.createElement('div', { style: { fontSize: 12, color: 'var(--success)', fontWeight: 600 } }, '✓ All checks passed'),
        ),
      ),
    );
  }

  function AdminClientReadinessPage() {
    const [projects, setProjects] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    const token = sessionStorage.getItem('bz_token') || '';
    const headers = { Authorization: `Bearer ${token}` };

    async function loadAll() {
      setLoading(true);
      setError(null);
      try {
        // Load projects
        const projRes = await fetch(`${API}/api/projects`, { headers });
        const projData = await projRes.json();
        if (!projData.success) throw new Error(projData.error || 'Failed to load projects');
        const projs = Array.isArray(projData.data) ? projData.data : (projData.data?.projects || []);

        // For each project, load payment status and checklist in parallel
        const enriched = await Promise.all(projs.map(async (p) => {
          try {
            const [payRes, checkRes] = await Promise.all([
              fetch(`${API}/api/payment/status/${p.id}`, { headers }),
              fetch(`${API}/api/go-live/${p.id}/checklist`, { headers }),
            ]);
            const pay = await payRes.json();
            const check = await checkRes.json();
            return {
              ...p,
              _payment: pay.success ? pay.data : null,
              _checklist: check.success ? check.data : null,
            };
          } catch {
            return { ...p, _payment: null, _checklist: null };
          }
        }));

        setProjects(enriched);
      } catch (e) {
        setError(e.message);
      } finally {
        setLoading(false);
      }
    }

    useEffect(() => { loadAll(); }, []);

    function handleMarkPaid(projectId) {
      // Optimistically refresh just that project's payment status
      setProjects(prev => prev.map(p => p.id !== projectId ? p : {
        ...p,
        _payment: { ...(p._payment || {}), status: 'paid' },
        clientFlowStatus: 'pending_go_live',
      }));
    }

    const liveCount = projects.filter(p => p.clientFlowStatus === 'live').length;
    const pendingPayCount = projects.filter(p => p.clientFlowStatus === 'pending_payment').length;

    return React.createElement('div', { style: { maxWidth: 900, margin: '0 auto', padding: '24px 16px' } },
      React.createElement(window.PageHeader, {
        title: 'Client Readiness',
        sub: 'Track payment, checklist, and go-live status for all projects.',
        action: React.createElement(window.Button, {
          variant: 'outline', icon: 'refreshCw', onClick: loadAll, loading: loading,
        }, 'Refresh'),
      }),

      // Summary strip
      React.createElement('div', {
        style: {
          display: 'flex', gap: 16, marginBottom: 20, flexWrap: 'wrap',
        },
      },
        [
          { label: 'Total projects', value: projects.length, color: 'var(--text-1)' },
          { label: 'Live', value: liveCount, color: 'var(--success)' },
          { label: 'Pending payment', value: pendingPayCount, color: 'var(--warning)' },
        ].map(({ label, value, color }) =>
          React.createElement('div', {
            key: label,
            style: {
              flex: '1 1 120px', padding: '12px 16px', borderRadius: 'var(--r)',
              border: '1px solid var(--border-soft)', background: 'var(--surface)',
              textAlign: 'center',
            },
          },
            React.createElement('div', { style: { fontSize: 24, fontWeight: 800, color } }, value),
            React.createElement('div', { style: { fontSize: 12, color: 'var(--text-2)', marginTop: 4 } }, label),
          ),
        ),
      ),

      error && React.createElement(window.Banner, { type: 'error', style: { marginBottom: 16 } }, error),

      loading && projects.length === 0
        ? React.createElement('div', { style: { color: 'var(--text-2)', textAlign: 'center', padding: 40 } }, 'Loading projects…')
        : projects.length === 0
        ? React.createElement(window.EmptyState, {
            icon: 'users', title: 'No projects yet',
            desc: 'Projects will appear here once created.',
          })
        : projects.map(p => React.createElement(ProjectRow, { key: p.id, proj: p, onMarkPaid: handleMarkPaid })),
    );
  }

  window.AdminClientReadinessPage = AdminClientReadinessPage;
})();