"use client";

import { useState, useCallback } from "react";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { authClient } from "@/lib/auth/client";
import type { OrderSummary } from "@/lib/actions/account";
import { saveDefaultAddress } from "@/lib/actions/addresses";
import { getAllDistricts, getUpazilasByDistrict } from "@/lib/bangladesh";
import { LocationCombobox } from "@/components/checkout/CheckoutShippingForm";

interface User {
  id: string;
  name: string;
  email: string;
  image?: string | null;
}

const STATUS_BADGE: Record<string, string> = {
  pending: "bg-amber-500/10 text-amber-600",
  processing: "bg-sky-500/10 text-sky-600",
  shipped: "bg-indigo-500/10 text-indigo-600",
  delivered: "bg-emerald-500/10 text-emerald-600",
  cancelled: "bg-destructive/10 text-destructive",
};

function formatDate(iso: string): string {
  return new Date(iso).toLocaleDateString("en-GB", {
    day: "numeric",
    month: "short",
    year: "numeric",
  });
}

function OrderHistory({ orders }: { orders: OrderSummary[] }) {
  if (orders.length === 0) {
    return (
      <div className="rounded-lg border border-outline-variant p-6">
        <h2 className="text-lg font-semibold mb-1">Order History</h2>
        <p className="text-sm text-muted-foreground">
          You haven&apos;t placed any orders yet. When you do, they&apos;ll
          appear here so you can track them.
        </p>
      </div>
    );
  }

  return (
    <div className="rounded-lg border border-outline-variant p-6">
      <div className="mb-4 flex items-center justify-between">
        <h2 className="text-lg font-semibold">Order History</h2>
        <Button
          variant="outline"
          size="sm"
          onClick={() => window.location.assign("/orders")}
        >
          See All
        </Button>
      </div>
      <ul className="divide-y divide-outline-variant">
        {orders.map((order) => (
          <li key={order.id} className="flex flex-wrap items-center gap-3 py-3">
            <div className="min-w-32">
              <p className="text-sm font-semibold">{order.orderNumber}</p>
              <p className="text-xs text-muted-foreground">
                {formatDate(order.createdAt)}
              </p>
            </div>
            <span
              className={`rounded-full px-2.5 py-1 text-xs font-medium ${STATUS_BADGE[order.status] ?? "bg-muted text-muted-foreground"}`}
            >
              {order.statusLabel}
            </span>
            <span className="text-xs text-muted-foreground">
              {order.itemCount} item{order.itemCount === 1 ? "" : "s"}
            </span>
            <span className="ml-auto text-sm font-bold">
              ৳{order.grandTotal.toLocaleString()}
            </span>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default function AccountPageClient({
  user,
  orders,
  defaultAddress,
}: {
  user: User;
  orders: OrderSummary[];
  defaultAddress: {
    recipientName: string;
    address: string;
    city: string | null;
    district: string;
    upazila: string;
    postalCode: string | null;
  } | null;
}) {
  const [name, setName] = useState(user.name);
  const [saving, setSaving] = useState(false);
  const [message, setMessage] = useState("");
  const router = useRouter();
  const [address, setAddress] = useState(
    () =>
      defaultAddress ?? {
        recipientName: user.name,
        address: "",
        city: "",
        district: "",
        upazila: "",
        postalCode: "",
      },
  );
  const [addressMessage, setAddressMessage] = useState("");
  const [addressSaving, setAddressSaving] = useState(false);
  const districtId = getAllDistricts().find(
    (district) => district.name === address.district,
  )?.id;
  const upazilas = districtId
    ? getUpazilasByDistrict(districtId).map((upazila) => upazila.name)
    : [];

  const handleSignOut = useCallback(async () => {
    await authClient.signOut();
    router.push("/");
    router.refresh();
  }, [router]);

  return (
    <main className="mx-auto max-w-container-max px-gutter py-8 md:py-12">
      <div className="mb-8">
        <p className="text-sm font-semibold uppercase tracking-[0.24em] text-primary">
          Profile
        </p>
        <h1 className="text-3xl font-bold tracking-tight text-foreground">
          My Account
        </h1>
      </div>

      <div className="space-y-6 grid gap-6 md:grid-cols-2">
        {message && (
          <div className="rounded-md bg-primary/10 px-3 py-2 text-xs text-primary">
            {message}
          </div>
        )}

        <div className="space-y-4 rounded-lg border border-outline-variant p-6">
          <div className="space-y-1.5">
            <Label htmlFor="name" className="text-sm">
              Name
            </Label>
            <Input
              id="name"
              type="text"
              value={name}
              onChange={(e) => setName(e.target.value)}
              className="h-10"
              disabled={saving}
            />
          </div>

          <div className="space-y-1.5">
            <Label htmlFor="email" className="text-sm">
              Email
            </Label>
            <Input
              id="email"
              type="email"
              value={user.email}
              className="h-10"
              disabled
            />
            <p className="text-xs text-muted-foreground">
              Email cannot be changed
            </p>
          </div>

          <Button
            className="h-10 rounded-full"
            disabled={saving}
            onClick={async () => {
              setSaving(true);
              setMessage("");
              try {
                await authClient.updateUser({ name });
                setMessage("Profile updated successfully");
              } catch {
                setMessage("Failed to update profile");
              } finally {
                setSaving(false);
              }
            }}
          >
            {saving ? "Saving..." : "Save Changes"}
          </Button>
        </div>

        <div className="flex flex-col gap-5 rounded-lg border border-outline-variant p-6">
          <div>
            <h2 className="text-lg font-semibold">Default Shipping Address</h2>
            <p className="text-sm text-muted-foreground">
              This address prefills checkout and can still be changed for any
              order.
            </p>
          </div>
          <div className="grid gap-4 md:grid-cols-2">
            <div className="flex flex-col gap-2 md:col-span-2">
              <Label htmlFor="address-recipient">Recipient name</Label>
              <Input
                id="address-recipient"
                value={address.recipientName}
                onChange={(e) =>
                  setAddress({ ...address, recipientName: e.target.value })
                }
              />
            </div>
            <div className="flex flex-col gap-2 md:col-span-2">
              <Label htmlFor="saved-address">Address</Label>
              <Input
                id="saved-address"
                value={address.address}
                onChange={(e) =>
                  setAddress({ ...address, address: e.target.value })
                }
              />
            </div>
            <LocationCombobox
              label="District"
              value={address.district}
              placeholder="Select district"
              options={getAllDistricts().map((district) => district.name)}
              onChange={(value) =>
                setAddress({ ...address, district: value, upazila: "" })
              }
            />
            <LocationCombobox
              label="Thana / Upazila"
              value={address.upazila}
              placeholder="Select thana / upazila"
              options={upazilas}
              disabled={!address.district}
              onChange={(value) => setAddress({ ...address, upazila: value })}
            />
            <div className="flex flex-col gap-2">
              <Label htmlFor="saved-city">City</Label>
              <Input
                id="saved-city"
                value={address.city ?? ""}
                onChange={(e) =>
                  setAddress({ ...address, city: e.target.value })
                }
              />
            </div>
            <div className="flex flex-col gap-2">
              <Label htmlFor="saved-postal">Postal code</Label>
              <Input
                id="saved-postal"
                value={address.postalCode ?? ""}
                onChange={(e) =>
                  setAddress({ ...address, postalCode: e.target.value })
                }
              />
            </div>
          </div>
          {addressMessage && (
            <p className="text-sm text-muted-foreground" role="status">
              {addressMessage}
            </p>
          )}
          <Button
            className="w-fit"
            disabled={addressSaving}
            onClick={async () => {
              setAddressSaving(true);
              const result = await saveDefaultAddress(address);
              setAddressMessage(
                "error" in result
                  ? (result.error ?? "Could not save address.")
                  : "Default shipping address saved.",
              );
              setAddressSaving(false);
            }}
          >
            {addressSaving ? "Saving..." : "Save Address"}
          </Button>
        </div>

        <div className="grid gap-5 md:col-span-2">
          <OrderHistory orders={orders} />
        </div>

        <div className="rounded-lg border border-outline-variant p-6">
          <h2 className="text-lg font-semibold mb-4">Sign Out</h2>
          <p className="text-sm text-muted-foreground mb-4">
            Sign out of your account on this device.
          </p>
          <Button
            variant="destructive"
            className="h-10 rounded-full"
            onClick={handleSignOut}
          >
            Sign Out
          </Button>
        </div>
      </div>
    </main>
  );
}