arcadia-admin/app/routes/profile.tsx

import { useCallback, useEffect, useState } from "react"
import { Check, RefreshCw, Trash2 } from "lucide-react"

import { ArcadiaError, useArcadiaClient } from "@crema/arcadia-client"
import { AlertBanner } from "@crema/feedback-ui"

import { AppShell } from "~/components/layout/app-shell"
import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar"
import { Badge } from "~/components/ui/badge"
import { Button } from "~/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "~/components/ui/card"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "~/components/ui/dropdown-menu"
import { Input } from "~/components/ui/input"
import { Textarea } from "~/components/ui/textarea"
import { useAgents } from "~/lib/agents"
import { pageTitle } from "~/lib/page-meta"
import {
  profileInitials,
  resetProfile,
  saveProfile,
  useProfile,
  type Profile,
} from "~/lib/profile"
import { getUser, updateUser, type User } from "~/lib/arcadia/users"
import { updateSessionUser, useSession } from "~/lib/session"

export const meta = () => pageTitle("Profile")

interface AccountDraft {
  first_name: string
  last_name: string
  email: string
}

export default function ProfileRoute() {
  const session = useSession()
  const arcadia = useArcadiaClient()
  const profile = useProfile()
  const agents = useAgents()

  // Local preferences (avatar, title, bio, signature, default agent).
  const [prefs, setPrefs] = useState<Profile>(profile)
  const [prefsSavedAt, setPrefsSavedAt] = useState<number | null>(null)
  useEffect(() => {
    setPrefs(profile)
  }, [profile])
  const prefsDirty = JSON.stringify(prefs) !== JSON.stringify(profile)

  // Arcadia account.
  const [account, setAccount] = useState<User | null>(null)
  const [accountDraft, setAccountDraft] = useState<AccountDraft>({
    first_name: "",
    last_name: "",
    email: "",
  })
  const [accountLoading, setAccountLoading] = useState(true)
  const [accountSaving, setAccountSaving] = useState(false)
  const [accountSavedAt, setAccountSavedAt] = useState<number | null>(null)
  const [accountError, setAccountError] = useState<string | null>(null)

  const loadAccount = useCallback(async () => {
    if (!session) return
    setAccountLoading(true)
    setAccountError(null)
    try {
      const u = await getUser(arcadia, session.userId)
      setAccount(u)
      setAccountDraft({
        first_name: u.first_name ?? "",
        last_name: u.last_name ?? "",
        email: u.email,
      })
    } catch (err) {
      setAccountError(
        err instanceof ArcadiaError ? err.message : "Failed to load account.",
      )
    } finally {
      setAccountLoading(false)
    }
  }, [arcadia, session])

  useEffect(() => {
    loadAccount()
  }, [loadAccount])

  const accountDirty =
    !!account &&
    (accountDraft.first_name !== (account.first_name ?? "") ||
      accountDraft.last_name !== (account.last_name ?? "") ||
      accountDraft.email !== account.email)

  const saveAccount = async () => {
    if (!account) return
    setAccountSaving(true)
    setAccountError(null)
    try {
      const updated = await updateUser(arcadia, account.id, {
        first_name: accountDraft.first_name || null,
        last_name: accountDraft.last_name || null,
        email: accountDraft.email,
      })
      setAccount(updated)
      updateSessionUser({ name: updated.full_name, email: updated.email })
      setAccountSavedAt(Date.now())
    } catch (err) {
      setAccountError(
        err instanceof ArcadiaError ? err.message : "Save failed.",
      )
    } finally {
      setAccountSaving(false)
    }
  }

  // Local prefs handlers.
  const initials = profileInitials(
    [accountDraft.first_name, accountDraft.last_name].filter(Boolean).join(" ") ||
      account?.full_name ||
      session?.name ||
      "",
  )

  const onPickAvatar = (file: File | null) => {
    if (!file) {
      setPrefs((d) => ({ ...d, avatarUrl: "" }))
      return
    }
    const reader = new FileReader()
    reader.onload = () => {
      const result = reader.result
      if (typeof result === "string")
        setPrefs((d) => ({ ...d, avatarUrl: result }))
    }
    reader.readAsDataURL(file)
  }

  const savePrefs = () => {
    saveProfile(prefs)
    setPrefsSavedAt(Date.now())
  }

  const defaultAgent = agents.find((a) => a.id === prefs.defaultAgentId) ?? null

  return (
    <AppShell>
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-3">
            Account
            {account?.email_verified ? (
              <Badge variant="default">Verified</Badge>
            ) : account ? (
              <Badge variant="secondary">Unverified</Badge>
            ) : null}
            {account?.status && account.status !== "active" ? (
              <Badge variant="destructive">{account.status}</Badge>
            ) : null}
          </CardTitle>
          <CardDescription>
            Your arcadia identity. Changes are saved to the platform and reflected
            anywhere your name or email appears.
          </CardDescription>
        </CardHeader>
        <CardContent className="flex flex-col gap-6">
          {accountError ? (
            <AlertBanner
              variant="error"
              dismissible
              onDismiss={() => setAccountError(null)}
            >
              {accountError}
            </AlertBanner>
          ) : null}

          <div className="flex flex-wrap items-center gap-4">
            <Avatar className="size-20 ring-2 ring-primary/30">
              {prefs.avatarUrl ? (
                <AvatarImage src={prefs.avatarUrl} alt={accountDraft.email} />
              ) : null}
              <AvatarFallback className="bg-primary text-lg font-semibold text-primary-foreground">
                {initials}
              </AvatarFallback>
            </Avatar>
            <div className="flex flex-col gap-1 text-sm">
              <span className="font-medium">
                {account?.full_name || accountDraft.email || "—"}
              </span>
              {account ? (
                <>
                  <span className="text-xs text-muted-foreground">
                    Tenant <code className="font-mono">{account.tenant_id}</code> ·
                    ID <code className="font-mono">{account.id}</code>
                  </span>
                  <span className="text-xs text-muted-foreground">
                    Last sign-in{" "}
                    {account.last_sign_in_at
                      ? new Date(account.last_sign_in_at).toLocaleString()
                      : "—"}
                  </span>
                </>
              ) : null}
            </div>
          </div>

          <div className="grid gap-4 md:grid-cols-2">
            <Field label="First name">
              <Input
                data-action="profile-first-name"
                value={accountDraft.first_name}
                onChange={(e) =>
                  setAccountDraft((d) => ({ ...d, first_name: e.target.value }))
                }
                autoComplete="given-name"
                disabled={accountLoading || accountSaving}
              />
            </Field>
            <Field label="Last name">
              <Input
                data-action="profile-last-name"
                value={accountDraft.last_name}
                onChange={(e) =>
                  setAccountDraft((d) => ({ ...d, last_name: e.target.value }))
                }
                autoComplete="family-name"
                disabled={accountLoading || accountSaving}
              />
            </Field>
            <Field
              label="Email"
              hint="Updating your email may require re-verification."
            >
              <Input
                data-action="profile-email"
                type="email"
                value={accountDraft.email}
                onChange={(e) =>
                  setAccountDraft((d) => ({ ...d, email: e.target.value }))
                }
                autoComplete="email"
                disabled={accountLoading || accountSaving}
              />
            </Field>
          </div>

          <div className="flex flex-wrap items-center gap-2">
            <Button
              data-action="profile-account-save"
              onClick={saveAccount}
              disabled={!accountDirty || accountSaving || accountLoading}
            >
              {accountSaving ? (
                <RefreshCw className="size-4 animate-spin" />
              ) : null}
              Save account
            </Button>
            <Button
              data-action="profile-account-revert"
              variant="ghost"
              onClick={() => {
                if (!account) return
                setAccountDraft({
                  first_name: account.first_name ?? "",
                  last_name: account.last_name ?? "",
                  email: account.email,
                })
              }}
              disabled={!accountDirty || accountSaving}
            >
              Revert
            </Button>
            <Button
              data-action="profile-account-refresh"
              variant="ghost"
              onClick={loadAccount}
              disabled={accountLoading}
            >
              <RefreshCw
                className={accountLoading ? "size-4 animate-spin" : "size-4"}
              />
              Refresh
            </Button>
            {accountSavedAt && !accountDirty && (
              <span className="inline-flex items-center gap-1 text-sm text-emerald-700 dark:text-emerald-400">
                <Check className="size-4" /> Saved.
              </span>
            )}
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>Preferences</CardTitle>
          <CardDescription>
            Local-only settings stored in this browser — avatar, bio, signature,
            and the assistant's default persona.
          </CardDescription>
        </CardHeader>
        <CardContent className="flex flex-col gap-6">
          <div className="flex flex-col gap-2">
            <span className="text-sm font-medium">Avatar</span>
            <div className="flex items-center gap-3">
              <label className="inline-flex w-fit cursor-pointer items-center gap-2 rounded-md border bg-background px-3 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground">
                <input
                  data-action="profile-avatar-upload"
                  type="file"
                  accept="image/*"
                  className="sr-only"
                  onChange={(e) => onPickAvatar(e.target.files?.[0] ?? null)}
                />
                Upload avatar
              </label>
              {prefs.avatarUrl && (
                <Button
                  data-action="profile-avatar-remove"
                  variant="ghost"
                  size="sm"
                  onClick={() => onPickAvatar(null)}
                  className="text-muted-foreground"
                >
                  <Trash2 className="size-3.5" /> Remove
                </Button>
              )}
            </div>
            <span className="text-xs text-muted-foreground">
              PNG, JPG, or SVG. Stored locally as a data URL.
            </span>
          </div>

          <div className="grid gap-4 md:grid-cols-2">
            <Field label="Title" hint="Your role at work.">
              <Input
                data-action="profile-title"
                value={prefs.title}
                onChange={(e) =>
                  setPrefs((d) => ({ ...d, title: e.target.value }))
                }
                placeholder="e.g. Platform admin"
              />
            </Field>
            <Field
              label="Default agent"
              hint="Used as the active persona on first load."
            >
              <DropdownMenu>
                <DropdownMenuTrigger
                  data-action="profile-default-agent"
                  className="inline-flex h-9 items-center justify-between gap-2 rounded-md border bg-background px-3 text-sm hover:bg-accent hover:text-accent-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                >
                  <span className="truncate">
                    {defaultAgent ? (
                      <>
                        <span className="font-medium">{defaultAgent.name}</span>
                        <span className="text-muted-foreground">
                          {" "}
                          — {defaultAgent.role}
                        </span>
                      </>
                    ) : (
                      "Use first available"
                    )}
                  </span>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="start" className="w-64">
                  <DropdownMenuItem
                    onClick={() =>
                      setPrefs((d) => ({ ...d, defaultAgentId: "" }))
                    }
                    data-state={!prefs.defaultAgentId ? "checked" : undefined}
                  >
                    First available
                  </DropdownMenuItem>
                  {agents.map((a) => (
                    <DropdownMenuItem
                      key={a.id}
                      onClick={() =>
                        setPrefs((d) => ({ ...d, defaultAgentId: a.id }))
                      }
                      data-state={
                        prefs.defaultAgentId === a.id ? "checked" : undefined
                      }
                      className="flex flex-col items-start"
                    >
                      <span className="font-medium">{a.name}</span>
                      <span className="text-xs text-muted-foreground">
                        {a.role}
                      </span>
                    </DropdownMenuItem>
                  ))}
                </DropdownMenuContent>
              </DropdownMenu>
            </Field>
          </div>

          <Field
            label="Bio"
            hint="A short blurb the assistant can reference (e.g. 'I work mostly in TypeScript')."
          >
            <Textarea
              data-action="profile-bio"
              value={prefs.bio}
              onChange={(e) => setPrefs((d) => ({ ...d, bio: e.target.value }))}
              rows={3}
              placeholder="Tell the assistant about you."
            />
          </Field>

          <Field
            label="Signature"
            hint="Appended automatically when you ask the assistant to draft an email or note."
          >
            <Textarea
              data-action="profile-signature"
              value={prefs.signature}
              onChange={(e) =>
                setPrefs((d) => ({ ...d, signature: e.target.value }))
              }
              rows={3}
              placeholder={`Cheers,\n${account?.full_name || "Your name"}`}
            />
          </Field>

          <div className="flex flex-wrap items-center gap-2">
            <Button
              data-action="profile-prefs-save"
              onClick={savePrefs}
              disabled={!prefsDirty}
            >
              Save preferences
            </Button>
            <Button
              data-action="profile-prefs-revert"
              variant="ghost"
              onClick={() => setPrefs(profile)}
              disabled={!prefsDirty}
            >
              Revert
            </Button>
            <Button
              data-action="profile-prefs-reset"
              variant="ghost"
              onClick={() => {
                resetProfile()
                setPrefsSavedAt(Date.now())
              }}
            >
              Reset to defaults
            </Button>
            {prefsSavedAt && !prefsDirty && (
              <span className="inline-flex items-center gap-1 text-sm text-emerald-700 dark:text-emerald-400">
                <Check className="size-4" /> Saved.
              </span>
            )}
          </div>
        </CardContent>
      </Card>
    </AppShell>
  )
}

function Field({
  label,
  hint,
  children,
}: {
  label: string
  hint?: string
  children: React.ReactNode
}) {
  return (
    <label className="flex flex-col gap-1.5">
      <span className="text-sm font-medium">{label}</span>
      {children}
      {hint && <span className="text-xs text-muted-foreground">{hint}</span>}
    </label>
  )
}