import { signOut } from "@features/auth/api/auth.api.js";
import { authClient } from "@lib/auth.js";
import { Archive, Bell, Globe, Lock, LogOut, Mail, Moon, Shield, User } from "lucide-react";
import { useState } from "react";
import { useNavigate } from "react-router-dom";

function ProfileRoute() {
  const navigate = useNavigate();
  const { data: session } = authClient.useSession();
  const user = session?.user;
  const [signingOut, setSigningOut] = useState(false);

  const displayName = user?.name || "You";
  const email = user?.email || "—";
  const handle = `@${(user?.name || "you").toLowerCase().replace(/\s+/g, "")}`;
  const verified = !!user?.emailVerified;

  const handleSignOut = async () => {
    setSigningOut(true);
    try {
      await signOut();
      navigate("/login", { replace: true });
    } finally {
      setSigningOut(false);
    }
  };

  return (
    <div className="flex flex-col h-full bg-base text-fg">
      <ProfileHeader title="Profile" />

      <div className="flex-1 min-h-0 overflow-y-auto scroll-thin">
        <ProfileIdentity name={displayName} handle={handle} verified={verified} />

        <ProfileStats
          stats={[
            { label: "Conversations", value: "—" },
            { label: "Sent", value: "—" },
            { label: "Online", value: "1" },
          ]}
        />

        <SettingsGroup title="Account">
          <SettingsRow icon={User} title="Display name" value={displayName} />
          <SettingsRow icon={Mail} title="Email" value={email} />
          <SettingsRow icon={Shield} title="Email verified" value={verified ? "Yes" : "No"} />
        </SettingsGroup>

        <SettingsGroup title="Preferences">
          <SettingsRow icon={Bell} title="Notifications" rightToggle defaultOn />
          <SettingsRow icon={Moon} title="Appearance" value="Dark" />
          <SettingsRow icon={Globe} title="Language" value="English" />
        </SettingsGroup>

        <SettingsGroup title="Privacy & security">
          <SettingsRow icon={Lock} title="Read receipts" rightToggle />
          <SettingsRow icon={Archive} title="Archived conversations" value="0" />
        </SettingsGroup>

        <div className="px-4 pt-2 pb-6">
          <button
            type="button"
            onClick={handleSignOut}
            disabled={signingOut}
            className="w-full h-11 bg-transparent border border-line rounded-md text-error-fg font-sans text-[13px] font-medium cursor-pointer inline-flex items-center justify-center gap-2 hover:bg-hover transition-colors duration-fast disabled:opacity-50 disabled:cursor-not-allowed"
          >
            <LogOut size={14} strokeWidth={1.75} />
            <span>{signingOut ? "Signing out…" : "Sign out"}</span>
          </button>
          <div className="text-center mt-5 text-[11px] text-fg-tertiary font-mono">
            FluxChat v1.0.0
          </div>
        </div>
      </div>
    </div>
  );
}

window.ProfileRoute = ProfileRoute;