{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "settings-backup",
  "title": "Settings Backup",
  "description": "Manage automatic backups and restore your data.",
  "registryDependencies": [
    "alert-dialog",
    "badge",
    "button",
    "card",
    "field",
    "input-group",
    "progress",
    "select",
    "separator",
    "switch"
  ],
  "files": [
    {
      "path": "registry/new-york/blocks/settings/settings-backup.tsx",
      "content": "\"use client\";\n\nimport {\n  Calendar,\n  Clock,\n  HardDrive,\n  Loader2,\n  Play,\n  RotateCcw,\n  Save,\n  Trash2,\n} from \"lucide-react\";\nimport { useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/new-york/ui/alert-dialog\";\nimport { Badge } from \"@/registry/new-york/ui/badge\";\nimport { Button } from \"@/registry/new-york/ui/button\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\";\nimport { FieldDescription, FieldLabel } from \"@/registry/new-york/ui/field\";\nimport {\n  InputGroup,\n  InputGroupInput,\n} from \"@/registry/new-york/ui/input-group\";\nimport { Progress } from \"@/registry/new-york/ui/progress\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york/ui/select\";\nimport { Separator } from \"@/registry/new-york/ui/separator\";\nimport { Switch } from \"@/registry/new-york/ui/switch\";\n\nexport interface Backup {\n  id: string;\n  name: string;\n  type: \"automatic\" | \"manual\";\n  status: \"completed\" | \"in_progress\" | \"failed\";\n  size: number;\n  createdAt: Date;\n  completedAt?: Date;\n  location: string;\n  retentionDays?: number;\n}\n\nexport interface SettingsBackupProps {\n  backups?: Backup[];\n  autoBackupEnabled?: boolean;\n  autoBackupSchedule?: \"daily\" | \"weekly\" | \"monthly\";\n  retentionDays?: number;\n  storageLocation?: string;\n  onCreateBackup?: () => Promise<Backup>;\n  onRestore?: (backupId: string) => Promise<void>;\n  onDelete?: (backupId: string) => Promise<void>;\n  onUpdateSettings?: (settings: {\n    enabled: boolean;\n    schedule?: \"daily\" | \"weekly\" | \"monthly\";\n    retentionDays?: number;\n    storageLocation?: string;\n  }) => Promise<void>;\n  className?: string;\n}\n\nfunction formatBytes(bytes: number): string {\n  if (bytes === 0) return \"0 Bytes\";\n  const k = 1024;\n  const sizes = [\"Bytes\", \"KB\", \"MB\", \"GB\", \"TB\"];\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\n  return `${Math.round((bytes / k ** i) * 100) / 100} ${sizes[i]}`;\n}\n\nfunction formatDate(date: Date): string {\n  return new Intl.DateTimeFormat(\"en-US\", {\n    month: \"short\",\n    day: \"numeric\",\n    year: \"numeric\",\n    hour: \"numeric\",\n    minute: \"2-digit\",\n  }).format(date);\n}\n\nexport default function SettingsBackup({\n  backups = [],\n  autoBackupEnabled = false,\n  autoBackupSchedule = \"daily\",\n  retentionDays = 30,\n  storageLocation = \"cloud\",\n  onCreateBackup,\n  onRestore,\n  onDelete,\n  onUpdateSettings,\n  className,\n}: SettingsBackupProps) {\n  const [isCreating, setIsCreating] = useState(false);\n  const [localSettings, setLocalSettings] = useState({\n    enabled: autoBackupEnabled,\n    schedule: autoBackupSchedule,\n    retentionDays,\n    storageLocation,\n  });\n\n  const handleCreateBackup = async () => {\n    setIsCreating(true);\n    try {\n      await onCreateBackup?.();\n    } finally {\n      setIsCreating(false);\n    }\n  };\n\n  const handleUpdateSettings = async () => {\n    await onUpdateSettings?.(localSettings);\n  };\n\n  const getStatusBadge = (status: Backup[\"status\"]) => {\n    switch (status) {\n      case \"completed\":\n        return (\n          <Badge className=\"text-xs\" variant=\"default\">\n            Completed\n          </Badge>\n        );\n      case \"in_progress\":\n        return (\n          <Badge className=\"text-xs\" variant=\"secondary\">\n            In Progress\n          </Badge>\n        );\n      case \"failed\":\n        return (\n          <Badge className=\"text-xs\" variant=\"destructive\">\n            Failed\n          </Badge>\n        );\n    }\n  };\n\n  return (\n    <Card className={cn(\"w-full shadow-xs\", className)}>\n      <CardHeader>\n        <div className=\"flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between\">\n          <div className=\"flex min-w-0 flex-1 flex-col gap-2\">\n            <CardTitle className=\"wrap-break-word\">Backup & Restore</CardTitle>\n            <CardDescription className=\"wrap-break-word\">\n              Manage automatic backups and restore your data\n            </CardDescription>\n          </div>\n        </div>\n      </CardHeader>\n      <CardContent>\n        <div className=\"flex flex-col gap-6\">\n          {/* Backup Settings */}\n          <div className=\"grid gap-4 md:grid-cols-2\">\n            <div className=\"flex flex-col gap-4 rounded-lg border p-4\">\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex size-8 items-center justify-center rounded-lg bg-muted\">\n                  <Calendar className=\"size-4\" />\n                </div>\n                <FieldLabel className=\"mb-0\">Automatic Backups</FieldLabel>\n              </div>\n              <div className=\"flex items-center justify-between\">\n                <FieldDescription>Enable automatic backups</FieldDescription>\n                <Switch\n                  checked={localSettings.enabled}\n                  onCheckedChange={(checked) =>\n                    setLocalSettings((prev) => ({ ...prev, enabled: checked }))\n                  }\n                />\n              </div>\n            </div>\n\n            {localSettings.enabled && (\n              <>\n                <div className=\"flex flex-col gap-4 rounded-lg border p-4\">\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"flex size-8 items-center justify-center rounded-lg bg-muted\">\n                      <Clock className=\"size-4\" />\n                    </div>\n                    <FieldLabel className=\"mb-0\" htmlFor=\"backup-schedule\">\n                      Schedule\n                    </FieldLabel>\n                  </div>\n                  <Select\n                    onValueChange={(value: \"daily\" | \"weekly\" | \"monthly\") =>\n                      setLocalSettings((prev) => ({ ...prev, schedule: value }))\n                    }\n                    value={localSettings.schedule}\n                  >\n                    <SelectTrigger id=\"backup-schedule\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"daily\">Daily</SelectItem>\n                      <SelectItem value=\"weekly\">Weekly</SelectItem>\n                      <SelectItem value=\"monthly\">Monthly</SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n\n                <div className=\"flex flex-col gap-4 rounded-lg border p-4\">\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"flex size-8 items-center justify-center rounded-lg bg-muted\">\n                      <Calendar className=\"size-4\" />\n                    </div>\n                    <FieldLabel className=\"mb-0\" htmlFor=\"retention-days\">\n                      Retention (Days)\n                    </FieldLabel>\n                  </div>\n                  <InputGroup>\n                    <InputGroupInput\n                      id=\"retention-days\"\n                      onChange={(e) =>\n                        setLocalSettings((prev) => ({\n                          ...prev,\n                          retentionDays: Number.parseInt(e.target.value) || 30,\n                        }))\n                      }\n                      type=\"number\"\n                      value={localSettings.retentionDays}\n                    />\n                  </InputGroup>\n                </div>\n\n                <div className=\"flex flex-col gap-4 rounded-lg border p-4\">\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"flex size-8 items-center justify-center rounded-lg bg-muted\">\n                      <HardDrive className=\"size-4\" />\n                    </div>\n                    <FieldLabel className=\"mb-0\" htmlFor=\"storage-location\">\n                      Storage Location\n                    </FieldLabel>\n                  </div>\n                  <Select\n                    onValueChange={(value) =>\n                      setLocalSettings((prev) => ({\n                        ...prev,\n                        storageLocation: value,\n                      }))\n                    }\n                    value={localSettings.storageLocation}\n                  >\n                    <SelectTrigger id=\"storage-location\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"cloud\">Cloud Storage</SelectItem>\n                      <SelectItem value=\"local\">Local Storage</SelectItem>\n                      <SelectItem value=\"s3\">Amazon S3</SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n              </>\n            )}\n          </div>\n\n          <div className=\"flex justify-end\">\n            <Button\n              className=\"w-full sm:w-auto\"\n              onClick={handleUpdateSettings}\n              type=\"button\"\n            >\n              <Save className=\"size-4\" />\n              Save Settings\n            </Button>\n          </div>\n\n          <Separator />\n\n          {/* Manual Backup */}\n          <div className=\"flex flex-col gap-4 rounded-lg border p-4\">\n            <div className=\"flex items-center gap-2\">\n              <div className=\"flex size-8 items-center justify-center rounded-lg bg-muted\">\n                <Play className=\"size-4\" />\n              </div>\n              <FieldLabel className=\"mb-0\">Manual Backup</FieldLabel>\n            </div>\n            <Button\n              className=\"w-full sm:w-auto\"\n              disabled={isCreating}\n              onClick={handleCreateBackup}\n              type=\"button\"\n            >\n              {isCreating ? (\n                <>\n                  <Loader2 className=\"size-4 animate-spin\" />\n                  Creating Backup…\n                </>\n              ) : (\n                <>\n                  <Save className=\"size-4\" />\n                  Create Backup Now\n                </>\n              )}\n            </Button>\n          </div>\n\n          <Separator />\n\n          {/* Backup History */}\n          <div className=\"flex flex-col gap-4\">\n            <h3 className=\"font-semibold text-base\">Backup History</h3>\n            {backups.length === 0 ? (\n              <p className=\"text-muted-foreground text-sm\">No backups yet</p>\n            ) : (\n              <div className=\"flex flex-col gap-3\">\n                {backups.map((backup) => (\n                  <div\n                    className=\"flex flex-col gap-3 rounded-lg border p-4 sm:flex-row sm:items-center\"\n                    key={backup.id}\n                  >\n                    <div className=\"flex min-w-0 flex-1 items-center gap-3\">\n                      <div className=\"flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted\">\n                        <HardDrive className=\"size-5\" />\n                      </div>\n                      <div className=\"flex min-w-0 flex-1 flex-col gap-2\">\n                        <div className=\"flex flex-wrap items-center gap-2\">\n                          <span className=\"font-medium text-sm\">\n                            {backup.name}\n                          </span>\n                          {getStatusBadge(backup.status)}\n                          <Badge className=\"text-xs\" variant=\"outline\">\n                            {backup.type}\n                          </Badge>\n                        </div>\n                        <div className=\"flex flex-wrap items-center gap-2 text-muted-foreground text-xs\">\n                          <span>{formatBytes(backup.size)}</span>\n                          <span>•</span>\n                          <span>{backup.location}</span>\n                          <span>•</span>\n                          <span>Created: {formatDate(backup.createdAt)}</span>\n                          {backup.completedAt && (\n                            <>\n                              <span>•</span>\n                              <span>\n                                Completed: {formatDate(backup.completedAt)}\n                              </span>\n                            </>\n                          )}\n                        </div>\n                        {backup.status === \"in_progress\" && (\n                          <div className=\"flex flex-col gap-2\">\n                            <Progress value={50} />\n                          </div>\n                        )}\n                      </div>\n                    </div>\n                    <div className=\"flex shrink-0 flex-wrap gap-2\">\n                      {backup.status === \"completed\" && (\n                        <Button\n                          className=\"w-full sm:w-auto\"\n                          onClick={() => onRestore?.(backup.id)}\n                          type=\"button\"\n                          variant=\"outline\"\n                        >\n                          <RotateCcw className=\"size-4\" />\n                          Restore\n                        </Button>\n                      )}\n                      <AlertDialog>\n                        <AlertDialogTrigger asChild>\n                          <Button\n                            className=\"w-full sm:w-auto\"\n                            type=\"button\"\n                            variant=\"destructive\"\n                          >\n                            <Trash2 className=\"size-4\" />\n                            Delete\n                          </Button>\n                        </AlertDialogTrigger>\n                        <AlertDialogContent>\n                          <AlertDialogHeader>\n                            <AlertDialogTitle>Delete Backup?</AlertDialogTitle>\n                            <AlertDialogDescription>\n                              This will permanently delete the backup{\" \"}\n                              <strong>{backup.name}</strong>. This action cannot\n                              be undone.\n                            </AlertDialogDescription>\n                          </AlertDialogHeader>\n                          <AlertDialogFooter>\n                            <AlertDialogCancel>Cancel</AlertDialogCancel>\n                            <AlertDialogAction\n                              onClick={() => onDelete?.(backup.id)}\n                            >\n                              Delete Backup\n                            </AlertDialogAction>\n                          </AlertDialogFooter>\n                        </AlertDialogContent>\n                      </AlertDialog>\n                    </div>\n                  </div>\n                ))}\n              </div>\n            )}\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n  );\n}\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "block",
    "settings"
  ],
  "type": "registry:ui"
}