"use client";

import { useEffect, useState } from "react";

import api from "@/lib/api";
import { getGuestToken } from "@/lib/guestToken";
import toast from "react-hot-toast";

import {
  User,
  ShoppingBag,
  Heart,
  MapPin,
  LogOut,
  Package,
  Save,
  Plus,
  Pencil,
} from "lucide-react";

type Tab = "profile" | "orders" | "wishlist" | "addresses";

export default function CustomerDashboard() {
  const [user, setUser] = useState<any>(null);
  const [activeTab, setActiveTab] = useState<Tab>("profile");

  const [orders, setOrders] = useState<any[]>([]);
  const [wishlist, setWishlist] = useState<any[]>([]);
  const [addresses, setAddresses] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);

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

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

    setUser(JSON.parse(stored));
    fetchDashboardData();
  }, []);

  const authHeaders = () => {
    const token = localStorage.getItem("auth_token");

    return {
      headers: {
        Authorization: `Bearer ${token}`,
      },
    };
  };

  const fetchDashboardData = async () => {
    try {
      setLoading(true);

      const [ordersRes, wishlistRes, addressesRes] = await Promise.all([
        api.get("/account/orders", authHeaders()),

        api.get("/account/wishlist", {
          ...authHeaders(),
          params: {
            guest_token: getGuestToken(),
          },
        }),

        api.get("/account/addresses", authHeaders()),
      ]);

      setOrders(ordersRes.data.data || []);
      setWishlist(wishlistRes.data.data || []);
      setAddresses(addressesRes.data.data || []);
    } catch (error) {
      console.error(error);
    } finally {
      setLoading(false);
    }
  };

  const logout = async () => {
    try {
      await api.post("/logout", {}, authHeaders());
    } catch (error) {
      console.error(error);
    }

    localStorage.removeItem("auth_token");
    localStorage.removeItem("user");

    window.location.href = "/login";
  };

  return (
    <>
      

      <main className="min-h-screen bg-[#f7fff8] py-10">
        <section className="max-w-7xl mx-auto px-4">
          <div className="grid lg:grid-cols-[300px_1fr] gap-8">
            <aside className="bg-white rounded-[2rem] border border-green-100 shadow-sm p-6 h-fit">
              <div className="text-center">
                <div className="w-24 h-24 mx-auto rounded-full bg-green-50 flex items-center justify-center text-green-600">
                  <User size={42} />
                </div>

                <h2 className="text-2xl font-black mt-5">{user?.name}</h2>

                <p className="text-slate-500 mt-1">{user?.email}</p>
              </div>

              <div className="mt-8 space-y-3">
                <MenuItem
                  active={activeTab === "profile"}
                  icon={<User size={20} />}
                  label="Profile"
                  onClick={() => setActiveTab("profile")}
                />

                <MenuItem
                  active={activeTab === "orders"}
                  icon={<ShoppingBag size={20} />}
                  label="My Orders"
                  onClick={() => setActiveTab("orders")}
                />

                <MenuItem
                  active={activeTab === "wishlist"}
                  icon={<Heart size={20} />}
                  label="Wishlist"
                  onClick={() => setActiveTab("wishlist")}
                />

                <MenuItem
                  active={activeTab === "addresses"}
                  icon={<MapPin size={20} />}
                  label="Addresses"
                  onClick={() => setActiveTab("addresses")}
                />

                <button
                  onClick={logout}
                  className="cursor-pointer w-full flex items-center gap-3 px-5 py-4 rounded-2xl bg-red-50 text-red-500 font-black"
                >
                  <LogOut size={20} />
                  Logout
                </button>
              </div>
            </aside>

            <div className="space-y-6">
              <div className="bg-white rounded-[2rem] border border-green-100 shadow-sm p-8">
                <h1 className="text-4xl font-black">Welcome Back 👋</h1>

                <p className="text-slate-500 mt-3">
                  Manage your profile, orders, wishlist and addresses.
                </p>
              </div>

              <div className="grid md:grid-cols-3 gap-6">
                <Card icon={<Package size={30} />} title="Orders" value={String(orders.length)} />
                <Card icon={<Heart size={30} />} title="Wishlist" value={String(wishlist.length)} />
                <Card icon={<MapPin size={30} />} title="Addresses" value={String(addresses.length)} />
              </div>

              <div className="bg-white rounded-[2rem] border border-green-100 shadow-sm p-8">
                {loading ? (
                  <div className="h-60 bg-slate-100 rounded-3xl animate-pulse" />
                ) : (
                  <>
                    {activeTab === "profile" && (
                      <ProfileEdit
                        user={user}
                        setUser={setUser}
                        authHeaders={authHeaders}
                      />
                    )}

                    {activeTab === "orders" && <OrdersTable orders={orders} />}

                    {activeTab === "wishlist" && (
                      <WishlistTable wishlist={wishlist} />
                    )}

                    {activeTab === "addresses" && (
                      <AddressManager
                        addresses={addresses}
                        authHeaders={authHeaders}
                        refresh={fetchDashboardData}
                      />
                    )}
                  </>
                )}
              </div>
            </div>
          </div>
        </section>
      </main>

     
    </>
  );
}

function ProfileEdit({
  user,
  setUser,
  authHeaders,
}: {
  user: any;
  setUser: (user: any) => void;
  authHeaders: () => any;
}) {
  const [form, setForm] = useState({
    name: user?.name || "",
    email: user?.email || "",
    phone: user?.phone || "",
  });

  useEffect(() => {
    setForm({
      name: user?.name || "",
      email: user?.email || "",
      phone: user?.phone || "",
    });
  }, [user]);

  const updateProfile = async () => {
    try {
      const res = await api.put("/account/profile", form, authHeaders());

      localStorage.setItem("user", JSON.stringify(res.data.user));
      setUser(res.data.user);

      toast.success("Profile updated successfully");
    } catch (error: any) {
      console.error(error);

      if (error.response?.status === 422) {
        const message = Object.values(error.response.data.errors).flat().join("\n");
        toast.error(message);
      } else {
        toast.error("Profile update failed");
      }
    }
  };

  return (
    <>
      <h2 className="text-2xl font-black mb-5">Edit Profile</h2>

      <div className="grid md:grid-cols-2 gap-4">
        <Input
          label="Full Name"
          value={form.name}
          onChange={(v) => setForm({ ...form, name: v })}
        />

        <Input
          label="Phone"
          value={form.phone}
          onChange={(v) => setForm({ ...form, phone: v })}
        />

        <Input
          label="Email"
          value={form.email}
          onChange={(v) => setForm({ ...form, email: v })}
        />
      </div>

      <button
        onClick={updateProfile}
        className="mt-6 cursor-pointer bg-green-600 hover:bg-green-700 text-white px-7 py-4 rounded-2xl font-black flex items-center gap-2"
      >
        <Save size={18} />
        Save Profile
      </button>
    </>
  );
}

function AddressManager({
  addresses,
  authHeaders,
  refresh,
}: {
  addresses: any[];
  authHeaders: () => any;
  refresh: () => void;
}) {
  const emptyForm = {
    name: "",
    phone: "",
    email: "",
    address_line: "",
    city: "Dhaka",
    state: "",
    postal_code: "",
    country: "Bangladesh",
    type: "shipping",
  };

  const [form, setForm] = useState<any>(emptyForm);
  const [editingId, setEditingId] = useState<number | null>(null);

  const editAddress = (address: any) => {
    setEditingId(address.id);

    setForm({
      name: address.name || "",
      phone: address.phone || "",
      email: address.email || "",
      address_line: address.address_line || "",
      city: address.city || "Dhaka",
      state: address.state || "",
      postal_code: address.postal_code || "",
      country: address.country || "Bangladesh",
      type: address.type || "shipping",
    });
  };

  const resetForm = () => {
    setEditingId(null);
    setForm(emptyForm);
  };

  const saveAddress = async () => {
    if (!form.name || !form.phone || !form.address_line || !form.city) {
      toast.error("Please fill required address fields");
      return;
    }

    try {
      const payload = {
        ...form,
        guest_token: getGuestToken(),
      };

      if (editingId) {
        await api.put(`/account/addresses/${editingId}`, payload, authHeaders());
        toast.success("Address updated successfully");
      } else {
        await api.post("/account/addresses", payload, authHeaders());
        toast.success("Address added successfully");
      }

      resetForm();
      refresh();
    } catch (error: any) {
      console.error(error);

      if (error.response?.status === 422) {
        const message = Object.values(error.response.data.errors).flat().join("\n");
        toast.error(message);
      } else {
        toast.error("Address save failed");
      }
    }
  };

  return (
    <>
      <h2 className="text-2xl font-black mb-5">
        {editingId ? "Edit Address" : "Add Address"}
      </h2>

      <div className="bg-slate-50 rounded-3xl p-5 mb-8">
        <div className="grid md:grid-cols-2 gap-4">
          <Input label="Name *" value={form.name} onChange={(v) => setForm({ ...form, name: v })} />
          <Input label="Phone *" value={form.phone} onChange={(v) => setForm({ ...form, phone: v })} />
          <Input label="Email" value={form.email} onChange={(v) => setForm({ ...form, email: v })} />
          <Input label="City *" value={form.city} onChange={(v) => setForm({ ...form, city: v })} />
          <Input label="State / Area" value={form.state} onChange={(v) => setForm({ ...form, state: v })} />
          <Input label="Postal Code" value={form.postal_code} onChange={(v) => setForm({ ...form, postal_code: v })} />
          <Input label="Country *" value={form.country} onChange={(v) => setForm({ ...form, country: v })} />

          <div>
            <label className="block text-sm font-black text-slate-600 mb-2">
              Type
            </label>
            <select
              value={form.type}
              onChange={(e) => setForm({ ...form, type: e.target.value })}
              className="w-full bg-white border border-slate-200 rounded-2xl py-4 px-4 outline-none focus:border-green-500"
            >
              <option value="shipping">Shipping</option>
              <option value="billing">Billing</option>
            </select>
          </div>
        </div>

        <div className="mt-4">
          <label className="block text-sm font-black text-slate-600 mb-2">
            Full Address *
          </label>

          <textarea
            value={form.address_line}
            onChange={(e) => setForm({ ...form, address_line: e.target.value })}
            className="w-full min-h-28 bg-white border border-slate-200 rounded-2xl px-5 py-4 outline-none focus:border-green-500"
          />
        </div>

        <div className="flex gap-3 mt-5">
          <button
            onClick={saveAddress}
            className="cursor-pointer bg-green-600 hover:bg-green-700 text-white px-7 py-4 rounded-2xl font-black flex items-center gap-2"
          >
            {editingId ? <Save size={18} /> : <Plus size={18} />}
            {editingId ? "Update Address" : "Add Address"}
          </button>

          {editingId && (
            <button
              onClick={resetForm}
              className="cursor-pointer bg-slate-200 hover:bg-slate-300 text-slate-700 px-7 py-4 rounded-2xl font-black"
            >
              Cancel
            </button>
          )}
        </div>
      </div>

      <h2 className="text-2xl font-black mb-5">Saved Addresses</h2>

      {addresses.length === 0 ? (
        <Empty text="No address found" />
      ) : (
        <div className="grid md:grid-cols-2 gap-4">
          {addresses.map((address) => (
            <div key={address.id} className="bg-slate-50 rounded-3xl p-5">
              <div className="flex justify-between gap-4">
                <div>
                  <h3 className="font-black text-lg">{address.name}</h3>
                  <p className="text-slate-500 mt-1">{address.phone}</p>
                </div>

                <button
                  onClick={() => editAddress(address)}
                  className="cursor-pointer w-11 h-11 rounded-2xl bg-green-100 text-green-600 flex items-center justify-center"
                >
                  <Pencil size={18} />
                </button>
              </div>

              <p className="text-slate-600 mt-3 leading-7">
                {address.address_line}, {address.city}, {address.state},{" "}
                {address.postal_code}, {address.country}
              </p>

              <span className="inline-flex mt-4 px-3 py-1 rounded-full bg-green-100 text-green-700 text-xs font-black">
                {address.type}
              </span>
            </div>
          ))}
        </div>
      )}
    </>
  );
}

function OrdersTable({ orders }: { orders: any[] }) {
  return (
    <>
      <h2 className="text-2xl font-black mb-5">My Orders</h2>

      {orders.length === 0 ? (
        <Empty text="No orders found" />
      ) : (
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead>
              <tr className="text-left border-b border-slate-100">
                <th className="py-4">Order</th>
                <th>Status</th>
                <th>Payment</th>
                <th>Total</th>
                <th>Date</th>
              </tr>
            </thead>

            <tbody>
              {orders.map((order) => (
                <tr key={order.id} className="border-b border-slate-100">
                  <td className="py-4 font-black">{order.order_number}</td>
                  <td>
                    <span className="px-3 py-1 rounded-full bg-yellow-100 text-yellow-700 text-sm font-black">
                      {order.order_status}
                    </span>
                  </td>
                  <td className="font-bold">{order.payment_status}</td>
                  <td className="font-black text-green-600">৳{order.total_amount}</td>
                  <td className="text-slate-500 text-sm">{order.created_at}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </>
  );
}

function WishlistTable({ wishlist }: { wishlist: any[] }) {
  return (
    <>
      <h2 className="text-2xl font-black mb-5">Wishlist</h2>

      {wishlist.length === 0 ? (
        <Empty text="No wishlist products found" />
      ) : (
        <div className="grid md:grid-cols-2 gap-4">
          {wishlist.map((item) => (
            <div key={item.id} className="flex gap-4 bg-slate-50 rounded-3xl p-4">
              <img
                src={item.product?.image || "https://via.placeholder.com/200"}
                alt={item.product?.name}
                className="w-20 h-20 rounded-2xl object-cover bg-white"
              />

              <div>
                <h3 className="font-black">{item.product?.name}</h3>

                <p className="text-green-600 font-black mt-2">
                  ৳{item.product?.sale_price || item.product?.price}
                </p>
              </div>
            </div>
          ))}
        </div>
      )}
    </>
  );
}

function MenuItem({
  icon,
  label,
  active,
  onClick,
}: {
  icon: React.ReactNode;
  label: string;
  active: boolean;
  onClick: () => void;
}) {
  return (
    <button
      onClick={onClick}
      className={`cursor-pointer w-full flex items-center gap-3 px-5 py-4 rounded-2xl font-black transition ${
        active
          ? "bg-green-600 text-white"
          : "bg-slate-50 hover:bg-green-50 text-slate-800"
      }`}
    >
      {icon}
      {label}
    </button>
  );
}

function Card({
  icon,
  title,
  value,
}: {
  icon: React.ReactNode;
  title: string;
  value: string;
}) {
  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 Input({
  label,
  value,
  onChange,
}: {
  label: string;
  value: string;
  onChange: (value: string) => void;
}) {
  return (
    <div>
      <label className="block text-sm font-black text-slate-600 mb-2">
        {label}
      </label>

      <input
        value={value}
        onChange={(e) => onChange(e.target.value)}
        className="w-full bg-white border border-slate-200 rounded-2xl py-4 px-4 outline-none focus:border-green-500"
      />
    </div>
  );
}

function Empty({ text }: { text: string }) {
  return (
    <div className="bg-slate-50 rounded-3xl p-10 text-center text-slate-500 font-bold">
      {text}
    </div>
  );
}