// -----------------------------------------------------------------------------
// Rent-Ka — Rental listings aggregator (Canada, outside Québec)
// Author: Simon-Pierre Boucher — contact@spboucher.ai
// pages/PublicProfile.tsx: PUBLIC member profile — /u/{ka_id}
//   Shareable member card (name, avatar, seniority, KA-ID) — never the
//   email. Visible only if the member enabled their public profile.
// -----------------------------------------------------------------------------
import { useEffect, useState } from "react";
import { Link, useParams } from "react-router-dom";
import { PublicProfile, Socials, fetchPublicProfile } from "../api";
import {
  IcoCompass, IcoFacebook, IcoInstagram, IcoLinkedIn, IcoTikTok, IcoX,
  IcoYouTube,
} from "../components/Icons";

const SOCIAL_META: { key: keyof Socials; label: string; icon: JSX.Element }[] = [
  { key: "instagram", label: "Instagram", icon: <IcoInstagram size={17} /> },
  { key: "facebook", label: "Facebook", icon: <IcoFacebook size={17} /> },
  { key: "x", label: "X (Twitter)", icon: <IcoX size={17} /> },
  { key: "linkedin", label: "LinkedIn", icon: <IcoLinkedIn size={17} /> },
  { key: "tiktok", label: "TikTok", icon: <IcoTikTok size={17} /> },
  { key: "youtube", label: "YouTube", icon: <IcoYouTube size={17} /> },
];

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

export default function PublicProfilePage() {
  const { kaId = "" } = useParams();
  const [profile, setProfile] = useState<PublicProfile | null | undefined>(undefined);

  useEffect(() => {
    fetchPublicProfile(kaId).then(setProfile).catch(() => setProfile(null));
  }, [kaId]);

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

  if (profile === null) {
    return (
      <div className="container notice">
        <div className="big"><IcoCompass size={40} /></div>
        <h2>Profile not found</h2>
        <p>This member does not exist, or their profile is not public.</p>
        <Link className="btn btn-primary" to="/">Explore rentals</Link>
      </div>
    );
  }

  return (
    <div className="container profil">
      <span className="kicker">Member profile</span>
      <h1>
        <span className="hl">{profile.name || "Rent-Ka member"}</span>
      </h1>

      <div className="pc" role="img" aria-label={`Member card ${profile.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">{profile.ka_id}</span>
        </div>
        <div className="pc-foot">
          <div className="pc-holder">
            <span className="pc-holder-name">{profile.name || "Rent-Ka member"}</span>
            {profile.role_label && (
              <span className="pc-role-badge">{profile.role_label}</span>
            )}
            <span className="pc-holder-since">Member since {fmtEpoch(profile.created_at)}</span>
          </div>
          {profile.picture && (
            <img className="pc-avatar" src={profile.picture} alt="" referrerPolicy="no-referrer" />
          )}
        </div>
        <div className="pc-strip" aria-hidden="true">
          {Array.from({ length: 28 }).map((_, i) => <i key={i} />)}
        </div>
      </div>

      {(profile.bio || profile.city || profile.role || profile.job_title
        || profile.company || profile.role_label) && (
        <section className="pub-about">
          {profile.bio && <p className="pub-bio">{profile.bio}</p>}
          <div className="pub-meta">
            {(profile.job_title || profile.company) && (
              <span className="stat-chip">
                {[profile.job_title, profile.company].filter(Boolean).join(" · ")}
              </span>
            )}
            {profile.role_label && (
              <span className="stat-chip">{profile.role_label}</span>
            )}
            {profile.city && <span className="stat-chip">{profile.city}</span>}
            {profile.age != null && (
              <span className="stat-chip">{profile.age} years old</span>
            )}
            {profile.role === "gestionnaire" && (
              <span className="stat-chip">Rental manager</span>
            )}
            {profile.role === "locataire" && (
              <span className="stat-chip">Looking for a rental</span>
            )}
            {profile.website && (
              <a className="stat-chip" href={socialUrl("website", profile.website)}
                 target="_blank" rel="noopener noreferrer">Website ↗</a>
            )}
          </div>
        </section>
      )}

      {Object.keys(profile.socials || {}).length > 0 && (
        <div className="pub-socials">
          {SOCIAL_META.filter((s) => profile.socials[s.key]).map((s) => (
            <a
              key={s.key}
              className="pub-social"
              href={socialUrl(s.key, profile.socials[s.key]!)}
              target="_blank" rel="noopener noreferrer"
              aria-label={s.label} title={s.label}
            >
              {s.icon}
            </a>
          ))}
        </div>
      )}

      <p className="profil-note">
        Member of <b>Rent-Ka</b>, the rental listings aggregator of{" "}
        <a href="https://www.groupe-ka.com" target="_blank" rel="noopener noreferrer">
          Groupe KA
        </a>.
      </p>

      <div className="profil-actions">
        <Link className="btn btn-primary" to="/">Explore rentals</Link>
        <a className="btn btn-ghost" href="https://www.groupe-ka.com/connexion" target="_blank" rel="noopener noreferrer">Create my account</a>
      </div>
    </div>
  );
}