wulf-pulse/app/mobile/dashboard/page.tsx

'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';
import { RefreshCw, AlertCircle, Clock, CheckCircle2, ChevronRight } from 'lucide-react';

interface DashboardData {
  open_total: number;
  by_status: { status: number; label: string; count: number }[];
  by_queue: { queue_id: number; label: string; count: number }[];
  by_priority: { priority: number; label: string; count: number }[];
  recent: {
    id: number; ticket_number: string; title: string; status: number; priority: number;
    last_activity_date: string; company_name: string; queue_label: string; assigned_to: string;
  }[];
  sla: { response_met: number; response_total: number; resolution_met: number; resolution_total: number };
}

const PRIORITY_COLOR: Record<number, string> = {
  1: 'bg-slate-300',   // Standard
  2: 'bg-slate-300',   // Medium
  3: 'bg-slate-300',   // Standard
  4: 'bg-red-500',     // Critical
  6: 'bg-orange-400',  // High
  7: 'bg-purple-500',  // Security Event
  8: 'bg-yellow-400',  // Minor Service
  9: 'bg-orange-500',  // Major Service
  10: 'bg-blue-400',   // Installation
  11: 'bg-pink-400',   // Fast Track
};
const PRIORITY_TEXT: Record<number, string> = {
  1: 'text-slate-500',   // Standard
  2: 'text-slate-500',   // Medium
  3: 'text-slate-500',   // Standard
  4: 'text-red-600',     // Critical
  6: 'text-orange-500',  // High
  7: 'text-purple-600',  // Security Event
  8: 'text-yellow-600',  // Minor Service
  9: 'text-orange-600',  // Major Service
  10: 'text-blue-600',   // Installation
  11: 'text-pink-600',   // Fast Track
};

function pct(n: number, d: number) {
  return d === 0 ? 0 : Math.round((n / d) * 100);
}
function relTime(ts: string) {
  const diff = Date.now() - new Date(ts).getTime();
  const m = Math.floor(diff / 60000);
  if (m < 60) return `${m}m ago`;
  const h = Math.floor(m / 60);
  if (h < 24) return `${h}h ago`;
  return `${Math.floor(h / 24)}d ago`;
}

export default function MobileDashboard() {
  const [data, setData] = useState<DashboardData | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const load = async () => {
    setLoading(true); setError(null);
    try {
      const r = await fetch('/api/mobile/dashboard');
      if (!r.ok) throw new Error('Failed to load');
      setData(await r.json());
    } catch (e) { setError(String(e)); }
    finally { setLoading(false); }
  };

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

  if (loading) return (
    <div className="flex items-center justify-center h-64">
      <RefreshCw className="w-6 h-6 animate-spin text-muted-foreground" />
    </div>
  );
  if (error) return (
    <div className="p-4 text-sm text-destructive">{error}</div>
  );
  if (!data) return null;

  const respPct = pct(data.sla.response_met, data.sla.response_total);
  const resPct  = pct(data.sla.resolution_met, data.sla.resolution_total);

  return (
    <div className="p-4 space-y-5">
      {/* Header */}
      <div className="flex items-center justify-between">
        <h1 className="text-xl font-bold">Ticket Dashboard</h1>
        <button onClick={load} className="p-2 rounded-full hover:bg-accent">
          <RefreshCw className="w-4 h-4" />
        </button>
      </div>

      {/* Open total */}
      <div className="rounded-2xl border bg-primary/5 p-5 flex items-center gap-4">
        <div className="rounded-xl bg-primary/10 p-3">
          <AlertCircle className="w-7 h-7 text-primary" />
        </div>
        <div>
          <p className="text-4xl font-bold">{data.open_total}</p>
          <p className="text-sm text-muted-foreground">Open tickets</p>
        </div>
      </div>

      {/* Priority breakdown */}
      <div>
        <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">By Priority</p>
        <div className="grid grid-cols-4 gap-2">
          {data.by_priority.map(p => (
            <div key={p.priority} className="rounded-xl border p-3 text-center">
              <div className={`w-2 h-2 rounded-full mx-auto mb-1.5 ${PRIORITY_COLOR[p.priority] ?? 'bg-slate-400'}`} />
              <p className={`text-xl font-bold ${PRIORITY_TEXT[p.priority] ?? ''}`}>{p.count}</p>
              <p className="text-[10px] text-muted-foreground mt-0.5">{p.label}</p>
            </div>
          ))}
        </div>
      </div>

      {/* SLA */}
      <div>
        <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">SLA — last 30 days</p>
        <div className="grid grid-cols-2 gap-3">
          {[
            { label: 'First Response (≤1h)', met: data.sla.response_met, total: data.sla.response_total, p: respPct },
            { label: 'Resolution (≤24h)',    met: data.sla.resolution_met, total: data.sla.resolution_total, p: resPct },
          ].map(s => (
            <div key={s.label} className="rounded-xl border p-4">
              <p className={`text-2xl font-bold ${s.p >= 80 ? 'text-green-600' : s.p >= 60 ? 'text-yellow-600' : 'text-red-600'}`}>
                {s.p}%
              </p>
              <p className="text-xs text-muted-foreground mt-0.5">{s.label}</p>
              <p className="text-[10px] text-muted-foreground">{s.met} / {s.total}</p>
              <div className="mt-2 h-1.5 rounded-full bg-muted overflow-hidden">
                <div className={`h-full rounded-full ${s.p >= 80 ? 'bg-green-500' : s.p >= 60 ? 'bg-yellow-400' : 'bg-red-500'}`}
                  style={{ width: `${s.p}%` }} />
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* By queue */}
      <div>
        <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">By Queue</p>
        <div className="rounded-xl border divide-y overflow-hidden">
          {data.by_queue.map(q => (
            <div key={q.queue_id} className="flex items-center px-4 py-3 gap-3">
              <p className="flex-1 text-sm font-medium">{q.label}</p>
              <div className="flex items-center gap-2">
                <div className="w-24 h-1.5 rounded-full bg-muted overflow-hidden">
                  <div className="h-full rounded-full bg-primary"
                    style={{ width: `${pct(q.count, data.open_total)}%` }} />
                </div>
                <span className="text-sm font-bold w-8 text-right">{q.count}</span>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Recent activity */}
      <div>
        <div className="flex items-center justify-between mb-2">
          <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Recent Activity</p>
          <Link href="/mobile/tickets" className="text-xs text-primary">View all</Link>
        </div>
        <div className="rounded-xl border divide-y overflow-hidden">
          {data.recent.map(t => (
            <Link key={t.id} href={`/mobile/tickets/${t.id}`}
              className="flex items-start gap-3 px-4 py-3 hover:bg-accent transition-colors">
              <div className={`mt-1 w-2 h-2 rounded-full shrink-0 ${PRIORITY_COLOR[t.priority] ?? 'bg-slate-400'}`} />
              <div className="flex-1 min-w-0">
                <p className="text-sm font-medium truncate">{t.title}</p>
                <p className="text-xs text-muted-foreground">{t.company_name} · {t.queue_label ?? '—'}</p>
              </div>
              <div className="text-right shrink-0">
                <div className="flex items-center gap-1 text-xs text-muted-foreground">
                  <Clock className="w-3 h-3" />
                  {t.last_activity_date ? relTime(t.last_activity_date) : '—'}
                </div>
                <ChevronRight className="w-4 h-4 text-muted-foreground ml-auto mt-1" />
              </div>
            </Link>
          ))}
        </div>
      </div>
    </div>
  );
}