import { getSeededOperator } from "@/lib/operator";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
import { ThemeToggle } from "@/components/theme-toggle";
import { NotificationsToggle } from "@/components/notifications-toggle";
import { PageShell } from "@/components/page-shell";

export default async function SettingsPage() {
  const op = await getSeededOperator();
  return (
    <PageShell title="Settings" narrow>
      <Card>
        <CardHeader>
          <CardTitle>Operator</CardTitle>
        </CardHeader>
        <CardContent className="space-y-3 text-sm">
          <Row label="Display name" value={op.displayName} />
          <Separator />
          <Row label="Operator ID" value={String(op.telegramUserId)} mono />
          <Separator />
          <Row label="Default timezone" value={op.defaultTimezone} mono />
          <Separator />
          <Row label="Role" value={op.role} mono />
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>Notifications</CardTitle>
          <CardDescription>
            Browser notifications when a reminder fires successfully or a
            test message is sent. Uses the in-tab Notification API — works
            while the app is open. Background push is on the roadmap.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <NotificationsToggle />
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>Appearance</CardTitle>
        </CardHeader>
        <CardContent className="flex items-center justify-between">
          <div className="text-sm text-muted-foreground">Theme</div>
          <ThemeToggle />
        </CardContent>
      </Card>

      <p className="text-center text-xs text-muted-foreground">
        cm WhatsApp Bot · self-hosted
      </p>
    </PageShell>
  );
}

function Row({ label, value, mono }: { label: string; value: string; mono?: boolean }) {
  return (
    <div className="flex items-center justify-between gap-3">
      <dt className="text-muted-foreground">{label}</dt>
      <dd className={mono ? "font-mono text-xs" : ""}>{value}</dd>
    </div>
  );
}