Settings Advanced

"use client";

import {
  Code,
  Database,
  Loader2,
  Save,
  Settings,
  TestTube,
  Trash2,
} from "lucide-react";
import { useState } from "react";
import { cn } from "@/lib/utils";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/registry/new-york/ui/alert-dialog";
import { Badge } from "@/registry/new-york/ui/badge";
import { Button } from "@/registry/new-york/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/registry/new-york/ui/card";
import { FieldDescription, FieldLabel } from "@/registry/new-york/ui/field";
import {
  InputGroup,
  InputGroupInput,
} from "@/registry/new-york/ui/input-group";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/registry/new-york/ui/select";
import { Separator } from "@/registry/new-york/ui/separator";
import { Switch } from "@/registry/new-york/ui/switch";

export interface FeatureFlag {
  id: string;
  name: string;
  description: string;
  enabled: boolean;
  experimental?: boolean;
}

export interface SettingsAdvancedProps {
  featureFlags?: FeatureFlag[];
  debugMode?: boolean;
  apiRateLimit?: number;
  loggingLevel?: "error" | "warn" | "info" | "debug";
  onToggleFeature?: (id: string, enabled: boolean) => Promise<void>;
  onUpdateSettings?: (settings: {
    debugMode?: boolean;
    apiRateLimit?: number;
    loggingLevel?: "error" | "warn" | "info" | "debug";
  }) => Promise<void>;
  onClearCache?: () => Promise<void>;
  className?: string;
}

export default function SettingsAdvanced({
  featureFlags = [],
  debugMode = false,
  apiRateLimit = 1000,
  loggingLevel = "info",
  onToggleFeature,
  onUpdateSettings,
  onClearCache,
  className,
}: SettingsAdvancedProps) {
  const [isSaving, setIsSaving] = useState(false);
  const [localSettings, setLocalSettings] = useState({
    debugMode,
    apiRateLimit,
    loggingLevel,
  });

  const handleSave = async () => {
    setIsSaving(true);
    try {
      await onUpdateSettings?.(localSettings);
    } finally {
      setIsSaving(false);
    }
  };

  return (
    <Card className={cn("w-full shadow-xs", className)}>
      <CardHeader>
        <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
          <div className="flex min-w-0 flex-1 flex-col gap-2">
            <CardTitle className="wrap-break-word">Advanced Settings</CardTitle>
            <CardDescription className="wrap-break-word">
              Developer tools and experimental features
            </CardDescription>
          </div>
          <Button
            className="w-full sm:w-auto"
            disabled={isSaving}
            onClick={handleSave}
            type="button"
          >
            {isSaving ? (
              <>
                <Loader2 className="size-4 animate-spin" />
                Saving…
              </>
            ) : (
              <>
                <Save className="size-4" />
                Save Changes
              </>
            )}
          </Button>
        </div>
      </CardHeader>
      <CardContent>
        <div className="flex flex-col gap-6">
          {/* Developer Settings */}
          <div className="grid gap-4 md:grid-cols-2">
            <div className="flex flex-col gap-4 rounded-lg border p-4">
              <div className="flex items-center gap-2">
                <div className="flex size-8 items-center justify-center rounded-lg bg-muted">
                  <Code className="size-4" />
                </div>
                <FieldLabel className="mb-0">Debug Mode</FieldLabel>
              </div>
              <div className="flex items-center justify-between">
                <FieldDescription>
                  Enable debug logging and diagnostics
                </FieldDescription>
                <Switch
                  checked={localSettings.debugMode}
                  onCheckedChange={(checked) =>
                    setLocalSettings((prev) => ({
                      ...prev,
                      debugMode: checked,
                    }))
                  }
                />
              </div>
            </div>

            <div className="flex flex-col gap-4 rounded-lg border p-4">
              <div className="flex items-center gap-2">
                <div className="flex size-8 items-center justify-center rounded-lg bg-muted">
                  <Settings className="size-4" />
                </div>
                <FieldLabel className="mb-0" htmlFor="logging-level">
                  Logging Level
                </FieldLabel>
              </div>
              <Select
                onValueChange={(value: "error" | "warn" | "info" | "debug") =>
                  setLocalSettings((prev) => ({ ...prev, loggingLevel: value }))
                }
                value={localSettings.loggingLevel}
              >
                <SelectTrigger id="logging-level">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="error">Error</SelectItem>
                  <SelectItem value="warn">Warning</SelectItem>
                  <SelectItem value="info">Info</SelectItem>
                  <SelectItem value="debug">Debug</SelectItem>
                </SelectContent>
              </Select>
            </div>

            <div className="flex flex-col gap-4 rounded-lg border p-4">
              <div className="flex items-center gap-2">
                <div className="flex size-8 items-center justify-center rounded-lg bg-muted">
                  <Database className="size-4" />
                </div>
                <FieldLabel className="mb-0" htmlFor="rate-limit">
                  API Rate Limit
                </FieldLabel>
              </div>
              <InputGroup>
                <InputGroupInput
                  id="rate-limit"
                  onChange={(e) =>
                    setLocalSettings((prev) => ({
                      ...prev,
                      apiRateLimit: Number.parseInt(e.target.value) || 1000,
                    }))
                  }
                  type="number"
                  value={localSettings.apiRateLimit}
                />
              </InputGroup>
              <FieldDescription>Requests per hour</FieldDescription>
            </div>
          </div>

          <Separator />

          {/* Feature Flags */}
          <div className="flex flex-col gap-4">
            <div className="flex items-center gap-2">
              <TestTube className="size-5 text-muted-foreground" />
              <h3 className="font-semibold text-base">Feature Flags</h3>
            </div>
            {featureFlags.length === 0 ? (
              <p className="text-muted-foreground text-sm">
                No feature flags available
              </p>
            ) : (
              <div className="grid gap-3 md:grid-cols-2">
                {featureFlags.map((flag) => (
                  <div
                    className="flex items-center justify-between rounded-lg border p-4"
                    key={flag.id}
                  >
                    <div className="flex min-w-0 flex-1 flex-col gap-2">
                      <div className="flex items-center gap-2">
                        <span className="font-medium text-sm">{flag.name}</span>
                        {flag.experimental && (
                          <Badge className="text-xs" variant="secondary">
                            Experimental
                          </Badge>
                        )}
                      </div>
                      <FieldDescription className="text-xs">
                        {flag.description}
                      </FieldDescription>
                    </div>
                    <Switch
                      checked={flag.enabled}
                      onCheckedChange={(checked) =>
                        onToggleFeature?.(flag.id, checked)
                      }
                    />
                  </div>
                ))}
              </div>
            )}
          </div>

          <Separator />

          {/* Cache Management */}
          <div className="flex flex-col gap-4 rounded-lg border p-4">
            <div className="flex items-center gap-2">
              <div className="flex size-8 items-center justify-center rounded-lg bg-muted">
                <Trash2 className="size-4" />
              </div>
              <FieldLabel className="mb-0">Cache Management</FieldLabel>
            </div>
            <AlertDialog>
              <AlertDialogTrigger asChild>
                <Button
                  className="w-full sm:w-auto"
                  type="button"
                  variant="outline"
                >
                  <Trash2 className="size-4" />
                  Clear Cache
                </Button>
              </AlertDialogTrigger>
              <AlertDialogContent>
                <AlertDialogHeader>
                  <AlertDialogTitle>Clear Cache?</AlertDialogTitle>
                  <AlertDialogDescription>
                    This will clear all cached data. The application may be
                    slower on the next load as it rebuilds the cache.
                  </AlertDialogDescription>
                </AlertDialogHeader>
                <AlertDialogFooter>
                  <AlertDialogCancel>Cancel</AlertDialogCancel>
                  <AlertDialogAction onClick={onClearCache}>
                    Clear Cache
                  </AlertDialogAction>
                </AlertDialogFooter>
              </AlertDialogContent>
            </AlertDialog>
            <FieldDescription>
              Clear cached data to free up memory and refresh content
            </FieldDescription>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}