{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dynamic-dialog-delayed-action",
  "title": "Dynamic Delayed Action Dialog",
  "description": "A dynamic delayed action dialog component.",
  "registryDependencies": [
    "button",
    "dialog",
    "./public/r/dynamic-dialog.json"
  ],
  "files": [
    {
      "path": "components/dynamic-dialog/dialogs/delayed-action-dialog.tsx",
      "content": "\"use client\"\r\n\r\nimport { dialog, type DialogComponentProps } from '@/registry/lib/dynamic-dialog-state';\r\nimport { Button } from \"@/registry/ui/button\";\r\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from \"@/registry/ui/dialog\";\r\nimport { AlertTriangle, Check, Clock } from \"lucide-react\";\r\nimport { useEffect, useState } from 'react';\r\n\r\nexport interface DelayedActionDialogProps {\r\n  delaySeconds: number;\r\n  warningMessage?: string;\r\n  allowCancel?: boolean;\r\n  dangerAction?: boolean;\r\n}\r\n\r\nconst circumference = 2 * Math.PI * 20;\r\n\r\nexport function DelayedActionDialog(props: DialogComponentProps<DelayedActionDialogProps, boolean>) {\r\n  const [timeRemaining, setTimeRemaining] = useState(props.delaySeconds);\r\n  const [canInteract, setCanInteract] = useState(false);\r\n\r\n  useEffect(() => {\r\n    const countdownInterval = setInterval(() => {\r\n      setTimeRemaining(prev => Math.max(0, prev - 1));\r\n    }, 1000);\r\n\r\n    const enableTimer = setTimeout(() => {\r\n      setCanInteract(true);\r\n    }, props.delaySeconds * 1000);\r\n\r\n    return () => {\r\n      clearInterval(countdownInterval);\r\n      clearTimeout(enableTimer);\r\n    };\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n  }, []);\r\n\r\n  const handleConfirm = () => {\r\n    if (canInteract) props.confirm(true);\r\n  };\r\n\r\n  const handleCancel = () => {\r\n    if (props.allowCancel !== false) props.dismiss(\"cancel\");\r\n  };\r\n\r\n  return (\r\n    <Dialog open={props.open} onOpenChange={props.onOpenChange}>\r\n      <DialogContent>\r\n        <style>{`\r\n          @keyframes __dal-bar { from { width: 0% } to { width: 100% } }\r\n          @keyframes __dal-circle { from { stroke-dashoffset: ${circumference} } to { stroke-dashoffset: 0 } }\r\n        `}</style>\r\n        <DialogHeader>\r\n          <div className=\"flex items-center gap-3 mb-4\">\r\n            <div className={`flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center ${\r\n              props.dangerAction ? 'bg-destructive/10' : 'bg-orange-500/10'\r\n            }`}>\r\n              {props.dangerAction ? (\r\n                <AlertTriangle className=\"w-5 h-5 text-destructive\" />\r\n              ) : (\r\n                <Clock className=\"w-5 h-5 text-orange-500\" />\r\n              )}\r\n            </div>\r\n            <div>\r\n              <DialogTitle className=\"text-lg font-semibold text-foreground\">\r\n                Please Wait\r\n              </DialogTitle>\r\n              <DialogDescription className=\"text-sm text-muted-foreground\">\r\n                {canInteract\r\n                  ? 'You can now proceed'\r\n                  : `Please wait ${timeRemaining} seconds before continuing`\r\n                }\r\n              </DialogDescription>\r\n            </div>\r\n          </div>\r\n        </DialogHeader>\r\n        <div className=\"space-y-4\">\r\n          {props.warningMessage && (\r\n            <div className={`p-3 rounded-md border-l-4 ${\r\n              props.dangerAction\r\n                ? 'bg-destructive/5 border-destructive text-destructive-foreground'\r\n                : 'bg-orange-50 border-orange-500 text-orange-700 dark:bg-orange-950 dark:text-orange-300'\r\n            }`}>\r\n              <p className=\"text-sm font-medium\">{props.warningMessage}</p>\r\n            </div>\r\n          )}\r\n\r\n          {!canInteract && (\r\n            <div className=\"space-y-4\">\r\n              <div className=\"space-y-2\">\r\n                <div className=\"flex justify-between text-sm text-muted-foreground\">\r\n                  <span>Time remaining</span>\r\n                  <span>{timeRemaining}s</span>\r\n                </div>\r\n                <div className=\"w-full bg-muted rounded-full h-2\">\r\n                  <div\r\n                    className={`h-2 rounded-full ${\r\n                      props.dangerAction ? 'bg-destructive' : 'bg-orange-500'\r\n                    }`}\r\n                    style={{ animation: `__dal-bar ${props.delaySeconds}s linear forwards` }}\r\n                  />\r\n                </div>\r\n              </div>\r\n\r\n              <div className=\"flex justify-center py-2\">\r\n                <div className=\"relative w-12 h-12\">\r\n                  <svg className=\"w-12 h-12 transform -rotate-90\" viewBox=\"0 0 48 48\">\r\n                    <circle cx=\"24\" cy=\"24\" r=\"20\" stroke=\"currentColor\" strokeWidth=\"3\" fill=\"none\" className=\"text-muted\" />\r\n                    <circle\r\n                      cx=\"24\"\r\n                      cy=\"24\"\r\n                      r=\"20\"\r\n                      stroke=\"currentColor\"\r\n                      strokeWidth=\"3\"\r\n                      fill=\"none\"\r\n                      strokeDasharray={circumference}\r\n                      className={props.dangerAction ? 'text-destructive' : 'text-orange-500'}\r\n                      style={{ animation: `__dal-circle ${props.delaySeconds}s linear forwards` }}\r\n                    />\r\n                  </svg>\r\n                  <div className=\"absolute inset-0 flex items-center justify-center\">\r\n                    <span className=\"text-lg font-bold text-foreground\">{timeRemaining}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          )}\r\n\r\n          {canInteract && (\r\n            <div className=\"flex justify-center py-4\">\r\n              <div className=\"flex items-center gap-2 text-green-600 dark:text-green-400\">\r\n                <Check className=\"w-6 h-6\" />\r\n                <span className=\"font-medium\">Ready to proceed</span>\r\n              </div>\r\n            </div>\r\n          )}\r\n\r\n          <div className=\"flex justify-end space-x-3 pt-2\">\r\n            {props.allowCancel !== false && (\r\n              <Button type=\"button\" onClick={handleCancel} variant=\"outline\">\r\n                Cancel\r\n              </Button>\r\n            )}\r\n            <Button\r\n              onClick={handleConfirm}\r\n              disabled={!canInteract}\r\n              variant={props.dangerAction ? \"destructive\" : \"default\"}\r\n            >\r\n              {!canInteract\r\n                ? `Please wait (${timeRemaining}s)`\r\n                : props.dangerAction\r\n                ? 'Confirm Action'\r\n                : 'Continue'\r\n              }\r\n            </Button>\r\n          </div>\r\n        </div>\r\n      </DialogContent>\r\n    </Dialog>\r\n  );\r\n}\r\n\r\nexport const delayedActionDialog = dialog(DelayedActionDialog);\r\n",
      "type": "registry:component",
      "target": "@components/dynamic-dialog/dialogs/delayed-action-dialog.tsx"
    }
  ],
  "type": "registry:component"
}