Settings — Panel

"use client";

import * as React from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { Slider } from "@/components/ui/slider";
import { Separator } from "@/components/ui/separator";
import { Badge } from "@/components/ui/badge";

const SLIDER_DEFS = [
  { id: "rate-limit", label: "API rate limit", initial: 60, unit: "req/s" },
  { id: "session-ttl", label: "Session timeout", initial: 30, unit: "min" },
  { id: "log-retention", label: "Log retention", initial: 14, unit: "days" },
];

export function ControlsPanelBlock() {
  // notifications 가 알림 관련 한도(슬라이더)를 제어 — OFF 면 비활성화된다.
  const [notifications, setNotifications] = React.useState(true);
  const [values, setValues] = React.useState<Record<string, number>>(
    Object.fromEntries(SLIDER_DEFS.map((s) => [s.id, s.initial])),
  );
  const [maintenance, setMaintenance] = React.useState(false);

  return (
    <section className="p-6">
      <Card className="mx-auto max-w-md">
        <CardHeader className="pb-3">
          <CardTitle className="flex items-center justify-between text-base">
            Workspace settings
            {maintenance ? (
              <Badge variant="destructive">Maintenance</Badge>
            ) : (
              <Badge variant="secondary">Live</Badge>
            )}
          </CardTitle>
          <p className="text-sm text-muted-foreground">Production · acme-prod</p>
        </CardHeader>
        <CardContent className="space-y-5">
          <div className="flex items-center justify-between">
            <Label htmlFor="ctrl-notifications" className="font-normal">
              Email notifications
            </Label>
            <Switch
              id="ctrl-notifications"
              checked={notifications}
              onCheckedChange={setNotifications}
            />
          </div>

          {SLIDER_DEFS.map((s) => (
            <div
              key={s.id}
              className={notifications ? "space-y-2" : "space-y-2 opacity-50"}
            >
              <div className="flex items-center justify-between text-sm">
                <Label htmlFor={s.id}>{s.label}</Label>
                <span className="tabular-nums text-muted-foreground">
                  {notifications ? `${values[s.id]} ${s.unit}` : "—"}
                </span>
              </div>
              <Slider
                id={s.id}
                value={[values[s.id]]}
                onValueChange={(v) =>
                  setValues((prev) => ({
                    ...prev,
                    [s.id]: Array.isArray(v) ? v[0] : (v as number),
                  }))
                }
                max={120}
                disabled={!notifications}
              />
            </div>
          ))}

          <Separator />

          <div className="flex items-center justify-between gap-4">
            <div>
              <Label htmlFor="ctrl-maintenance" className="font-normal">
                Maintenance mode
              </Label>
              <p className="text-xs text-muted-foreground">
                Temporarily blocks all non-admin traffic.
              </p>
            </div>
            <Switch
              id="ctrl-maintenance"
              checked={maintenance}
              onCheckedChange={setMaintenance}
            />
          </div>
        </CardContent>
      </Card>
    </section>
  );
}