"use client";

import { useEffect, useState } from "react";
import api from "@/lib/api";

import {
Store,
Package,
ShoppingCart,
DollarSign,
Wallet,
} from "lucide-react";

export default function VendorDashboard() {
const [user, setUser] = useState<any>(null);
const [dashboard, setDashboard] = useState<any>(null);
const [loading, setLoading] = useState(true);

useEffect(() => {
const stored = localStorage.getItem("user");


if (!stored) {
  window.location.href = "/login";
  return;
}

const userData = JSON.parse(stored);

if (userData.role !== "vendor") {
  window.location.href = "/";
  return;
}

setUser(userData);

loadDashboard();

}, []);

const loadDashboard = async () => {
try {
const token = localStorage.getItem("auth_token");


  const res = await api.get("/vendor/dashboard", {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  });

  setDashboard(res.data.data);
} catch (error) {
  console.log(error);
} finally {
  setLoading(false);
}

};

if (loading) {
return ( <div className="min-h-screen flex items-center justify-center">
Loading Vendor Dashboard... </div>
);
}

return ( <main className="min-h-screen bg-[#f7fff8] py-10"> <section className="max-w-7xl mx-auto px-4">

    <div className="bg-white rounded-[2rem] border border-green-100 shadow-sm p-8">
      <div className="flex items-center gap-5">
        <div className="w-20 h-20 rounded-3xl bg-green-50 text-green-600 flex items-center justify-center">
          <Store size={40} />
        </div>

        <div>
          <h1 className="text-4xl font-black">
            Vendor Dashboard
          </h1>

          <p className="text-slate-500 mt-2">
            Welcome back, {user?.name}
          </p>

          <p className="text-sm mt-2">
            Shop: {dashboard?.vendor?.shop_name}
          </p>
        </div>
      </div>
    </div>

    {dashboard?.vendor?.status === "pending" && (
      <div className="mt-6 bg-yellow-50 border border-yellow-200 text-yellow-700 p-5 rounded-3xl font-bold">
        Your vendor account is awaiting admin approval.
      </div>
    )}

    {dashboard?.vendor?.status === "suspended" && (
      <div className="mt-6 bg-red-50 border border-red-200 text-red-700 p-5 rounded-3xl font-bold">
        Your vendor account has been suspended.
      </div>
    )}

    <div className="grid md:grid-cols-4 gap-6 mt-8">

      <Card
        icon={<Package size={30} />}
        title="Products"
        value={dashboard?.total_products || 0}
      />

      <Card
        icon={<ShoppingCart size={30} />}
        title="Orders"
        value={dashboard?.total_orders || 0}
      />

      <Card
        icon={<DollarSign size={30} />}
        title="Sales"
        value={`৳${dashboard?.total_sales || 0}`}
      />

      <Card
        icon={<Wallet size={30} />}
        title="Balance"
        value={`৳${dashboard?.available_balance || 0}`}
      />
    </div>

    <div className="grid md:grid-cols-2 gap-6 mt-8">

      <div className="bg-white rounded-[2rem] border border-green-100 shadow-sm p-8">
        <h2 className="text-2xl font-black mb-5">
          Store Information
        </h2>

        <div className="space-y-3">
          <Info
            label="Shop Name"
            value={dashboard?.vendor?.shop_name}
          />

          <Info
            label="Shop Slug"
            value={dashboard?.vendor?.shop_slug}
          />

          <Info
            label="Status"
            value={dashboard?.vendor?.status}
          />
        </div>
      </div>

      <div className="bg-white rounded-[2rem] border border-green-100 shadow-sm p-8">
        <h2 className="text-2xl font-black mb-5">
          Financial Summary
        </h2>

        <div className="space-y-3">
          <Info
            label="Total Sales"
            value={`৳${dashboard?.total_sales || 0}`}
          />

          <Info
            label="Total Payouts"
            value={`৳${dashboard?.total_payouts || 0}`}
          />

          <Info
            label="Available Balance"
            value={`৳${dashboard?.available_balance || 0}`}
          />

          <Info
            label="Pending Orders"
            value={dashboard?.pending_orders || 0}
          />
        </div>
      </div>

    </div>

  </section>
</main>


);
}

function Card({
icon,
title,
value,
}: {
icon: React.ReactNode;
title: string;
value: any;
}) {
return ( <div className="bg-white rounded-[2rem] border border-green-100 shadow-sm p-6"> <div className="w-14 h-14 rounded-2xl bg-green-50 text-green-600 flex items-center justify-center">
{icon} </div>

  <h3 className="text-slate-500 font-bold mt-5">
    {title}
  </h3>

  <p className="text-4xl font-black mt-2">
    {value}
  </p>
</div>

);
}

function Info({
label,
value,
}: {
label: string;
value: any;
}) {
return ( <div className="flex justify-between border-b border-slate-100 pb-3"> <span className="text-slate-500">{label}</span>


  <span className="font-bold">{value}</span>
</div>


);
}