'use client';

import { useEffect, useState } from 'react';
import { useAuth } from '@/lib/auth-context';
import { getStats, type TrackerStats } from '@/lib/tracker-client';

const STAT_COLORS: Record<string, string> = {
  bug: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300',
  feature: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300',
  task: 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300',
  open: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300',
  in_progress: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300',
  done: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-300',
  closed: 'bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-300',
  wont_fix: 'bg-gray-100 text-gray-600 dark:bg-gray-900/30 dark:text-gray-400',
  critical: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300',
  high: 'bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300',
  medium: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300',
  low: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300',
};

function StatCard({ title, entries }: { title: string; entries: Record<string, number> }) {
  return (
    <div className="rounded-xl border border-border bg-card p-5">
      <h3 className="mb-3 text-sm font-semibold uppercase tracking-wider text-muted-foreground">
        {title}
      </h3>
      <div className="flex flex-wrap gap-2">
        {Object.entries(entries).map(([key, count]) => (
          <span
            key={key}
            className={`inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-medium ${STAT_COLORS[key] || 'bg-muted text-muted-foreground'}`}
          >
            {key.replace(/_/g, ' ')}
            <span className="font-bold">{count}</span>
          </span>
        ))}
      </div>
    </div>
  );
}

export default function DashboardOverview() {
  const { token } = useAuth();
  const [stats, setStats] = useState<TrackerStats | null>(null);
  const [error, setError] = useState('');

  useEffect(() => {
    if (!token) return;
    getStats()
      .then(setStats)
      .catch(err => setError(err.message));
  }, [token]);

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold tracking-tight">Dashboard</h1>
        <p className="text-sm text-muted-foreground">Overview of all tracked items</p>
      </div>

      {error && (
        <div className="rounded-md bg-destructive/10 px-4 py-3 text-sm text-destructive">
          {error}
        </div>
      )}

      {stats ? (
        <div className="space-y-4">
          {/* Total count */}
          <div className="rounded-xl border border-border bg-card p-6">
            <div className="text-4xl font-bold">{stats.total}</div>
            <div className="text-sm text-muted-foreground">Total items for {stats.productId}</div>
          </div>

          {/* Breakdown cards */}
          <div className="grid gap-4 md:grid-cols-3">
            <StatCard title="By Type" entries={stats.byType} />
            <StatCard title="By Status" entries={stats.byStatus} />
            <StatCard title="By Priority" entries={stats.byPriority} />
          </div>
        </div>
      ) : !error ? (
        <div className="text-muted-foreground">Loading stats...</div>
      ) : null}
    </div>
  );
}
