import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { useState } from "react";
import { toast } from "sonner";
import { supabase } from "@/integrations/supabase/client";
import { ListingCard } from "@/components/ListingCard";
import { fetchFavoriteListings, fetchMyListings, toggleFavorite } from "@/lib/listings";
import { useAuth } from "@/lib/auth";
import { useI18n } from "@/lib/i18n";
import { formatKz, timeAgo } from "@/lib/format";
import { paymentLabel } from "@/lib/catalog";

export const Route = createFileRoute("/account")({
  head: () => ({
    meta: [
      { title: "A minha conta — KUYA" },
      { name: "description", content: "Gere os teus anúncios, artigos guardados e encomendas na KUYA." },
      { property: "og:title", content: "A minha conta — KUYA" },
      { property: "og:description", content: "Anúncios, guardados e encomendas num só lugar." },
    ],
  }),
  component: AccountPage,
});

type Tab = "listings" | "saved" | "orders";

function AccountPage() {
  const { t, lang } = useI18n();
  const { user, loading } = useAuth();
  const navigate = useNavigate();
  const queryClient = useQueryClient();
  const [tab, setTab] = useState<Tab>("listings");

  const myListings = useQuery({
    queryKey: ["my-listings", user?.id],
    queryFn: () => fetchMyListings(user!.id),
    enabled: Boolean(user),
  });

  const savedListings = useQuery({
    queryKey: ["saved-listings", user?.id],
    queryFn: () => fetchFavoriteListings(user!.id),
    enabled: Boolean(user),
  });

  const orders = useQuery({
    queryKey: ["orders", user?.id],
    queryFn: async () => {
      const { data, error } = await supabase
        .from("orders")
        .select("*, order_items(*)")
        .eq("buyer_id", user!.id)
        .order("created_at", { ascending: false });
      if (error) throw error;
      return data ?? [];
    },
    enabled: Boolean(user),
  });

  if (!loading && !user) {
    return (
      <div className="mx-auto max-w-[560px] px-4 pt-10">
        <div className="kuya-card p-8 text-center">
          <p className="text-sm">{t("signInToContinue")}</p>
          <Link to="/auth" className="kuya-btn kuya-btn-primary mt-4 inline-block">
            {t("signIn")}
          </Link>
        </div>
      </div>
    );
  }

  const removeListing = async (id: string) => {
    const { error } = await supabase.from("listings").delete().eq("id", id);
    if (error) {
      toast.error(error.message);
      return;
    }
    toast.success(t("delete"));
    queryClient.invalidateQueries({ queryKey: ["my-listings"] });
    queryClient.invalidateQueries({ queryKey: ["listings"] });
  };

  const unsave = async (listingId: string) => {
    if (!user) return;
    await toggleFavorite(user.id, listingId, false);
    queryClient.invalidateQueries({ queryKey: ["saved-listings"] });
    queryClient.invalidateQueries({ queryKey: ["favorites"] });
  };

  const tabs: Array<{ key: Tab; label: string }> = [
    { key: "listings", label: t("myListings") },
    { key: "saved", label: t("favorites") },
    { key: "orders", label: t("myOrders") },
  ];

  return (
    <div className="mx-auto max-w-[1000px] px-4 pt-6 sm:px-6">
      <div className="kuya-card flex flex-wrap items-center gap-3 p-5">
        <span className="grid size-12 place-items-center rounded-full bg-lilac font-display text-lg font-bold">
          {(user?.email ?? "K").slice(0, 1).toUpperCase()}
        </span>
        <div className="flex-1">
          <p className="font-display text-lg leading-tight font-bold">
            {(user?.user_metadata?.["display_name"] as string) ?? t("profile")}
          </p>
          <p className="text-sm text-muted-foreground">{user?.email}</p>
        </div>
        <button
          type="button"
          onClick={async () => {
            await supabase.auth.signOut();
            navigate({ to: "/" });
          }}
          className="kuya-btn kuya-btn-ghost"
        >
          {t("signOut")}
        </button>
      </div>

      <div className="mt-4 flex gap-2 overflow-x-auto">
        {tabs.map((item) => (
          <button
            key={item.key}
            type="button"
            onClick={() => setTab(item.key)}
            className={`kuya-chip ${tab === item.key ? "kuya-chip-active" : ""}`}
          >
            {item.label}
          </button>
        ))}
      </div>

      <div className="mt-4">
        {tab === "listings" ? (
          myListings.data && myListings.data.length > 0 ? (
            <ul className="space-y-3">
              {myListings.data.map((listing) => (
                <li key={listing.id} className="kuya-card flex items-center gap-3 p-3">
                  <div className="size-16 shrink-0 overflow-hidden rounded-xl bg-mint">
                    {listing.images[0] ? (
                      <img src={listing.images[0]} alt="" className="h-full w-full object-cover" />
                    ) : null}
                  </div>
                  <div className="flex-1">
                    <Link
                      to="/listing/$id"
                      params={{ id: listing.id }}
                      className="line-clamp-1 font-display text-sm font-semibold"
                    >
                      {listing.title}
                    </Link>
                    <p className="text-sm font-bold text-teal">{formatKz(listing.price)}</p>
                    <p className="text-xs text-muted-foreground">
                      {timeAgo(listing.created_at, lang)} · {listing.views} {t("views")}
                    </p>
                  </div>
                  <button
                    type="button"
                    onClick={() => removeListing(listing.id)}
                    className="text-xs font-semibold text-destructive"
                  >
                    {t("delete")}
                  </button>
                </li>
              ))}
            </ul>
          ) : (
            <div className="kuya-card p-8 text-center text-sm">
              <p>{t("noListings")}</p>
              <Link to="/sell" className="kuya-btn kuya-btn-primary mt-4 inline-block">
                {t("newListing")}
              </Link>
            </div>
          )
        ) : null}

        {tab === "saved" ? (
          savedListings.data && savedListings.data.length > 0 ? (
            <div className="grid grid-cols-2 gap-3 md:grid-cols-3">
              {savedListings.data.map((listing) => (
                <ListingCard
                  key={listing.id}
                  listing={listing}
                  saved
                  onToggleSave={() => unsave(listing.id)}
                />
              ))}
            </div>
          ) : (
            <p className="kuya-card p-8 text-center text-sm">{t("noFavorites")}</p>
          )
        ) : null}

        {tab === "orders" ? (
          orders.data && orders.data.length > 0 ? (
            <ul className="space-y-3">
              {orders.data.map((order) => (
                <li key={order.id} className="kuya-card p-4">
                  <div className="flex flex-wrap items-center justify-between gap-2">
                    <p className="font-display text-sm font-bold">
                      #{order.id.slice(0, 8)} · {timeAgo(order.created_at, lang)}
                    </p>
                    <span className="kuya-chip">{paymentLabel(order.payment_method, lang)}</span>
                  </div>
                  <ul className="mt-2 space-y-1 text-sm">
                    {(order.order_items ?? []).map((item: { id: string; title: string; quantity: number; unit_price: number }) => (
                      <li key={item.id} className="flex justify-between gap-3">
                        <span className="line-clamp-1">
                          {item.quantity}× {item.title}
                        </span>
                        <span className="font-semibold">{formatKz(item.unit_price * item.quantity)}</span>
                      </li>
                    ))}
                  </ul>
                  <p className="mt-2 border-t border-border pt-2 text-right font-display font-bold text-teal">
                    {t("total")}: {formatKz(order.total)}
                  </p>
                </li>
              ))}
            </ul>
          ) : (
            <p className="kuya-card p-8 text-center text-sm">{t("noOrders")}</p>
          )
        ) : null}
      </div>
    </div>
  );
}