"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { transporterApi } from "@/lib/api/transporter";
import { useToken } from "@/lib/auth/useToken";
import type { ApiTransporterDashboard } from "@/lib/api/types";
import { Truck, FileText, Wallet, Clock, IndianRupee, Inbox, CheckCircle2 } from "lucide-react";
import Loader from "@/components/ui/Loader";

function StatCard({ label, value, icon: Icon, tone }: { label: string; value: string | number; icon: React.ElementType; tone: string }) {
  return (
    <div className="rounded-xl bg-white p-5 shadow-sm ring-1 ring-gray-100">
      <div className="flex items-center justify-between">
        <span className="text-xs font-medium uppercase tracking-wide text-gray-500">{label}</span>
        <span className={`flex h-9 w-9 items-center justify-center rounded-lg ${tone}`}>
          <Icon className="h-5 w-5" />
        </span>
      </div>
      <div className="mt-3 text-2xl font-bold text-gray-900">{value}</div>
    </div>
  );
}

function fmtINR(n: number) {
  return new Intl.NumberFormat("en-IN", { style: "currency", currency: "INR", maximumFractionDigits: 0 }).format(n);
}

export default function TransporterDashboard() {
  const { token, ready } = useToken();
  const [data, setData] = useState<ApiTransporterDashboard | null>(null);
  const [err, setErr] = useState<string | null>(null);

  useEffect(() => {
    if (!ready || !token) return;
    transporterApi.dashboard(token).then(setData).catch((e) => setErr(e.message));
  }, [ready, token]);

  if (err) return <div className="rounded-xl bg-red-50 p-6 text-red-700 ring-1 ring-red-100">{err}</div>;
  if (!data) {
    return (
      <div className="rounded-xl bg-white p-10 shadow-sm ring-1 ring-gray-100">
        <Loader label="Loading dashboard…" />
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <header className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <h1 className="text-2xl font-bold text-gray-900">Transporter Dashboard</h1>
        <Link href="/transporter/enquiries" className="rounded-lg bg-[#CC1414] px-4 py-2 text-sm font-medium text-white hover:bg-[#a30f0f]">
          View Enquiries
        </Link>
      </header>

      <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6">
        <StatCard label="Cash" value={fmtINR(data.wallet.cash_balance)} icon={IndianRupee} tone="bg-emerald-50 text-emerald-600" />
        <StatCard label="Credit" value={fmtINR(data.wallet.credit_balance)} icon={Wallet} tone="bg-blue-50 text-blue-600" />
        <StatCard label="Total Trips" value={data.counts.trips_total} icon={Truck} tone="bg-amber-50 text-amber-600" />
        <StatCard label="Active Trips" value={data.counts.trips_active} icon={Clock} tone="bg-orange-50 text-orange-600" />
        <StatCard label="Open Enquiries" value={data.counts.enquiries_pending} icon={Inbox} tone="bg-purple-50 text-purple-600" />
        <StatCard label="Replied" value={data.counts.enquiries_replied} icon={CheckCircle2} tone="bg-green-50 text-green-600" />
      </div>

      <section className="grid grid-cols-1 gap-6 lg:grid-cols-2">
        <div className="rounded-xl bg-white p-5 shadow-sm ring-1 ring-gray-100">
          <div className="mb-4 flex items-center justify-between">
            <h2 className="text-lg font-semibold text-gray-900">Recent Trips</h2>
            <Link href="/transporter/orders" className="text-sm text-[#CC1414] hover:underline">View all</Link>
          </div>
          {data.recent_trips.length === 0 ? (
            <p className="py-6 text-center text-sm text-gray-500">No trips yet.</p>
          ) : (
            <ul className="divide-y divide-gray-100">
              {data.recent_trips.map((o) => (
                <li key={o.id} className="flex items-center justify-between py-3">
                  <div className="min-w-0">
                    <Link href={`/transporter/orders/${o.id}`} className="block truncate text-sm font-medium text-gray-900 hover:text-[#CC1414]">
                      {o.product?.name ?? "—"}
                    </Link>
                    <div className="text-xs text-gray-500">
                      {o.order_id ?? o.unique_id} · {o.customer?.name ?? "—"} · {o.status}
                    </div>
                  </div>
                  <div className="text-sm font-semibold text-gray-900">{fmtINR(o.transport_price)}</div>
                </li>
              ))}
            </ul>
          )}
        </div>

        <div className="rounded-xl bg-white p-5 shadow-sm ring-1 ring-gray-100">
          <div className="mb-4 flex items-center justify-between">
            <h2 className="text-lg font-semibold text-gray-900">Open Enquiries</h2>
            <Link href="/transporter/enquiries" className="text-sm text-[#CC1414] hover:underline">View all</Link>
          </div>
          {data.recent_enquiries.length === 0 ? (
            <p className="py-6 text-center text-sm text-gray-500">No pending enquiries.</p>
          ) : (
            <ul className="divide-y divide-gray-100">
              {data.recent_enquiries.map((r) => (
                <li key={r.id} className="flex items-center justify-between py-3">
                  <div className="min-w-0">
                    <Link
                      href={`/transporter/enquiries/${r.id}`}
                      className="block truncate text-sm font-medium text-gray-900 hover:text-[#CC1414]"
                    >
                      {r.product?.name ?? "—"}
                    </Link>
                    <div className="text-xs text-gray-500">
                      {r.unique_id ?? r.parent_enquiry?.unique_id ?? `#${r.id}`} · {r.origin_city ?? "—"} · {r.status}
                    </div>
                  </div>
                  <FileText className="h-4 w-4 text-gray-400" />
                </li>
              ))}
            </ul>
          )}
        </div>
      </section>
    </div>
  );
}