llink/js/src/features/settings-page.tsx

import { useNavigate } from "react-router-dom";
import { ChevronRight, LogOut, User, Info, Shield } from "lucide-react";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Separator } from "@/components/ui/separator";
import { WindowControls } from "@/components/window-controls";
import { Button } from "@/components/ui/button";
import { Muted } from "@/components/ui/typography";
import { ScrollArea } from "@/components/ui/scroll-area";
import { useAuthStore } from "@/stores/auth-store";
import { ArrowLeft } from "lucide-react";

interface SettingsRowProps {
  icon: React.ReactNode;
  label: string;
  detail?: string;
  onClick?: () => void;
  destructive?: boolean;
}

function SettingsRow({
  icon,
  label,
  detail,
  onClick,
  destructive,
}: SettingsRowProps) {
  return (
    <button
      type="button"
      onClick={onClick}
      className={`flex w-full items-center gap-3 px-4 py-3 text-left transition-colors hover:bg-accent ${destructive ? "text-destructive" : ""}`}
    >
      <span className="text-muted-foreground flex size-5 items-center justify-center">
        {icon}
      </span>
      <span className="min-w-0 flex-1 text-sm font-medium">{label}</span>
      {detail && <Muted className="text-xs">{detail}</Muted>}
      {onClick && !destructive && (
        <ChevronRight className="text-muted-foreground size-4" />
      )}
    </button>
  );
}

function SettingsGroup({
  title,
  children,
}: {
  title: string;
  children: React.ReactNode;
}) {
  return (
    <div>
      <p className="text-muted-foreground px-4 pb-1 pt-4 text-xs font-medium uppercase tracking-wider">
        {title}
      </p>
      <div>{children}</div>
    </div>
  );
}

export default function SettingsPage() {
  const navigate = useNavigate();
  const user = useAuthStore((s) => s.user);
  const signOut = useAuthStore((s) => s.signOut);

  const initials = user?.email_prefix?.slice(0, 2).toUpperCase() ?? "?";

  return (
    <div className="flex h-screen flex-col">
      <div className="drag-region flex items-center gap-3 border-b px-3 py-1">
        <WindowControls />
        <Button
          variant="ghost"
          size="sm"
          className="no-drag text-muted-foreground"
          onClick={() => navigate(-1)}
        >
          <ArrowLeft className="size-3.5" />
        </Button>
        <span className="text-sm font-medium">Settings</span>
        <div className="flex-1" />
      </div>

      <ScrollArea className="flex-1">
        {/* Profile header */}
        <div className="flex items-center gap-3 px-4 py-5">
          <Avatar size="lg">
            <AvatarFallback className="bg-primary/10 text-primary font-medium">
              {initials}
            </AvatarFallback>
          </Avatar>
          <div className="min-w-0 flex-1">
            <p className="truncate text-sm font-medium">
              {user?.email_prefix}
            </p>
            <Muted className="text-xs">{user?.email}</Muted>
          </div>
        </div>

        <Separator />

        <SettingsGroup title="Account">
          <SettingsRow
            icon={<User className="size-4" />}
            label="Profile"
            detail={user?.email_prefix}
          />
          <Separator className="mx-4" />
          <SettingsRow
            icon={<Shield className="size-4" />}
            label="Privacy"
          />
        </SettingsGroup>

        <Separator className="mt-4" />

        <SettingsGroup title="About">
          <SettingsRow
            icon={<Info className="size-4" />}
            label="Version"
            detail="1.0.0"
          />
        </SettingsGroup>

        <Separator className="mt-4" />

        <div className="py-4">
          <SettingsRow
            icon={<LogOut className="size-4" />}
            label="Sign out"
            onClick={signOut}
            destructive
          />
        </div>
      </ScrollArea>
    </div>
  );
}