"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { useI18n } from "../../components/I18nProvider";

type MyListing = {
  id: string;
  status: string;
  translations: { title: string; slug: string; locale: string }[];
};

export default function MyListingsPage() {
  const { t } = useI18n();
  const [listings, setListings] = useState<MyListing[]>([]);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
  const [message, setMessage] = useState<string | null>(null);
  const [actionId, setActionId] = useState<string | null>(null);

  useEffect(() => {
    fetch("/api/listings/mine", { cache: "no-store" })
      .then((res) => res.json())
      .then((data) => {
        if (data.error) {
          setError(data.error);
        } else {
          setListings(data.listings ?? []);
        }
      })
      .catch(() => setError("Failed to load"))
      .finally(() => setLoading(false));
  }, []);

  async function removeListing(listingId: string) {
    if (!window.confirm(t("removeConfirm"))) return;
    setActionId(listingId);
    setError(null);
    setMessage(null);
    try {
      const res = await fetch("/api/listings/remove", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ listingId }),
      });
      const data = await res.json();
      if (!res.ok) {
        setError(data.error || "Failed to remove listing");
      } else {
        setMessage(t("removed"));
        setListings((prev) =>
          prev.map((l) =>
            l.id === listingId ? { ...l, status: "REMOVED" } : l,
          ),
        );
      }
    } catch (e) {
      setError("Failed to remove listing");
    } finally {
      setActionId(null);
    }
  }

  if (loading) {
    return (
      <main className="panel" style={{ maxWidth: 720, margin: "40px auto" }}>
        <h1>{t("myListingsTitle")}</h1>
        <p>{t("loading")}</p>
      </main>
    );
  }

  if (error) {
    return (
      <main className="panel" style={{ maxWidth: 720, margin: "40px auto" }}>
        <h1>{t("myListingsTitle")}</h1>
        <p style={{ color: "red" }}>{error}</p>
      </main>
    );
  }

  return (
    <main className="panel" style={{ maxWidth: 720, margin: "40px auto" }}>
      <h1>{t("myListingsTitle")}</h1>
      {message ? <p style={{ color: "green" }}>{message}</p> : null}
      <div style={{ marginBottom: 12 }}>
        <Link href="/listings/new" className="button secondary">
          {t("createNewListing")}
        </Link>
      </div>
      {listings.length === 0 ? (
        <p>
          {t("noListings")} <Link href="/listings/new">{t("createOne")}</Link>.
        </p>
      ) : (
        <ul style={{ listStyle: "none", padding: 0, display: "grid", gap: 10 }}>
          {listings.map((l) => (
            <li
              key={l.id}
              style={{ border: "1px solid #ddd", borderRadius: 8, padding: 12 }}
            >
              <div>
                <strong>{l.translations[0]?.title ?? "Listing"}</strong> —{" "}
                {t("statusLabel")}: {l.status}
              </div>
              <div style={{ fontSize: 12, color: "#666" }}>
                {t("slugsLabel")}:{" "}
                {l.translations
                  .map((t) => `${t.slug} (${t.locale})`)
                  .join(", ")}
              </div>
              <div style={{ marginTop: 8, display: "flex", gap: 8 }}>
                <Link
                  href={`/listings/edit/${l.id}`}
                  className="button secondary"
                >
                  {t("edit")}
                </Link>
                {l.status !== "DRAFT" ? (
                  <Link
                    href={`/listings/${l.translations[0]?.slug ?? ""}`}
                    className="button secondary"
                  >
                    {t("view")}
                  </Link>
                ) : null}
                <button
                  className="button secondary"
                  onClick={() => removeListing(l.id)}
                  disabled={actionId === l.id}
                >
                  {actionId === l.id ? t("removing") : t("remove")}
                </button>
              </div>
            </li>
          ))}
        </ul>
      )}
    </main>
  );
}