// -----------------------------------------------------------------------------
// Rent-Ka — Rental listings aggregator (Canada, outside Québec)
// Author: Simon-Pierre Boucher — contact@spboucher.ai
// pages/Profile.tsx: user profile — Groupe KA member card (KA-ID),
//   account information, actions (sign out, cookies, legal)
// -----------------------------------------------------------------------------
import { useRef, useEffect, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import {
  Me, Socials, deleteAvatar, fetchMe, logout, setPublicProfile,
  updateMyProfile, uploadAvatar,
} from "../api";
import {
  IcoBuilding, IcoCamera, IcoDoc, IcoFacebook, IcoHeart, IcoInstagram,
  IcoLinkedIn, IcoLock, IcoTikTok, IcoX, IcoYouTube,
} 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; a URL is left 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; icon: JSX.Element;
                       placeholder: string }[] = [
  { key: "instagram", label: "Instagram", icon: <IcoInstagram size={15} />, placeholder: "@handle or URL" },
  { key: "facebook", label: "Facebook", icon: <IcoFacebook size={15} />, placeholder: "profile or URL" },
  { key: "x", label: "X (Twitter)", icon: <IcoX size={15} />, placeholder: "@handle or URL" },
  { key: "linkedin", label: "LinkedIn", icon: <IcoLinkedIn size={15} />, placeholder: "profile or URL" },
  { key: "tiktok", label: "TikTok", icon: <IcoTikTok size={15} />, placeholder: "@handle or URL" },
  { key: "youtube", label: "YouTube", icon: <IcoYouTube size={15} />, placeholder: "channel or URL" },
];

/** Edit section: photo, display name, bio, contact info, social networks */
function ProfileEditor({ me, onSaved }: { me: Me; onSaved: () => void }) {
  const [form, setForm] = useState({
    display_name: me.display_name || "",
    bio: me.bio || "",
    city: me.city || "",
    phone: me.phone || "",
    website: me.website || "",
    socials: { ...me.socials } as Socials,
  });
  const [saving, setSaving] = useState(false);
  const [saved, setSaved] = useState(false);
  const [error, setError] = useState("");
  const [avatarBusy, setAvatarBusy] = useState(false);
  const fileRef = useRef<HTMLInputElement | null>(null);

  const save = async () => {
    setSaving(true);
    setError("");
    const res = await updateMyProfile(form);
    setSaving(false);
    if (!res.ok) { setError("Could not save — try again."); return; }
    setSaved(true);
    setTimeout(() => setSaved(false), 2000);
    onSaved();
  };

  const pickPhoto = async (f: File | undefined) => {
    if (!f) return;
    setAvatarBusy(true);
    setError("");
    const url = await uploadAvatar(f);
    setAvatarBusy(false);
    if (!url) { setError("Photo rejected — JPG/PNG/WebP image, 8 MB max."); return; }
    onSaved();
  };

  return (
    <section className="org-form profil-edit">
      <h3>Customize my profile</h3>

      {/* — photo — */}
      <div className="pe-avatar-row">
        {me.picture
          ? <img className="pe-avatar" src={me.picture} alt="" referrerPolicy="no-referrer" />
          : <span className="pe-avatar pe-avatar-empty">
              {(me.name || me.email).charAt(0).toUpperCase()}
            </span>}
        <div className="pe-avatar-actions">
          <button className="btn btn-ghost" disabled={avatarBusy}
            onClick={() => fileRef.current?.click()}>
            <IcoCamera size={14} /> {avatarBusy ? "Uploading…" : "Change photo"}
          </button>
          {me.avatar_url && (
            <button className="btn btn-ghost" disabled={avatarBusy}
              onClick={async () => { await deleteAvatar(); onSaved(); }}>
              Remove (back to Google)
            </button>
          )}
          <span className="pe-hint">JPG, PNG or WebP — cropped to a 512 px square.</span>
        </div>
        <input
          ref={fileRef} type="file" accept="image/*" hidden
          onChange={(e) => pickPhoto(e.target.files?.[0])}
        />
      </div>

      <div className="org-form-row">
        <label>
          <span>Display name</span>
          <input
            value={form.display_name} maxLength={80}
            placeholder={me.google_name || "Your name"}
            onChange={(e) => setForm({ ...form, display_name: e.target.value })}
          />
        </label>
        <label>
          <span>City</span>
          <input
            value={form.city} maxLength={60} placeholder="Toronto, Vancouver…"
            onChange={(e) => setForm({ ...form, city: e.target.value })}
          />
        </label>
      </div>

      <label>
        <span>Bio ({280 - form.bio.length} characters left)</span>
        <textarea
          value={form.bio} rows={3} maxLength={280}
          placeholder="Introduce yourself in a few words…"
          onChange={(e) => setForm({ ...form, bio: e.target.value })}
        />
      </label>

      <div className="org-form-row">
        <label>
          <span>Phone</span>
          <input
            value={form.phone} maxLength={40} placeholder="416 555-0123"
            onChange={(e) => setForm({ ...form, phone: e.target.value })}
          />
        </label>
        <label>
          <span>Website</span>
          <input
            value={form.website} maxLength={300} placeholder="https://…"
            onChange={(e) => setForm({ ...form, website: e.target.value })}
          />
        </label>
      </div>

      <h4 className="pe-socials-title">Social networks</h4>
      <div className="pe-socials">
        {SOCIAL_FIELDS.map((s) => (
          <label key={s.key} className="pe-social">
            <span className="pe-social-ico" title={s.label}>{s.icon}</span>
            <input
              value={form.socials[s.key] ?? ""} maxLength={200}
              placeholder={`${s.label} — ${s.placeholder}`}
              onChange={(e) => setForm({
                ...form,
                socials: { ...form.socials, [s.key]: e.target.value },
              })}
            />
          </label>
        ))}
      </div>

      {error && <p className="claim-error">{error}</p>}
      <button
        className={`btn btn-primary ${saved ? "pc-copy ok" : ""}`}
        disabled={saving} onClick={save}
      >
        {saved ? "✓ Saved" : saving ? "Saving…" : "Save my profile"}
      </button>
    </section>
  );
}

/** Profile managed at the Groupe KA HUB — READ ONLY (editing happens on
 *  groupe-ka.com/compte, one entry for all the platforms). */
function HubProfileSection({ me }: { me: Me }) {
  const socialLinks = SOCIAL_FIELDS.filter((s) => (me.socials?.[s.key] ?? "").trim());
  return (
    <section className="org-form profil-edit 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} years old</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}>
            {s.icon} {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="pe-hint">
        Your profile is managed at the group level: one entry, visible
        across all the platforms.
      </p>
    </section>
  );
}

export default function ProfilePage() {
  const [me, setMe] = useState<Me | null | undefined>(undefined); // undefined = loading
  const [copied, setCopied] = useState(false);
  const [isPublic, setIsPublic] = useState(false);
  const [linkCopied, setLinkCopied] = useState(false);
  const nav = useNavigate();

  useEffect(() => {
    fetchMe().then((m) => { setMe(m); setIsPublic(m?.public ?? false); });
  }, []);

  const publicUrl = me?.ka_id
    ? `${window.location.origin}/u/${me.ka_id}` : "";

  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: never mind */ }
  };

  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 to see <span className="hl">your profile</span>.</h1>
        <p className="lede">
          Create your account in one click with Google — you'll receive your
          <b>KA-ID</b> member identifier, valid across the whole Groupe KA
          ecosystem.
        </p>
        <a className="btn btn-primary" href="/api/auth/ka/login">
          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>

      {/* ——— Carte de membre Groupe KA ——— */}
      <div className="pc" role="img" aria-label={`Member card ${me.ka_id}`}>
        <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">Member 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>

      {/* ——— Informations ——— */}
      <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}</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>
        )}
        <div className="pg-item">
          <span className="pg-label">Profile</span>
          <span className="pg-value">
            {me.role === "locataire" ? "Tenant — I'm looking for a rental"
              : me.role === "gestionnaire" ? "Manager — I manage rentals"
              : <Link to="/welcome" className="mono">To choose →</Link>}
          </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>

      {me.profile_source === "groupe-ka" ? (
        <HubProfileSection me={me} />
      ) : (
        /* old account not yet linked to the hub: local editing kept */
        <ProfileEditor
          me={me}
          onSaved={() => fetchMe().then((m) => { setMe(m); setIsPublic(m?.public ?? false); })}
        />
      )}

      <p className="profil-note">
        Your <b>KA-ID</b> is your unique identifier in the{" "}
        <a href="https://www.groupe-ka.com" target="_blank" rel="noopener noreferrer">
          Groupe KA
        </a>{" "}
        ecosystem — it follows you across all the group's platforms. Rent-Ka
        keeps only this profile's information (and what you choose to add);
        nothing else, and never resold.
      </p>

      {/* ——— Profil public ——— */}
      {me.profile_source === "groupe-ka" ? (
        <section className="profil-public">
          <h3>Public profile</h3>
          <p>
            The visibility of your public page is managed at the Groupe KA
            level — it shows your name, photo, bio, city and social networks,
            <b> never your email or phone</b>.
          </p>
          <div className="pub-meta">
            <span className="stat-chip">
              {me.public ? "Public" : "Private"}
            </span>
          </div>
          {me.public && me.public_url && (
            <div className="public-link">
              <a href={me.public_url} target="_blank" rel="noopener noreferrer"
                 className="mono">
                {me.public_url.replace(/^https?:\/\//, "")}
              </a>
            </div>
          )}
          <div style={{ marginTop: 14 }}>
            <a className="btn btn-ghost"
               href="https://www.groupe-ka.com/compte"
               target="_blank" rel="noopener noreferrer">
              Manage on groupe-ka.com ↗
            </a>
          </div>
        </section>
      ) : (
      <section className="profil-public">
        <h3>Public profile</h3>
        <p>
          Enable your public page to share your member card — it shows your
          name, photo, bio, city and social networks, <b>never your email or
          phone</b>.
        </p>
        <div className="seg" role="group" aria-label="Public profile">
          {[[false, "Private"], [true, "Public"]].map(([v, l]) => (
            <button
              key={String(v)}
              className={isPublic === v ? "on" : ""}
              onClick={async () => {
                await setPublicProfile(v as boolean);
                setIsPublic(v as boolean);
              }}
            >
              {l as string}
            </button>
          ))}
        </div>
        {isPublic && (
          <div className="public-link">
            <a href={publicUrl} target="_blank" rel="noopener noreferrer" className="mono">
              {publicUrl.replace(/^https?:\/\//, "")}
            </a>
            <button
              className={`btn btn-ghost ${linkCopied ? "pc-copy ok" : ""}`}
              onClick={async () => {
                try {
                  await navigator.clipboard.writeText(publicUrl);
                  setLinkCopied(true);
                  setTimeout(() => setLinkCopied(false), 1800);
                } catch { /* clipboard unavailable */ }
              }}
            >
              {linkCopied ? "✓ Copied" : "Copy the link"}
            </button>
          </div>
        )}
      </section>
      )}

      {/* ——— Actions ——— */}
      <div className="profil-actions">
        {me.role === "locataire" && (
          <Link className="btn btn-primary" to="/favorites">
            <IcoHeart size={14} /> My saved rentals
          </Link>
        )}
        {me.role === "gestionnaire" && (
          <Link className="btn btn-primary" to="/manage">
            <IcoBuilding size={14} /> My manager page
          </Link>
        )}
        <Link className="btn btn-ghost" to="/welcome">Change profile</Link>
        <button
          className="btn btn-ghost"
          onClick={async () => { await logout(); nav("/"); window.location.reload(); }}
        >
          Sign out
        </button>
        <button
          className="btn btn-ghost"
          onClick={() => window.dispatchEvent(new Event("rentka:openConsent"))}
        >
          Manage cookies
        </button>
        <Link className="btn btn-ghost" to="/terms"><IcoDoc size={14} /> Terms</Link>
        <Link className="btn btn-ghost" to="/privacy"><IcoLock size={14} /> Privacy</Link>
      </div>
    </div>
  );
}