import { useState, useEffect, useCallback } from "react";

const API = "https://3marketplace.shop";

const COLORS = {
  bg: "#0a0a0f", surface: "#12121a", card: "#1a1a26", border: "#2a2a3d",
  accent: "#4f6ef7", gold: "#f0b429", green: "#22c55e", red: "#ef4444",
  cyan: "#06b6d4", text: "#e8e8f0", muted: "#6b6b8a",
};

const CATEGORIES = ["all", "Electronics", "Fashion", "Gaming", "Sports", "Home", "Books", "Cars", "Other"];
const CONDITIONS = ["new", "like_new", "good", "used", "for_parts"];

const api = {
  post: async (path, body, token) => {
    const res = await fetch(`${API}${path}`, {
      method: "POST",
      headers: { "Content-Type": "application/json", ...(token ? { Authorization: `Bearer ${token}` } : {}) },
      body: JSON.stringify(body),
    });
    return res.json();
  },
  get: async (path, token) => {
    const res = await fetch(`${API}${path}`, {
      headers: { ...(token ? { Authorization: `Bearer ${token}` } : {}) },
    });
    return res.json();
  },
  delete: async (path, token) => {
    const res = await fetch(`${API}${path}`, {
      method: "DELETE",
      headers: { ...(token ? { Authorization: `Bearer ${token}` } : {}) },
    });
    return res.json();
  },
};

const formatEur = (n) => new Intl.NumberFormat("hr-HR", { style: "currency", currency: "EUR" }).format(n || 0);

const s = {
  root: { minHeight: "100vh", background: COLORS.bg, color: COLORS.text, fontFamily: "'DM Sans', sans-serif" },
  glow: { position: "fixed", top: -200, left: "50%", transform: "translateX(-50%)", width: 800, height: 400, background: "radial-gradient(ellipse, #4f6ef718 0%, transparent 70%)", pointerEvents: "none", zIndex: 0 },
  wrap: { maxWidth: 1100, margin: "0 auto", padding: "0 20px", position: "relative", zIndex: 1 },
  card: { background: COLORS.card, border: `1px solid ${COLORS.border}`, borderRadius: 16, padding: 20 },
  btn: (color = COLORS.accent, outline = false) => ({ background: outline ? "transparent" : color, color: outline ? color : "#fff", border: `1.5px solid ${color}`, borderRadius: 10, padding: "10px 20px", cursor: "pointer", fontSize: 13, fontWeight: 700, transition: "all 0.18s" }),
  input: { background: COLORS.surface, border: `1.5px solid ${COLORS.border}`, borderRadius: 10, padding: "11px 14px", color: COLORS.text, fontSize: 14, outline: "none", width: "100%", boxSizing: "border-box" },
};

function Notification({ msg, type }) {
  if (!msg) return null;
  const color = type === "error" ? COLORS.red : COLORS.green;
  return (
    <div style={{ position: "fixed", top: 20, right: 20, zIndex: 9999, background: color + "20", border: `1px solid ${color}50`, color, padding: "12px 20px", borderRadius: 12, fontSize: 14, fontWeight: 600, backdropFilter: "blur(10px)", animation: "slideIn 0.3s ease", maxWidth: 320 }}>
      {msg}
    </div>
  );
}

// ─── AUTH ───
function AuthScreen({ onLogin, notify }) {
  const [mode, setMode] = useState("login");
  const [form, setForm] = useState({ email: "", password: "", username: "", location: "Croatia" });
  const [loading, setLoading] = useState(false);
  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));

  const submit = async () => {
    if (!form.email || !form.password) return notify("Email and password required", "error");
    setLoading(true);
    try {
      if (mode === "register") {
        const res = await api.post("/auth/register", form);
        if (res.error) return notify(res.error, "error");
        notify("Account created! Please log in.");
        setMode("login");
      } else {
        const res = await api.post("/auth/login", { email: form.email, password: form.password });
        if (res.error) return notify(res.error, "error");
        localStorage.setItem("3m_token", res.token);
        localStorage.setItem("3m_user", JSON.stringify(res.user));
        onLogin(res.user, res.token);
      }
    } catch { notify("Connection error", "error"); }
    finally { setLoading(false); }
  };

  return (
    <div style={{ minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center", background: COLORS.bg }}>
      <div style={{ ...s.card, width: "100%", maxWidth: 420, padding: 32 }}>
        <div style={{ textAlign: "center", marginBottom: 28 }}>
          <div style={{ fontSize: 40, marginBottom: 8 }}>🛒</div>
          <h2 style={{ margin: 0, fontSize: 24, fontWeight: 800 }}>3Market</h2>
          <p style={{ color: COLORS.muted, margin: "6px 0 0", fontSize: 13 }}>Tri Kolektiv — zero fee marketplace</p>
        </div>
        <div style={{ display: "flex", gap: 8, marginBottom: 24, background: COLORS.surface, borderRadius: 10, padding: 4 }}>
          {["login", "register"].map((m) => (
            <button key={m} onClick={() => setMode(m)} style={{ flex: 1, border: "none", borderRadius: 8, padding: "9px 0", cursor: "pointer", background: mode === m ? COLORS.accent : "transparent", color: mode === m ? "#fff" : COLORS.muted, fontWeight: 700, fontSize: 13 }}>
              {m === "login" ? "Log In" : "Register"}
            </button>
          ))}
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          {mode === "register" && (
            <>
              <input style={s.input} placeholder="Username" value={form.username} onChange={set("username")} />
              <input style={s.input} placeholder="Location (e.g. Zagreb)" value={form.location} onChange={set("location")} />
            </>
          )}
          <input style={s.input} type="email" placeholder="Email" value={form.email} onChange={set("email")} onKeyDown={(e) => e.key === "Enter" && submit()} />
          <input style={s.input} type="password" placeholder="Password" value={form.password} onChange={set("password")} onKeyDown={(e) => e.key === "Enter" && submit()} />
          <button style={{ ...s.btn(), width: "100%", padding: "13px 0", fontSize: 15, marginTop: 4, opacity: loading ? 0.7 : 1 }} onClick={submit} disabled={loading}>
            {loading ? "..." : mode === "login" ? "Log In" : "Create Account"}
          </button>
        </div>
      </div>
    </div>
  );
}

// ─── LISTING CARD ───
function ListingCard({ listing, onBuy, isOwner, onDelete }) {
  const cashbackPct = listing.xmr_accepted ? 5 : 2;
  const cashback = parseFloat((listing.price * cashbackPct / 100).toFixed(2));
  return (
    <div style={{ ...s.card, display: "flex", flexDirection: "column", gap: 10, position: "relative" }}>
      {isOwner && (
        <button onClick={() => onDelete(listing.id)} style={{ position: "absolute", top: 12, right: 12, background: COLORS.red + "20", border: `1px solid ${COLORS.red}40`, color: COLORS.red, borderRadius: 8, padding: "3px 8px", cursor: "pointer", fontSize: 11, fontWeight: 700 }}>✕</button>
      )}
      <div style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
        <div style={{ fontSize: 36, flexShrink: 0 }}>
          {listing.images?.[0] ? <img src={listing.images[0]} style={{ width: 56, height: 56, borderRadius: 10, objectFit: "cover" }} /> : "📦"}
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontWeight: 700, fontSize: 14, lineHeight: 1.3 }}>{listing.title}</div>
          <div style={{ color: COLORS.muted, fontSize: 11, marginTop: 3 }}>{listing.seller_username} · {listing.location}</div>
        </div>
      </div>
      <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
        <span style={{ background: COLORS.accent + "18", color: COLORS.accent, border: `1px solid ${COLORS.accent}28`, borderRadius: 20, padding: "2px 8px", fontSize: 10, fontWeight: 600 }}>{listing.category}</span>
        <span style={{ background: COLORS.surface, color: COLORS.muted, border: `1px solid ${COLORS.border}`, borderRadius: 20, padding: "2px 8px", fontSize: 10 }}>{listing.condition?.replace("_", " ")}</span>
        {listing.xmr_accepted && <span style={{ background: "#ff6b0018", color: "#ff6b00", border: "1px solid #ff6b0030", borderRadius: 20, padding: "2px 8px", fontSize: 10, fontWeight: 700 }}>⊛ XMR</span>}
        {listing.allow_barter && <span style={{ background: COLORS.cyan + "18", color: COLORS.cyan, border: `1px solid ${COLORS.cyan}30`, borderRadius: 20, padding: "2px 8px", fontSize: 10 }}>↔ Barter</span>}
      </div>
      {listing.description && <div style={{ color: COLORS.muted, fontSize: 12, lineHeight: 1.5 }}>{listing.description.slice(0, 100)}{listing.description.length > 100 ? "..." : ""}</div>}
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: 4 }}>
        <div>
          <div style={{ fontSize: 20, fontWeight: 800 }}>{formatEur(listing.price)}</div>
          <div style={{ fontSize: 11, color: COLORS.gold }}>+{formatEur(cashback)} cashback ({cashbackPct}%)</div>
        </div>
        {!isOwner && <button style={s.btn()} onClick={() => onBuy(listing)}>Buy</button>}
      </div>
    </div>
  );
}

// ─── NEW LISTING FORM ───
function NewListingForm({ token, onCreated, notify, onClose }) {
  const [form, setForm] = useState({ title: "", description: "", price: "", category: "Electronics", condition: "used", location: "", allow_barter: false, xmr_accepted: false });
  const [loading, setLoading] = useState(false);
  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.type === "checkbox" ? e.target.checked : e.target.value }));

  const submit = async () => {
    if (!form.title || !form.price) return notify("Title and price required", "error");
    setLoading(true);
    const res = await api.post("/listings", form, token);
    setLoading(false);
    if (res.error) return notify(res.error, "error");
    notify("Listing published! 🎉");
    onCreated();
    onClose();
  };

  return (
    <div style={{ position: "fixed", inset: 0, background: "#00000099", zIndex: 999, display: "flex", alignItems: "center", justifyContent: "center", backdropFilter: "blur(4px)" }}>
      <div style={{ ...s.card, background: COLORS.surface, maxWidth: 500, width: "90%", maxHeight: "90vh", overflowY: "auto" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 20 }}>
          <div style={{ fontWeight: 800, fontSize: 18 }}>New Listing</div>
          <button onClick={onClose} style={{ background: "transparent", border: "none", color: COLORS.muted, cursor: "pointer", fontSize: 20 }}>✕</button>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          <input style={s.input} placeholder="Title *" value={form.title} onChange={set("title")} />
          <textarea style={{ ...s.input, minHeight: 80, resize: "vertical" }} placeholder="Description" value={form.description} onChange={set("description")} />
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
            <input style={s.input} type="number" placeholder="Price (€) *" value={form.price} onChange={set("price")} />
            <input style={s.input} placeholder="Location" value={form.location} onChange={set("location")} />
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
            <select style={s.input} value={form.category} onChange={set("category")}>
              {CATEGORIES.filter(c => c !== "all").map(c => <option key={c}>{c}</option>)}
            </select>
            <select style={s.input} value={form.condition} onChange={set("condition")}>
              {CONDITIONS.map(c => <option key={c} value={c}>{c.replace("_", " ")}</option>)}
            </select>
          </div>
          <div style={{ display: "flex", gap: 20 }}>
            {[["allow_barter", "↔ Allow barter"], ["xmr_accepted", "⊛ Accept XMR (+5% cashback)"]].map(([k, label]) => (
              <label key={k} style={{ display: "flex", alignItems: "center", gap: 8, cursor: "pointer", fontSize: 13, color: COLORS.muted }}>
                <input type="checkbox" checked={form[k]} onChange={set(k)} />
                {label}
              </label>
            ))}
          </div>
          <button style={{ ...s.btn(), padding: "13px 0", fontSize: 15, opacity: loading ? 0.7 : 1 }} onClick={submit} disabled={loading}>
            {loading ? "Publishing..." : "Publish Listing"}
          </button>
        </div>
      </div>
    </div>
  );
}

// ─── MARKET TAB ───
function MarketTab({ user, token, notify }) {
  const [listings, setListings] = useState([]);
  const [loading, setLoading] = useState(true);
  const [category, setCategory] = useState("all");
  const [search, setSearch] = useState("");
  const [showNew, setShowNew] = useState(false);
  const [buying, setBuying] = useState(null);

  const load = useCallback(async () => {
    setLoading(true);
    const params = new URLSearchParams({ limit: 50 });
    if (category !== "all") params.set("category", category);
    if (search) params.set("search", search);
    const res = await api.get(`/listings?${params}`);
    setListings(res.listings || []);
    setLoading(false);
  }, [category, search]);

  useEffect(() => { load(); }, [load]);

  const handleBuy = async (listing) => {
    const res = await api.post("/create-checkout-session", {
      listingId: listing.id, title: listing.title, price: listing.price,
      userId: user.id, isXmrUser: listing.xmr_accepted,
      imageUrl: listing.images?.[0]
    }, token);
    if (res.error) return notify(res.error, "error");
    if (res.url) window.open(res.url, "_blank");
  };

  const handleDelete = async (id) => {
    const res = await api.delete(`/listings/${id}`, token);
    if (res.error) return notify(res.error, "error");
    notify("Listing removed");
    load();
  };

  return (
    <div>
      {showNew && <NewListingForm token={token} notify={notify} onCreated={load} onClose={() => setShowNew(false)} />}

      {/* Search + filter bar */}
      <div style={{ display: "flex", gap: 12, marginBottom: 20, flexWrap: "wrap" }}>
        <input style={{ ...s.input, flex: 1, minWidth: 200 }} placeholder="🔍 Search listings..." value={search} onChange={(e) => setSearch(e.target.value)} />
        <button style={s.btn(COLORS.green)} onClick={() => setShowNew(true)}>+ Sell something</button>
      </div>

      {/* Category pills */}
      <div style={{ display: "flex", gap: 8, marginBottom: 20, flexWrap: "wrap" }}>
        {CATEGORIES.map((c) => (
          <button key={c} onClick={() => setCategory(c)} style={{ background: category === c ? COLORS.accent : COLORS.surface, color: category === c ? "#fff" : COLORS.muted, border: `1px solid ${category === c ? COLORS.accent : COLORS.border}`, borderRadius: 20, padding: "6px 14px", cursor: "pointer", fontSize: 12, fontWeight: 600, textTransform: "capitalize" }}>
            {c}
          </button>
        ))}
      </div>

      {loading && <div style={{ textAlign: "center", padding: 60, color: COLORS.muted }}>Loading listings...</div>}

      {!loading && listings.length === 0 && (
        <div style={{ ...s.card, textAlign: "center", padding: 60 }}>
          <div style={{ fontSize: 48, marginBottom: 12 }}>📭</div>
          <div style={{ fontSize: 18, fontWeight: 700, marginBottom: 8 }}>No listings yet</div>
          <div style={{ color: COLORS.muted, fontSize: 14, marginBottom: 20 }}>Be the first to sell something on Tri Kolektiv!</div>
          <button style={s.btn(COLORS.green)} onClick={() => setShowNew(true)}>+ Post first listing</button>
        </div>
      )}

      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: 16 }}>
        {listings.map((l) => (
          <ListingCard key={l.id} listing={l} onBuy={handleBuy} isOwner={l.seller_id === user.id} onDelete={handleDelete} />
        ))}
      </div>
    </div>
  );
}

// ─── WALLET TAB ───
function WalletTab({ user, token, notify }) {
  const [wallet, setWallet] = useState(null);
  const [loading, setLoading] = useState(true);
  const [withdrawAmt, setWithdrawAmt] = useState("");

  const load = useCallback(async () => {
    setLoading(true);
    const data = await api.get(`/wallet/${user.id}`, token);
    setWallet(data);
    setLoading(false);
  }, [user.id, token]);

  useEffect(() => { load(); }, [load]);

  const withdraw = async () => {
    const amt = parseFloat(withdrawAmt);
    if (!amt || amt < 5) return notify("Min withdrawal is €5", "error");
    const res = await api.post("/wallet/withdraw", { userId: user.id, amount: amt }, token);
    if (res.error) return notify(res.error, "error");
    notify(`€${amt} withdrawal requested ✅`);
    setWithdrawAmt("");
    load();
  };

  if (loading) return <div style={{ textAlign: "center", padding: 60, color: COLORS.muted }}>Loading wallet...</div>;

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
        <div style={{ ...s.card, textAlign: "center" }}>
          <div style={{ color: COLORS.muted, fontSize: 12, marginBottom: 6 }}>CASHBACK BALANCE</div>
          <div style={{ fontSize: 36, fontWeight: 800, color: COLORS.gold }}>{formatEur(wallet?.balance)}</div>
          <div style={{ color: COLORS.muted, fontSize: 12, marginTop: 4 }}>Lifetime: {formatEur(wallet?.lifetime_earned)}</div>
        </div>
        <div style={{ ...s.card }}>
          <div style={{ color: COLORS.muted, fontSize: 12, marginBottom: 10 }}>WITHDRAW</div>
          <div style={{ display: "flex", gap: 8 }}>
            <input style={{ ...s.input, flex: 1 }} type="number" placeholder="Amount (min €5)" value={withdrawAmt} onChange={(e) => setWithdrawAmt(e.target.value)} />
            <button style={s.btn()} onClick={withdraw}>→</button>
          </div>
          <div style={{ color: COLORS.muted, fontSize: 11, marginTop: 8 }}>Transfers to your IBAN</div>
        </div>
      </div>
      <div style={s.card}>
        <div style={{ fontWeight: 700, marginBottom: 14 }}>Transaction History</div>
        {!wallet?.history?.length && <div style={{ color: COLORS.muted, fontSize: 13 }}>No transactions yet — start buying to earn cashback! 💰</div>}
        {wallet?.history?.map((tx) => (
          <div key={tx.id} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "10px 0", borderBottom: `1px solid ${COLORS.border}` }}>
            <div>
              <div style={{ fontSize: 13, fontWeight: 600 }}>{tx.description}</div>
              <div style={{ fontSize: 11, color: COLORS.muted }}>{new Date(tx.created_at).toLocaleDateString("hr-HR")}</div>
            </div>
            <div style={{ fontWeight: 700, color: tx.amount > 0 ? COLORS.green : COLORS.red }}>{tx.amount > 0 ? "+" : ""}{formatEur(tx.amount)}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── MAIN APP ───
export default function App() {
  const [user, setUser] = useState(() => { try { return JSON.parse(localStorage.getItem("3m_user")); } catch { return null; } });
  const [token, setToken] = useState(() => localStorage.getItem("3m_token") || null);
  const [tab, setTab] = useState("market");
  const [notification, setNotification] = useState(null);
  const [backendOnline, setBackendOnline] = useState(null);

  const notify = (msg, type = "success") => {
    setNotification({ msg, type });
    setTimeout(() => setNotification(null), 3500);
  };

  useEffect(() => {
    api.get("/").then((r) => setBackendOnline(!!r.status)).catch(() => setBackendOnline(false));
    if (token) {
      api.get("/auth/me", token).then((r) => {
        if (r.error) { localStorage.removeItem("3m_token"); localStorage.removeItem("3m_user"); setUser(null); setToken(null); }
        else { setUser(r); localStorage.setItem("3m_user", JSON.stringify(r)); }
      });
    }
  }, [token]);

  const logout = () => {
    api.post("/auth/logout", {}, token);
    localStorage.removeItem("3m_token"); localStorage.removeItem("3m_user");
    setUser(null); setToken(null);
  };

  const onLogin = (u, t) => { setUser(u); setToken(t); notify(`Dobrodošao, ${u.username || u.email}! 👋`); };

  if (!user) return (<><Notification {...(notification || {})} /><AuthScreen onLogin={onLogin} notify={notify} /></>);

  return (
    <div style={s.root}>
      <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
      <style>{`*{box-sizing:border-box} textarea{font-family:inherit} ::-webkit-scrollbar{width:4px} ::-webkit-scrollbar-thumb{background:#2a2a3d;border-radius:4px} @keyframes slideIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}} select option{background:#1a1a26}`}</style>
      <div style={s.glow} />
      <Notification {...(notification || {})} />

      {/* Header */}
      <div style={{ borderBottom: `1px solid ${COLORS.border}` }}>
        <div style={{ ...s.wrap, display: "flex", alignItems: "center", justifyContent: "space-between", height: 60 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <span style={{ fontSize: 22 }}>🛒</span>
            <span style={{ fontWeight: 800, fontSize: 18 }}>3Market</span>
            <span style={{ fontSize: 11, color: COLORS.muted, fontStyle: "italic" }}>Tri Kolektiv</span>
            {backendOnline !== null && (
              <span style={{ fontSize: 11, color: backendOnline ? COLORS.green : COLORS.red, background: (backendOnline ? COLORS.green : COLORS.red) + "18", padding: "2px 8px", borderRadius: 20 }}>
                {backendOnline ? "● Live" : "⚠ Offline"}
              </span>
            )}
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <span style={{ fontSize: 13, color: COLORS.muted }}>👤 {user.username || user.email}</span>
            <button style={s.btn(COLORS.red, true)} onClick={logout}>Logout</button>
          </div>
        </div>
      </div>

      {/* Tabs */}
      <div style={{ borderBottom: `1px solid ${COLORS.border}` }}>
        <div style={{ ...s.wrap, display: "flex" }}>
          {["market", "wallet", "profile"].map((t) => (
            <button key={t} onClick={() => setTab(t)} style={{ background: "transparent", border: "none", borderBottom: tab === t ? `2px solid ${COLORS.accent}` : "2px solid transparent", color: tab === t ? COLORS.accent : COLORS.muted, padding: "14px 20px", cursor: "pointer", fontSize: 13, fontWeight: 700, textTransform: "capitalize" }}>
              {t === "market" ? "🛒 Market" : t === "wallet" ? "💰 Wallet" : "👤 Profile"}
            </button>
          ))}
        </div>
      </div>

      {/* Content */}
      <div style={{ ...s.wrap, padding: "24px 20px" }}>
        {tab === "market" && <MarketTab user={user} token={token} notify={notify} />}
        {tab === "wallet" && <WalletTab user={user} token={token} notify={notify} />}
        {tab === "profile" && (
          <div style={s.card}>
            <div style={{ fontWeight: 700, marginBottom: 16, fontSize: 18 }}>Profile</div>
            {[["Email", user.email], ["Username", user.username || "—"], ["Location", user.location || "—"], ["XMR user", user.monero_user ? "✅ Yes (+5% cashback)" : "No"]].map(([l, v]) => (
              <div key={l} style={{ display: "flex", justifyContent: "space-between", padding: "10px 0", borderBottom: `1px solid ${COLORS.border}`, fontSize: 14 }}>
                <span style={{ color: COLORS.muted }}>{l}</span>
                <span style={{ fontWeight: 600 }}>{v}</span>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}