"use client";

import { useState, useEffect, useCallback } from "react";
import { motion } from "framer-motion";
import { RefreshCw, Loader2, XCircle, TrendingUp, Car, Tag, BarChart3 } from "lucide-react";
import { fetchLeadAnalytics } from "@/lib/api";
import type { LeadAnalytics } from "@/lib/types";
import { cn } from "@/lib/utils";

// ── SVG Line Chart ────────────────────────────────────────────────────────────

function LineChart({
  data,
}: {
  data: { date: string; leads: number; clicks: number }[];
}) {
  if (!data || data.length < 2) {
    return (
      <div className="flex items-center justify-center h-40 text-sm text-gray-400">
        Not enough data to display chart
      </div>
    );
  }

  const W = 600;
  const H = 200;
  const PAD = 40;

  const maxVal = Math.max(...data.map((d) => Math.max(d.leads, d.clicks)), 1);

  const xScale = (i: number) =>
    PAD + (i / (data.length - 1)) * (W - PAD * 2);
  const yScale = (v: number) =>
    H - PAD - (v / maxVal) * (H - PAD * 2);

  const leadsPath = data
    .map((d, i) => `${i === 0 ? "M" : "L"}${xScale(i).toFixed(1)},${yScale(d.leads).toFixed(1)}`)
    .join(" ");
  const clicksPath = data
    .map((d, i) => `${i === 0 ? "M" : "L"}${xScale(i).toFixed(1)},${yScale(d.clicks).toFixed(1)}`)
    .join(" ");

  // Y-axis labels (0, half, max)
  const yLabels = [0, Math.round(maxVal / 2), maxVal];

  // X-axis labels every 5 days
  const xLabels = data
    .map((d, i) => ({ i, label: d.date }))
    .filter((_, i) => i % 5 === 0 || i === data.length - 1);

  return (
    <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-auto max-w-full" aria-label="Leads and clicks over time" preserveAspectRatio="xMidYMid meet">
      {/* Grid lines */}
      {yLabels.map((v) => (
        <line
          key={v}
          x1={PAD}
          y1={yScale(v)}
          x2={W - PAD}
          y2={yScale(v)}
          stroke="#f3f4f6"
          strokeWidth="1"
        />
      ))}

      {/* Y-axis labels */}
      {yLabels.map((v) => (
        <text
          key={v}
          x={PAD - 6}
          y={yScale(v) + 4}
          textAnchor="end"
          fontSize="10"
          fill="#9ca3af"
        >
          {v}
        </text>
      ))}

      {/* X-axis labels */}
      {xLabels.map(({ i, label }) => (
        <text
          key={i}
          x={xScale(i)}
          y={H - 6}
          textAnchor="middle"
          fontSize="9"
          fill="#9ca3af"
        >
          {label.slice(5)} {/* MM-DD */}
        </text>
      ))}

      {/* Clicks line (dashed, lighter) */}
      <path
        d={clicksPath}
        fill="none"
        stroke="#d1d5db"
        strokeWidth="2"
        strokeDasharray="4 3"
      />

      {/* Leads line */}
      <path
        d={leadsPath}
        fill="none"
        stroke="#3b82f6"
        strokeWidth="2.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />

      {/* Data points for leads */}
      {data.map((d, i) => (
        <circle
          key={i}
          cx={xScale(i)}
          cy={yScale(d.leads)}
          r="3"
          fill="#3b82f6"
          stroke="white"
          strokeWidth="1.5"
        />
      ))}
    </svg>
  );
}

// ── Horizontal Bar Chart ──────────────────────────────────────────────────────

function HBarChart({
  items,
  colorClass = "bg-blue-500",
  valueKey = "count",
  labelKey = "label",
}: {
  items: Record<string, unknown>[];
  colorClass?: string;
  valueKey?: string;
  labelKey?: string;
}) {
  if (!items || items.length === 0) {
    return <p className="text-sm text-gray-400 py-4">No data available</p>;
  }
  const maxVal = Math.max(...items.map((d) => Number(d[valueKey]) || 0), 1);
  return (
    <div className="space-y-3 min-w-0">
      {items.slice(0, 15).map((item, i) => {
        const value = Number(item[valueKey]) || 0;
        const label = String(item[labelKey] ?? "—");
        const pct = (value / maxVal) * 100;
        return (
          <div key={i} className="flex items-center gap-2 sm:gap-3 min-w-0">
            <span className="text-sm text-gray-700 font-semibold w-20 sm:w-36 shrink-0 truncate" title={label}>
              {label}
            </span>
            <div className="flex-1 min-w-0 h-3 bg-gray-100 rounded-full overflow-hidden">
              <motion.div
                initial={{ width: 0 }}
                animate={{ width: `${pct}%` }}
                transition={{ duration: 0.6, ease: "easeOut", delay: i * 0.03 }}
                className={cn("h-full rounded-full", colorClass)}
              />
            </div>
            <span className="text-sm font-black text-gray-800 w-8 text-right shrink-0 tabular-nums">{value}</span>
          </div>
        );
      })}
    </div>
  );
}

// ── Main Page ─────────────────────────────────────────────────────────────────

export default function AdminAnalyticsPage() {
  const [analytics, setAnalytics] = useState<LeadAnalytics | null>(null);
  const [loading,   setLoading]   = useState(true);
  const [error,     setError]     = useState<string | null>(null);

  const loadData = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const data = await fetchLeadAnalytics();
      setAnalytics(data);
    } catch (e: unknown) {
      setError(e instanceof Error ? e.message : "Failed to load analytics");
    } finally {
      setLoading(false);
    }
  }, []);

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

  return (
    <div className="max-w-[1280px] mx-auto px-4 sm:px-6 pt-[calc(2rem+env(safe-area-inset-top,0px))] pb-[calc(2rem+env(safe-area-inset-bottom,0px))] space-y-8 min-w-0 overflow-x-hidden">
      {/* Header */}
      <div className="flex items-center justify-between flex-wrap gap-4 min-w-0">
        <div className="min-w-0 flex-1 basis-[min(100%,12rem)]">
          <h1 className="text-2xl font-black text-gray-900 break-words">Analytics</h1>
          <p className="text-sm text-gray-500 mt-1 break-words">Trends, brands & top performing cars</p>
        </div>
        <button
          onClick={loadData}
          disabled={loading}
          className="inline-flex items-center justify-center gap-2 min-h-11 px-4 py-2.5 rounded-2xl border border-gray-200 bg-white text-sm font-semibold text-gray-700 hover:border-blue-200 transition-all"
        >
          <RefreshCw className={cn("w-4 h-4", loading && "animate-spin")} />
          Refresh
        </button>
      </div>

      {error && (
        <div className="rounded-2xl bg-red-50 border border-red-200 p-4 flex items-start gap-3 text-sm text-red-700 min-w-0">
          <XCircle className="w-5 h-5 shrink-0 mt-0.5" />
          <span className="min-w-0 break-words">{error}</span>
        </div>
      )}

      {loading && !analytics && (
        <div className="flex items-center justify-center py-24">
          <Loader2 className="w-8 h-8 animate-spin text-blue-500" />
        </div>
      )}

      {analytics && (
        <>
          {/* Leads by Day — line chart */}
          <section className="min-w-0">
            <div className="flex items-center gap-3 mb-4 min-w-0">
              <div className="w-9 h-9 rounded-2xl bg-blue-100 flex items-center justify-center shrink-0">
                <TrendingUp className="w-5 h-5 text-blue-600" />
              </div>
              <div className="min-w-0">
                <h2 className="text-base font-black text-gray-900">Leads by Day</h2>
                <p className="text-xs text-gray-400">Last 30 days</p>
              </div>
            </div>
            <div className="rounded-[24px] bg-white border border-gray-200/60 p-4 sm:p-6 shadow-[0_4px_20px_rgba(0,0,0,0.05)] min-w-0">
              <div className="flex flex-wrap items-center gap-x-6 gap-y-2 mb-4 text-xs font-semibold">
                <div className="flex items-center gap-2">
                  <div className="w-4 h-2 rounded-full bg-blue-500" />
                  <span className="text-gray-600">Leads</span>
                </div>
                <div className="flex items-center gap-2">
                  <div className="w-4 h-[2px] bg-gray-300 border-t-2 border-dashed" />
                  <span className="text-gray-400">Clicks</span>
                </div>
              </div>
              <div className="min-w-0 w-full overflow-hidden">
                <LineChart data={analytics.byDay} />
              </div>
            </div>
          </section>

          {/* Two-column: brands + models */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 min-w-0">
            {/* By Brand */}
            <section className="min-w-0">
              <div className="flex items-center gap-3 mb-4 min-w-0">
                <div className="w-9 h-9 rounded-2xl bg-violet-100 flex items-center justify-center shrink-0">
                  <Tag className="w-5 h-5 text-violet-600" />
                </div>
                <div className="min-w-0">
                  <h2 className="text-base font-black text-gray-900">Leads by Brand</h2>
                  <p className="text-xs text-gray-400">Top brands by enquiry count</p>
                </div>
              </div>
              <div className="rounded-[24px] bg-white border border-gray-200/60 p-4 sm:p-6 shadow-[0_4px_20px_rgba(0,0,0,0.05)] min-w-0">
                <HBarChart
                  items={analytics.byBrand.map((b) => ({ label: b.brand, count: b.count }))}
                  colorClass="bg-violet-500"
                  valueKey="count"
                  labelKey="label"
                />
              </div>
            </section>

            {/* By Model */}
            <section className="min-w-0">
              <div className="flex items-center gap-3 mb-4 min-w-0">
                <div className="w-9 h-9 rounded-2xl bg-emerald-100 flex items-center justify-center shrink-0">
                  <Car className="w-5 h-5 text-emerald-600" />
                </div>
                <div className="min-w-0">
                  <h2 className="text-base font-black text-gray-900">Top Car Models</h2>
                  <p className="text-xs text-gray-400">Most enquired models</p>
                </div>
              </div>
              <div className="rounded-[24px] bg-white border border-gray-200/60 p-4 sm:p-6 shadow-[0_4px_20px_rgba(0,0,0,0.05)] min-w-0">
                <HBarChart
                  items={analytics.byModel.map((m) => ({ label: m.model, count: m.count }))}
                  colorClass="bg-emerald-500"
                  valueKey="count"
                  labelKey="label"
                />
              </div>
            </section>
          </div>

          {/* Top Cars by Interest */}
          <section className="min-w-0">
            <div className="flex items-center gap-3 mb-4 min-w-0">
              <div className="w-9 h-9 rounded-2xl bg-amber-100 flex items-center justify-center shrink-0">
                <BarChart3 className="w-5 h-5 text-amber-600" />
              </div>
              <div className="min-w-0">
                <h2 className="text-base font-black text-gray-900">Top Cars by Interest</h2>
                <p className="text-xs text-gray-400">Clicks, leads & conversion rate per car</p>
              </div>
            </div>
            <div className="rounded-[24px] bg-white border border-gray-200/60 shadow-[0_4px_20px_rgba(0,0,0,0.05)] overflow-hidden min-w-0">
              {analytics.topCars && analytics.topCars.length > 0 ? (
                <div className="overflow-x-auto">
                  <table className="w-full min-w-[560px]">
                    <thead className="bg-gradient-to-r from-gray-50 to-blue-50 border-b border-gray-100">
                      <tr>
                        {["#", "Car", "Clicks", "Leads", "Conversion Rate"].map((h) => (
                          <th
                            key={h}
                            className={cn(
                              "px-4 sm:px-5 py-4 text-xs uppercase tracking-wider text-gray-500 font-black",
                              h === "#" ? "text-center w-12" : "text-left"
                            )}
                          >
                            {h}
                          </th>
                        ))}
                      </tr>
                    </thead>
                    <tbody>
                      {analytics.topCars.map((car, i) => {
                        const convRate =
                          car.clicks > 0
                            ? ((car.leads / car.clicks) * 100).toFixed(1)
                            : "0.0";
                        return (
                          <tr
                            key={car.carId}
                            className="border-b border-gray-100 hover:bg-blue-50/30 transition-colors"
                          >
                            <td className="px-4 sm:px-5 py-4 text-center text-sm font-black text-gray-400">{i + 1}</td>
                            <td className="px-4 sm:px-5 py-4 min-w-0 max-w-[220px]">
                              <p className="text-sm font-bold text-gray-800 truncate" title={car.carName}>{car.carName}</p>
                              <p className="text-xs text-gray-400 font-mono truncate" title={car.carId}>{car.carId}</p>
                            </td>
                            <td className="px-4 sm:px-5 py-4">
                              <span className="inline-flex items-center px-3 py-1 rounded-2xl bg-blue-50 border border-blue-100 text-sm font-black text-blue-700">
                                {car.clicks.toLocaleString()}
                              </span>
                            </td>
                            <td className="px-4 sm:px-5 py-4">
                              <span className="inline-flex items-center px-3 py-1 rounded-2xl bg-green-50 border border-green-100 text-sm font-black text-green-700">
                                {car.leads.toLocaleString()}
                              </span>
                            </td>
                            <td className="px-4 sm:px-5 py-4">
                              <div className="flex items-center gap-2 min-w-0">
                                <div className="flex-1 h-2 bg-gray-100 rounded-full overflow-hidden max-w-[80px]">
                                  <div
                                    className="h-full bg-gradient-to-r from-amber-400 to-orange-500 rounded-full transition-all"
                                    style={{ width: `${Math.min(parseFloat(convRate), 100)}%` }}
                                  />
                                </div>
                                <span className="text-sm font-black text-gray-800 shrink-0">{convRate}%</span>
                              </div>
                            </td>
                          </tr>
                        );
                      })}
                    </tbody>
                  </table>
                </div>
              ) : (
                <div className="flex flex-col items-center justify-center py-16 px-4 text-center">
                  <BarChart3 className="w-10 h-10 text-gray-300 mb-3" />
                  <p className="text-sm font-bold text-gray-500">No car interest data yet</p>
                  <p className="text-xs text-gray-400 mt-1 break-words">Data appears after customers interact with car listings.</p>
                </div>
              )}
            </div>
          </section>
        </>
      )}
    </div>
  );
}