import { AppShell } from "@/components/app-shell";
import { Avatar } from "@/components/avatar";
import { EmptyState, PageHeader, Panel, StatusDot } from "@/components/ui";
import { changePassword, updateProfile } from "@/lib/profile-actions";
import { getShellContext } from "@/lib/shell";
import { requireCurrentUser } from "@/lib/session";
import { getAppSettings } from "@/lib/settings";
import { requireInitialSetup } from "@/lib/setup";

export const dynamic = "force-dynamic";

export default async function AccountSettingsPage({ searchParams }: { searchParams: Promise<{ error?: string; saved?: string }> }) {
  await requireInitialSetup();
  const user = await requireCurrentUser();
  const shell = await getShellContext(user);
  const settings = await getAppSettings();
  const { error, saved } = await searchParams;

  return (
    <AppShell active="Overview" {...shell}>
      <PageHeader
        title="Settings"
        description="Account preferences, display name, avatar upload, and session options."
        meta={
          <>
            <StatusDot tone="good" label="account loaded" />
            <StatusDot tone="info" label={`${settings.maxAvatarUploadMb} MB avatar limit`} />
          </>
        }
      />

      <section className="split-grid">
        <Panel title="Profile Settings" eyebrow="Account">
          {saved ? <p className="form-success">Profile updated.</p> : null}
          {error === "avatar" ? <p className="form-error">Upload a PNG, JPG, WEBP, or GIF below {settings.maxAvatarUploadMb} MB.</p> : null}
          {error === "password" ? <p className="form-error">Check your current password and use a matching new password with at least 10 characters.</p> : null}
          <form className="form compact-form" action={updateProfile} encType="multipart/form-data">
            <div className="profile-block">
              <Avatar name={user.displayName || user.username} src={user.avatarUrl} size={72} />
              <div className="row-title">
                <strong>{user.displayName || user.username}</strong>
                <span>@{user.username}</span>
              </div>
            </div>
            <label>
              Display name
              <input className="input" name="displayName" defaultValue={user.displayName || user.username} maxLength={80} />
            </label>
            <label>
              Profile picture
              <input className="input" name="avatar" type="file" accept="image/png,image/jpeg,image/webp,image/gif" />
            </label>
            <button className="button primary" type="submit">Save profile</button>
          </form>
        </Panel>
        <Panel title="Sessions" eyebrow="Security">
          <EmptyState title="Only the current session is tracked" description="The active session is managed by a signed HTTP-only cookie; device-level session history still needs a session table." />
        </Panel>
        <Panel title="Password" eyebrow="Security">
          {saved === "password" ? <p className="form-success">Password changed.</p> : null}
          <form className="form compact-form" action={changePassword}>
            <label>
              Current password
              <input className="input" name="currentPassword" type="password" autoComplete="current-password" required />
            </label>
            <label>
              New password
              <input className="input" name="newPassword" type="password" minLength={10} autoComplete="new-password" required />
            </label>
            <label>
              Confirm new password
              <input className="input" name="confirmPassword" type="password" minLength={10} autoComplete="new-password" required />
            </label>
            <button className="button primary" type="submit">Change password</button>
          </form>
        </Panel>
      </section>
    </AppShell>
  );
}
