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

const API = '/admin/api';
const TOKEN_KEY = 'lt_admin_token';

// ── Helpers ──────────────────────────────────────────────────────────────────

function fmtSec(s) {
  if (s == null) return '—';
  const total = Math.max(0, Math.round(s));
  const m = Math.floor(total / 60);
  const sec = total % 60;
  return `${m}:${String(sec).padStart(2, '0')}`;
}

function relDate(str) {
  if (!str) return '—';
  const diff = (Date.now() - new Date(str).getTime()) / 1000;
  if (diff < 60)    return 'just now';
  if (diff < 3600)  return `${Math.floor(diff / 60)}m ago`;
  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
  return `${Math.floor(diff / 86400)}d ago`;
}

function fmtDate(str) {
  if (!str) return '—';
  return new Date(str).toLocaleString();
}

function balClass(s) {
  if (s <= 0)  return 'bal-zero';
  if (s < 60)  return 'bal-low';
  return 'bal-ok';
}

// ── Logo SVG ─────────────────────────────────────────────────────────────────

// App icon: teal gradient tile with white mark (matches favicon.svg)
const AppIcon = ({ size = 32 }) => (
  <svg width={size} height={size} viewBox="0 0 48 48" fill="none">
    <defs>
      <linearGradient id="lg-app" x1="0" y1="0" x2="48" y2="48" gradientUnits="userSpaceOnUse">
        <stop stopColor="#46c8e0"/><stop offset="1" stopColor="#1aa7c4"/>
      </linearGradient>
    </defs>
    <rect width="48" height="48" rx="12" fill="url(#lg-app)"/>
    <circle cx="24" cy="24" r="15" stroke="white" strokeWidth="4"/>
    <g stroke="white" strokeWidth="3" strokeLinecap="round">
      <line x1="17.5" y1="21" x2="17.5" y2="27"/>
      <line x1="24"   y1="16" x2="24"   y2="32"/>
      <line x1="30.5" y1="19" x2="30.5" y2="29"/>
    </g>
  </svg>
);

// Admin icon: dark tile with teal mark + amber "ADMIN" badge — clearly distinct from the app icon
const Logo = ({ size = 32 }) => (
  <div style={{ position: 'relative', width: size, height: size, flexShrink: 0 }}>
    <svg width={size} height={size} viewBox="0 0 48 48" fill="none">
      <defs>
        <linearGradient id="lg-admin" x1="8" y1="8" x2="40" y2="40" gradientUnits="userSpaceOnUse">
          <stop stopColor="#46c8e0"/><stop offset="1" stopColor="#1aa7c4"/>
        </linearGradient>
      </defs>
      {/* Dark tile — distinguishes it from the teal app icon */}
      <rect width="48" height="48" rx="12" fill="#16161c"/>
      <rect x="1" y="1" width="46" height="46" rx="11" stroke="rgba(255,255,255,0.1)" strokeWidth="1"/>
      <circle cx="24" cy="24" r="15" stroke="url(#lg-admin)" strokeWidth="4"/>
      <g stroke="url(#lg-admin)" strokeWidth="3" strokeLinecap="round">
        <line x1="17.5" y1="21" x2="17.5" y2="27"/>
        <line x1="24"   y1="16" x2="24"   y2="32"/>
        <line x1="30.5" y1="19" x2="30.5" y2="29"/>
      </g>
    </svg>
    {/* Amber ADMIN badge — overlaid bottom-right */}
    <span style={{
      position: 'absolute', bottom: -5, right: -6,
      background: '#ffb020', color: '#0c0c10',
      fontSize: 7, fontWeight: 800, letterSpacing: '0.04em',
      padding: '1px 4px', borderRadius: 3, lineHeight: 1.5,
      pointerEvents: 'none',
    }}>ADMIN</span>
  </div>
);

// ── API fetch wrapper ─────────────────────────────────────────────────────────

async function apiFetch(path, options = {}) {
  const token = localStorage.getItem(TOKEN_KEY);
  const res = await fetch(API + path, {
    ...options,
    headers: {
      'Content-Type': 'application/json',
      ...(token ? { Authorization: `Bearer ${token}` } : {}),
      ...(options.headers || {}),
    },
  });
  if (res.status === 401) {
    localStorage.removeItem(TOKEN_KEY);
    window.location.reload();
  }
  return res;
}

// ── Login view ────────────────────────────────────────────────────────────────

function LoginView({ onLogin }) {
  const [password, setPassword] = useState('');
  const [error, setError]       = useState('');
  const [loading, setLoading]   = useState(false);

  async function submit(e) {
    e.preventDefault();
    setError('');
    setLoading(true);
    try {
      const res = await fetch(API + '/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ password }),
      });
      const data = await res.json();
      if (!res.ok) { setError(data.error || 'Login failed'); return; }
      localStorage.setItem(TOKEN_KEY, data.token);
      onLogin();
    } catch {
      setError('Network error');
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="login-wrap">
      <div className="login-card">
        <div className="login-logo"><Logo/></div>
        <div style={{ textAlign: 'center', marginBottom: 28 }}>
          <div style={{ fontWeight: 700, fontSize: 20, marginBottom: 4 }}>Looptradie Admin</div>
          <div style={{ color: 'var(--mute)', fontSize: 13 }}>Sign in to manage tenants</div>
        </div>
        <form onSubmit={submit}>
          <div className="field">
            <label>Password</label>
            <input type="password" value={password} onChange={e => setPassword(e.target.value)} autoFocus placeholder="Enter admin password"/>
          </div>
          {error && <div className="error-msg">{error}</div>}
          <button className="btn-primary" type="submit" disabled={loading} style={{ width: '100%', marginTop: 8, padding: '11px' }}>
            {loading ? '…' : 'Sign in'}
          </button>
        </form>
      </div>
    </div>
  );
}

// ── Add-time inline form ──────────────────────────────────────────────────────

function AddTimeForm({ tenantId, onDone }) {
  const [val, setVal]     = useState('');
  const [busy, setBusy]   = useState(false);
  const [err, setErr]     = useState('');

  async function submit(e) {
    e.preventDefault();
    const secs = parseInt(val, 10);
    if (!secs || isNaN(secs)) { setErr('Enter a number'); return; }
    setBusy(true); setErr('');
    try {
      const res = await apiFetch(`/tenants/${tenantId}/balance`, {
        method: 'PATCH',
        body: JSON.stringify({ add_seconds: secs }),
      });
      const data = await res.json();
      if (!res.ok) { setErr(data.error || 'Failed'); setBusy(false); return; }
      onDone(data);
    } catch { setErr('Network error'); setBusy(false); }
  }

  return (
    <form className="add-time-row" onSubmit={submit}>
      <input type="number" value={val} onChange={e => setVal(e.target.value)} placeholder="seconds" min="-99999" max="999999"/>
      <button className="btn-primary btn-sm" type="submit" disabled={busy}>{busy ? '…' : '✓'}</button>
      <button className="btn-ghost btn-sm" type="button" onClick={() => onDone(null)}>✕</button>
      {err && <span style={{ color: 'var(--danger)', fontSize: 11 }}>{err}</span>}
    </form>
  );
}

// ── Dashboard view ────────────────────────────────────────────────────────────

function DashboardView({ onViewCalls }) {
  const [tenants, setTenants]     = useState(null);
  const [error, setError]         = useState('');
  const [addingId, setAddingId]   = useState(null);

  const load = useCallback(async () => {
    setError('');
    try {
      const res = await apiFetch('/tenants');
      if (!res.ok) { setError('Failed to load tenants'); return; }
      setTenants(await res.json());
    } catch { setError('Network error'); }
  }, []);

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

  function handleAddDone(updated, tenantId) {
    setAddingId(null);
    if (updated) {
      setTenants(prev => prev.map(t => t.tenant_id === tenantId ? { ...t, ...updated } : t));
    }
  }

  if (!tenants && !error) return <div style={{ padding: 40, color: 'var(--mute)', textAlign: 'center' }}>Loading…</div>;
  if (error) return <div style={{ padding: 40, color: 'var(--danger)' }}>{error} <button className="btn-ghost btn-sm" onClick={load} style={{ marginLeft: 8 }}>Retry</button></div>;

  const validTenants = (tenants || []).filter(t => t && t.tenant_id);
  const totalTenants = validTenants.length;
  const trialCount   = validTenants.filter(t => t.is_trial).length;
  const zeroBalance  = validTenants.filter(t => t.seconds_balance <= 0).length;
  const totalCalls   = validTenants.reduce((s, t) => s + (t.call_count || 0), 0);

  return (
    <div>
      <div className="stats">
        <div className="stat-card">
          <div className="stat-val">{totalTenants}</div>
          <div className="stat-lbl">Total accounts</div>
        </div>
        <div className="stat-card">
          <div className="stat-val" style={{ color: 'var(--warn)' }}>{trialCount}</div>
          <div className="stat-lbl">On trial</div>
        </div>
        <div className="stat-card">
          <div className="stat-val" style={{ color: 'var(--danger)' }}>{zeroBalance}</div>
          <div className="stat-lbl">Zero balance</div>
        </div>
        <div className="stat-card">
          <div className="stat-val" style={{ color: 'var(--accent2)' }}>{totalCalls}</div>
          <div className="stat-lbl">Total calls</div>
        </div>
      </div>

      <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
        <div className="table-wrap">
          <table>
            <thead>
              <tr>
                <th>Company</th>
                <th>Balance</th>
                <th>Used / Plan</th>
                <th>Status</th>
                <th>Calls</th>
                <th>Last call</th>
                <th>Since</th>
                <th style={{ width: 220 }}>Actions</th>
              </tr>
            </thead>
            <tbody>
              {validTenants.map(t => (
                <tr key={t.tenant_id}>
                  <td>
                    <div style={{ fontWeight: 600 }}>{t.tenant_name || <span style={{ color: 'var(--mute)' }}>—</span>}</div>
                    <div className="mono">{(t.tenant_id || '').slice(0, 12)}…</div>
                  </td>
                  <td>
                    <span className={balClass(t.seconds_balance)}>{fmtSec(t.seconds_balance)}</span>
                  </td>
                  <td>
                    <span className="mono">{fmtSec(t.seconds_used_total)} / {fmtSec(t.plan_seconds)}</span>
                  </td>
                  <td>
                    <span className={t.is_trial ? 'badge badge-trial' : 'badge badge-paid'}>
                      {t.is_trial ? 'Trial' : 'Paid'}
                    </span>
                  </td>
                  <td style={{ textAlign: 'center' }}>{t.call_count || 0}</td>
                  <td style={{ color: 'var(--mute)', fontSize: 12 }}>{relDate(t.last_call)}</td>
                  <td style={{ color: 'var(--mute)', fontSize: 12 }}>{relDate(t.created_at)}</td>
                  <td>
                    {addingId === t.tenant_id ? (
                      <AddTimeForm tenantId={t.tenant_id} onDone={updated => handleAddDone(updated, t.tenant_id)}/>
                    ) : (
                      <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                        <button className="btn-ghost btn-sm" onClick={() => setAddingId(t.tenant_id)}>+ Time</button>
                        <button className="btn-ghost btn-sm" onClick={() => onViewCalls(t)}>Calls ›</button>
                      </div>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

// ── Call history view ─────────────────────────────────────────────────────────

function CallsView({ tenant, onBack }) {
  const [calls, setCalls] = useState(null);
  const [error, setError] = useState('');

  useEffect(() => {
    apiFetch(`/tenants/${tenant.tenant_id}/calls`)
      .then(r => r.json())
      .then(setCalls)
      .catch(() => setError('Network error'));
  }, [tenant.tenant_id]);

  return (
    <div>
      <div className="section-header">
        <button className="btn-ghost btn-sm" onClick={onBack}>← Back</button>
        <h2>{tenant.tenant_name || tenant.tenant_id}</h2>
        <span className={tenant.is_trial ? 'badge badge-trial' : 'badge badge-paid'}>
          {tenant.is_trial ? 'Trial' : 'Paid'}
        </span>
        <span style={{ color: 'var(--mute)', fontSize: 13 }}>
          Balance: <span className={balClass(tenant.seconds_balance)}>{fmtSec(tenant.seconds_balance)}</span>
        </span>
      </div>

      {error && <div style={{ color: 'var(--danger)', padding: 20 }}>{error}</div>}
      {!calls && !error && <div style={{ color: 'var(--mute)', padding: 20 }}>Loading…</div>}
      {calls && (
        calls.length === 0
          ? <div className="card" style={{ color: 'var(--mute)', textAlign: 'center', padding: 40 }}>No calls recorded yet.</div>
          : (
            <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
              <div className="table-wrap">
                <table>
                  <thead>
                    <tr>
                      <th>#</th>
                      <th>Date</th>
                      <th>Duration</th>
                      <th>Charged</th>
                      <th>Room</th>
                    </tr>
                  </thead>
                  <tbody>
                    {calls.map((c, i) => (
                      <tr key={c.id}>
                        <td style={{ color: 'var(--mute)', fontSize: 12 }}>{calls.length - i}</td>
                        <td style={{ fontSize: 12, color: 'var(--mute)' }}>{fmtDate(c.call_date)}</td>
                        <td><span className="mono">{fmtSec(c.duration_seconds)}</span></td>
                        <td><span className="mono">{fmtSec(c.seconds_charged)}</span></td>
                        <td><span className="mono" style={{ fontSize: 11 }}>{(c.room_name || '—').slice(0, 30)}</span></td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          )
      )}
    </div>
  );
}

// ── App root ──────────────────────────────────────────────────────────────────

function App() {
  const [view, setView]           = useState('loading');
  const [selectedTenant, setSelected] = useState(null);

  useEffect(() => {
    const token = localStorage.getItem(TOKEN_KEY);
    setView(token ? 'dashboard' : 'login');
  }, []);

  function signOut() {
    localStorage.removeItem(TOKEN_KEY);
    setView('login');
  }

  function viewCalls(tenant) {
    setSelected(tenant);
    setView('calls');
  }

  if (view === 'loading') return null;
  if (view === 'login')   return <LoginView onLogin={() => setView('dashboard')}/>;

  return (
    <div className="page">
      <div className="topbar">
        <div className="logo">
          <Logo/>
          <span>Looptradie <span style={{ color: 'var(--mute)', fontWeight: 400 }}>Admin</span></span>
        </div>
        <button className="btn-ghost btn-sm" onClick={signOut}>Sign out</button>
      </div>

      {view === 'dashboard' && <DashboardView onViewCalls={viewCalls}/>}
      {view === 'calls' && selectedTenant && <CallsView tenant={selectedTenant} onBack={() => setView('dashboard')}/>}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);