// -----------------------------------------------------------------------------
// House-Ka — Homes-for-sale aggregator (Canada outside Québec)
// Author: Simon-Pierre Boucher — contact@spboucher.ai
// pages/Account.tsx : user profile — Groupe KA membership card (KA-ID),
//   read-only hub profile (edited at groupe-ka.com), favourites, actions
// -----------------------------------------------------------------------------
import { useEffect, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import { FavItem, fetchFavorites, fetchMe, logout } from "../api";
import type { Socials, User } from "../api";
import { Ico } from "../components/Icons";

const fmtEpoch = (ts: number | null | undefined): string => {
  if (!ts) return "—";
  return new Date(ts * 1000).toLocaleDateString("en-CA", {
    day: "numeric", month: "long", year: "numeric",
  });
};

const SOCIAL_BASE: Record<string, string> = {
  instagram: "https://www.instagram.com/",
  facebook: "https://www.facebook.com/",
  x: "https://x.com/",
  linkedin: "https://www.linkedin.com/in/",
  tiktok: "https://www.tiktok.com/@",
  youtube: "https://www.youtube.com/@",
};

/** "@handle" or "handle" -> full platform URL; URLs kept as-is */
function socialUrl(key: string, value: string): string {
  const v = value.trim();
  if (/^https?:\/\//i.test(v)) return v;
  if (key === "website") return `https://${v}`;
  return (SOCIAL_BASE[key] ?? "https://") + v.replace(/^@/, "");
}

const SOCIAL_FIELDS: { key: keyof Socials; label: string }[] = [
  { key: "instagram", label: "Instagram" },
  { key: "facebook", label: "Facebook" },
  { key: "x", label: "X (Twitter)" },
  { key: "linkedin", label: "LinkedIn" },
  { key: "tiktok", label: "TikTok" },
  { key: "youtube", label: "YouTube" },
];

/** Profile managed at the Groupe KA HUB — READ-ONLY (edit it once at
 *  groupe-ka.com/compte, visible on every Groupe KA platform). */
function HubProfileSection({ me }: { me: User }) {
  const socialLinks = SOCIAL_FIELDS.filter((s) => (me.socials?.[s.key] ?? "").trim());
  return (
    <section className="hub-profile">
      <h3>My Groupe KA profile</h3>
      {me.bio && <p className="hub-bio">{me.bio}</p>}
      <div className="pub-meta">
        {(me.job_title || me.company) && (
          <span className="stat-chip">
            {[me.job_title, me.company].filter(Boolean).join(" · ")}
          </span>
        )}
        {me.city && <span className="stat-chip">{me.city}</span>}
        {me.age != null && <span className="stat-chip">{me.age} yrs</span>}
        {me.website && (
          <a className="stat-chip" href={socialUrl("website", me.website)}
             target="_blank" rel="noopener noreferrer">Website ↗</a>
        )}
        {socialLinks.map((s) => (
          <a key={s.key} className="stat-chip hub-social-chip"
             href={socialUrl(s.key, me.socials![s.key]!)}
             target="_blank" rel="noopener noreferrer" title={s.label}>
            <Ico name={s.key} size={15} /> {s.label}
          </a>
        ))}
      </div>
      <div>
        <a className="btn btn-primary"
           href="https://www.groupe-ka.com/compte"
           target="_blank" rel="noopener noreferrer">
          Edit my profile on groupe-ka.com ↗
        </a>
      </div>
      <p className="hub-hint">
        Your profile is managed at the group level: enter it once, visible on
        every Groupe KA platform.
      </p>
    </section>
  );
}

/** House-Ka favourites from the "My Ka universe" central store. */
function FavouritesSection() {
  const [items, setItems] = useState<FavItem[] | null>(null);
  useEffect(() => {
    fetchFavorites().then((f) => setItems(f.items)).catch(() => setItems([]));
  }, []);
  if (items === null || items.length === 0) return null;
  return (
    <section className="hub-profile">
      <h3>My favourites ({items.length})</h3>
      <div className="dups-list">
        {items.map((f) => (
          <Link key={f.item_id} className="dup-item" to={f.url}>
            <span className="dup-src">{f.price_label}</span>
            <span className="dup-broker">{f.title}{f.subtitle ? ` — ${f.subtitle}` : ""}</span>
            <span className="dup-go">See the listing <Ico name="arrow" size={13} /></span>
          </Link>
        ))}
      </div>
      <p className="hub-hint">
        Your ♥ favourites follow you across the whole Groupe KA ecosystem —
        manage them on <a href="https://www.groupe-ka.com/mon-ka" target="_blank"
        rel="noopener noreferrer">groupe-ka.com/mon-ka</a>.
      </p>
    </section>
  );
}

export default function AccountPage() {
  const [me, setMe] = useState<User | null | undefined>(undefined); // undefined = loading
  const [copied, setCopied] = useState(false);
  const nav = useNavigate();

  useEffect(() => {
    document.title = "My account | House-Ka";
    fetchMe().then((r) => setMe(r.user)).catch(() => setMe(null));
  }, []);

  const copyKaId = async () => {
    if (!me?.ka_id) return;
    try {
      await navigator.clipboard.writeText(me.ka_id);
      setCopied(true);
      setTimeout(() => setCopied(false), 1800);
    } catch { /* clipboard unavailable: too bad */ }
  };

  if (me === undefined) {
    return <div className="container profil"><div className="notice">Loading…</div></div>;
  }

  if (me === null) {
    return (
      <div className="container profil">
        <span className="kicker">My account</span>
        <h1>Sign in for <span className="hl">your profile</span>.</h1>
        <p className="lede">
          Sign in with your <b>KA ID</b> account — you get your member
          identifier, valid across the whole Groupe KA ecosystem.
        </p>
        <a className="btn btn-primary" href="/api/auth/ka/login?next=%2Faccount">
          Sign in with KA ID
        </a>
      </div>
    );
  }

  return (
    <div className="container profil">
      <span className="kicker">My account</span>
      <h1>
        {me.name ? <>Hi, <span className="hl">{me.name.split(" ")[0]}</span>.</>
                 : <>Your <span className="hl">profile</span>.</>}
      </h1>

      {/* ——— Groupe KA membership card ——— */}
      <div className="pc" role="img" aria-label={`Membership card ${me.ka_id || me.sub}`}>
        <div className="pc-watermark" aria-hidden="true">KA</div>
        <div className="pc-head">
          <span className="pc-brand">Groupe <span className="pc-ka">KA</span></span>
          <span className="pc-label">Membership card · Groupe KA</span>
        </div>
        <div className="pc-id-block">
          <span className="pc-id-label">KA-ID</span>
          <span className="pc-id">{me.ka_id || "—"}</span>
        </div>
        <div className="pc-foot">
          <div className="pc-holder">
            <span className="pc-holder-name">{me.name || me.email}</span>
            {me.role_label && (
              <span className="pc-role-badge">{me.role_label}</span>
            )}
            <span className="pc-holder-since">Member since {fmtEpoch(me.created_at)}</span>
          </div>
          {me.picture && (
            <img className="pc-avatar" src={me.picture} alt="" referrerPolicy="no-referrer" />
          )}
        </div>
        <div className="pc-strip" aria-hidden="true">
          {Array.from({ length: 28 }).map((_, i) => <i key={i} />)}
        </div>
      </div>

      <button className={`btn btn-ghost pc-copy ${copied ? "ok" : ""}`} onClick={copyKaId}>
        {copied ? "✓ Copied" : "Copy my KA-ID"}
      </button>

      {/* ——— Details ——— */}
      <section className="profil-grid">
        <div className="pg-item">
          <span className="pg-label">Name</span>
          <span className="pg-value">{me.name || "—"}</span>
        </div>
        <div className="pg-item">
          <span className="pg-label">Email</span>
          <span className="pg-value">{me.email || "—"}</span>
        </div>
        <div className="pg-item">
          <span className="pg-label">Member ID</span>
          <span className="pg-value mono">{me.ka_id || me.sub}</span>
        </div>
        <div className="pg-item">
          <span className="pg-label">Sign-in</span>
          <span className="pg-value">
            {me.provider === "ka-id" ? "KA ID (groupe-ka.com)" : "Google account"}
          </span>
        </div>
        {me.city && (
          <div className="pg-item">
            <span className="pg-label">City</span>
            <span className="pg-value">{me.city}</span>
          </div>
        )}
        {me.role_label && (
          <div className="pg-item">
            <span className="pg-label">Status</span>
            <span className="pg-value">{me.role_label}</span>
          </div>
        )}
        <div className="pg-item">
          <span className="pg-label">Member since</span>
          <span className="pg-value">{fmtEpoch(me.created_at)}</span>
        </div>
        <div className="pg-item">
          <span className="pg-label">Last sign-in</span>
          <span className="pg-value">{fmtEpoch(me.last_login)}</span>
        </div>
      </section>

      <FavouritesSection />

      {me.profile_source === "groupe-ka" && <HubProfileSection me={me} />}

      {me.profile_source === "groupe-ka" && me.public && me.public_url && (
        <p className="profil-note">
          Your public profile:{" "}
          <a href={me.public_url} target="_blank" rel="noopener noreferrer" className="mono">
            {me.public_url.replace(/^https?:\/\//, "")}
          </a>{" "}
          — visibility is managed on groupe-ka.com/compte.
        </p>
      )}

      <p className="profil-note">
        Your <b>KA-ID</b> is your unique identifier across the{" "}
        <a href="https://www.groupe-ka.com" target="_blank" rel="noopener noreferrer">
          Groupe KA
        </a>{" "}
        ecosystem — it follows you on every platform of the group. House-Ka
        keeps only the information on this profile; nothing else, never sold.
      </p>

      {/* ——— Actions ——— */}
      <div className="profil-actions">
        <button
          className="btn btn-ghost"
          onClick={async () => { await logout(); nav("/"); window.location.reload(); }}
        >
          Sign out
        </button>
      </div>
    </div>
  );
}