"use client";

import { useEffect, useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

interface Analytics {
  totalLeads: number;
  newLeads: number;
  convertedLeads: number;
  conversionRate: string;
  growth: string;
  leadsThisMonth: number;
  leadsLastMonth: number;
  leadsByStatus: Array<{ status: string; _count: { status: number } }>;
}

export default function AnalyticsPage() {
  const [data, setData] = useState<Analytics | null>(null);

  useEffect(() => {
    fetch("/api/admin/analytics")
      .then((r) => r.json())
      .then(setData)
      .catch(console.error);
  }, []);

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold">Analytics</h1>
        <p className="text-muted-foreground">Conversion statistics and traffic overview</p>
      </div>

      <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <Card>
          <CardHeader><CardTitle className="text-sm text-muted-foreground">Total Leads</CardTitle></CardHeader>
          <CardContent><p className="text-4xl font-bold">{data?.totalLeads ?? "—"}</p></CardContent>
        </Card>
        <Card>
          <CardHeader><CardTitle className="text-sm text-muted-foreground">Conversion Rate</CardTitle></CardHeader>
          <CardContent><p className="text-4xl font-bold">{data ? `${data.conversionRate}%` : "—"}</p></CardContent>
        </Card>
        <Card>
          <CardHeader><CardTitle className="text-sm text-muted-foreground">Monthly Growth</CardTitle></CardHeader>
          <CardContent>
            <p className="text-4xl font-bold">{data ? `${data.growth}%` : "—"}</p>
            <p className="text-sm text-muted-foreground mt-1">
              {data?.leadsThisMonth ?? 0} this month vs {data?.leadsLastMonth ?? 0} last month
            </p>
          </CardContent>
        </Card>
      </div>

      <Card>
        <CardHeader><CardTitle>Leads by Status</CardTitle></CardHeader>
        <CardContent>
          <div className="space-y-3">
            {data?.leadsByStatus?.map(({ status, _count }) => (
              <div key={status} className="flex items-center justify-between">
                <span className="font-medium">{status}</span>
                <div className="flex items-center gap-3 flex-1 mx-4">
                  <div className="flex-1 h-2 bg-secondary rounded-full overflow-hidden">
                    <div
                      className="h-full bg-primary rounded-full"
                      style={{
                        width: `${data.totalLeads > 0 ? (_count.status / data.totalLeads) * 100 : 0}%`,
                      }}
                    />
                  </div>
                </div>
                <span className="text-muted-foreground w-8 text-right">{_count.status}</span>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  );
}