{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "credit-usage-card",
  "type": "registry:component",
  "title": "Credit Usage Card",
  "description": "Displays credit consumption progress with clear limits and usage breakdown.",
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "files": [
    {
      "path": "components/watermelon/credit-usage-card.tsx",
      "type": "registry:component",
      "content": "import React, { useState, useRef, useEffect } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\nimport {\n  MoreVertical,\n  Download,\n  ChevronDown,\n  Check,\n  Printer,\n  Share2,\n  RefreshCw,\n} from 'lucide-react';\n\ninterface UsageHistoryItem {\n  date: string;\n  model: string;\n  credits: string;\n  cost: string;\n}\n\ninterface CreditUsageCardProps {\n  usedCreditsPercent?: number;\n  totalCreditsLabel?: string;\n  creditsUsedLabel?: string;\n  creditsLeftLabel?: string;\n  usageHistory?: UsageHistoryItem[];\n  onAutoSwitchChange?: (enabled: boolean) => void;\n  onManagePlan?: () => void;\n  onViewAll?: () => void;\n}\n\nconst PERIOD_OPTIONS = ['7 Days', '14 Days', '30 Days', '90 Days', '12 Months'];\n\nconst popoverAnim = {\n  initial: { opacity: 0, y: 6, scale: 0.97 },\n  animate: { opacity: 1, y: 0, scale: 1 },\n  exit: { opacity: 0, y: 6, scale: 0.97 },\n  transition: { type: 'spring' as const, stiffness: 400, damping: 28 },\n} as const;\n\nexport const CreditUsageCard: React.FC<CreditUsageCardProps> = ({\n  usedCreditsPercent = 56.4,\n  totalCreditsLabel = '100M CREDITS',\n  creditsUsedLabel = '56.4M',\n  creditsLeftLabel = '43.6M',\n  usageHistory = [],\n  onAutoSwitchChange,\n  onManagePlan,\n  onViewAll,\n}) => {\n  const [autoSwitch, setAutoSwitch] = useState(true);\n  const [activePopover, setActivePopover] = useState<'more' | 'period' | null>(\n    null,\n  );\n  const [selectedPeriod, setSelectedPeriod] = useState('30 Days');\n  const [downloadDone, setDownloadDone] = useState(false);\n  const segments = 75;\n\n  const moreRef = useRef<HTMLDivElement>(null);\n  const periodRef = useRef<HTMLDivElement>(null);\n\n  const handleToggleAutoSwitch = () => {\n    const newState = !autoSwitch;\n    setAutoSwitch(newState);\n    onAutoSwitchChange?.(newState);\n  };\n\n  const handleDownload = () => {\n    // Simulate CSV export\n    const headers = ['Date', 'Model', 'Credits', 'Cost'];\n    const rows = usageHistory.map((r) => [r.date, r.model, r.credits, r.cost]);\n    const csv = [headers, ...rows].map((r) => r.join(',')).join('\\n');\n    const blob = new Blob([csv], { type: 'text/csv' });\n    const url = URL.createObjectURL(blob);\n    const a = document.createElement('a');\n    a.href = url;\n    a.download = 'credit-usage.csv';\n    a.click();\n    URL.revokeObjectURL(url);\n    setDownloadDone(true);\n    setTimeout(() => setDownloadDone(false), 2000);\n  };\n\n  useEffect(() => {\n    const handler = (e: MouseEvent) => {\n      if (moreRef.current && !moreRef.current.contains(e.target as Node)) {\n        setActivePopover((prev) => (prev === 'more' ? null : prev));\n      }\n      if (periodRef.current && !periodRef.current.contains(e.target as Node)) {\n        setActivePopover((prev) => (prev === 'period' ? null : prev));\n      }\n    };\n    document.addEventListener('mousedown', handler);\n    return () => document.removeEventListener('mousedown', handler);\n  }, []);\n\n  return (\n    <div className=\"flex w-full flex-col items-center justify-center bg-transparent p-4 font-sans transition-colors duration-500 sm:p-8 md:p-12\">\n      <div className=\"w-full max-w-135 overflow-hidden rounded-4xl border border-[#DDD] bg-white font-mono text-slate-700 shadow-xl transition-all duration-500 select-none dark:border-[#222] dark:bg-[#101010] dark:text-[#d4d4d4]\">\n        {/* Top Header */}\n        <div className=\"flex flex-col items-start justify-between gap-4 bg-gray-50/50 px-4 py-5 sm:flex-row sm:items-center sm:px-6 md:px-8 dark:bg-[#171717]\">\n          <div>\n            <h3 className=\"mb-1 text-[9px] font-bold tracking-[0.2em] text-[#7E7E7E] uppercase\">\n              Credits Used\n            </h3>\n            <span className=\"inter text-2xl font-medium text-slate-900 sm:text-3xl dark:text-[#F2F2F2]\">\n              {usedCreditsPercent}%\n            </span>\n          </div>\n\n          <div className=\"mt-1 flex items-center gap-2 self-end sm:self-auto\">\n            <span className=\"max-w-37.5 text-right text-[9px] leading-tight font-bold tracking-wider text-[#787777] uppercase sm:text-[10px]\">\n              Auto-switch to cheaper model at limit\n            </span>\n            <button\n              title=\"toggle\"\n              onClick={handleToggleAutoSwitch}\n              className={`relative flex h-4.75 w-10 shrink-0 items-center rounded-full border-[1.4px] p-0.5 transition-colors duration-200 ${\n                autoSwitch\n                  ? 'border-green-500/40 bg-[#E8F5E9] dark:border-green-400/40 dark:bg-[#182D1A]'\n                  : 'border-gray-300 bg-gray-200 dark:border-[#404040] dark:bg-[#333]'\n              }`}\n            >\n              <motion.div\n                animate={{ x: autoSwitch ? 17 : 0 }}\n                transition={{ type: 'spring', stiffness: 500, damping: 30 }}\n                className={`h-3 w-4 ${autoSwitch ? 'bg-green-500 dark:bg-[#2FD340]' : 'bg-gray-400 dark:bg-[#595353]'} rounded-full shadow-sm`}\n              />\n            </button>\n          </div>\n        </div>\n\n        {/* Progress Bar */}\n        <div className=\"flex h-3 gap-px bg-gray-50/50 px-4 sm:gap-1 sm:px-6 md:px-8 dark:bg-[#171717]\">\n          {[...Array(segments)].map((_, i) => {\n            const isFilled = i < (usedCreditsPercent / 100) * segments;\n            return (\n              <div\n                key={i}\n                className={`flex-1 rounded-full transition-all duration-700 ${\n                  isFilled ? 'bg-[#FF7A3F]' : 'bg-gray-200 dark:bg-[#222]'\n                }`}\n                style={{ opacity: isFilled ? 1 - i * 0.004 : 1 }}\n              />\n            );\n          })}\n        </div>\n\n        <div className=\"flex items-center justify-between bg-gray-50/50 px-4 py-4 text-[9px] font-bold sm:px-6 sm:text-[10px] md:px-8 dark:bg-[#171717]\">\n          <span className=\"text-slate-500 dark:text-[#BEBEBE]\">\n            {creditsUsedLabel}{' '}\n            <span className=\"text-slate-400 dark:text-[#717171]\">\n              / {totalCreditsLabel}\n            </span>\n          </span>\n          <span className=\"text-slate-500 dark:text-[#BEBEBE]\">\n            {creditsLeftLabel}{' '}\n            <span className=\"xs:inline hidden text-slate-400 dark:text-[#717171]\">\n              CREDITS LEFT\n            </span>\n          </span>\n        </div>\n\n        <div className=\"h-px w-full border-b-2 border-dashed border-black/5 dark:border-white/10\" />\n\n        {/* History Header */}\n        <div className=\"flex flex-row flex-wrap items-center justify-between gap-2 bg-gray-50/50 px-4 pt-4 pb-4 sm:flex-nowrap sm:px-6 md:px-8 dark:bg-[#171717]\">\n          <div className=\"flex flex-shrink-0 items-center gap-2\">\n            <h4 className=\"inter text-sm font-medium whitespace-nowrap text-slate-800 sm:text-base dark:text-[#E8E8E8]\">\n              Usage History\n            </h4>\n            <button\n              onClick={onViewAll}\n              title=\"view all\"\n              className=\"flex-shrink-0 rounded-full border border-gray-300 px-2 py-0.5 text-center text-[9px] whitespace-nowrap text-gray-500 transition-colors hover:bg-gray-100 active:scale-95 dark:border-[#909090]/65 dark:text-[#909090] dark:hover:bg-[#1a1a1a]\"\n            >\n              View all\n            </button>\n          </div>\n\n          {/* Period selector */}\n          <div ref={periodRef} className=\"relative flex-shrink-0\">\n            <button\n              title=\"period\"\n              onClick={() =>\n                setActivePopover((prev) =>\n                  prev === 'period' ? null : 'period',\n                )\n              }\n              className=\"flex items-center gap-1 rounded-xl border border-gray-300 px-2 py-1 text-[9px] whitespace-nowrap text-gray-500 transition-colors hover:bg-gray-100 sm:gap-2 dark:border-[#909090]/65 dark:text-[#909090] dark:hover:bg-[#1a1a1a]\"\n            >\n              {selectedPeriod}{' '}\n              <ChevronDown\n                size={10}\n                className={`transition-transform ${activePopover === 'period' ? 'rotate-180' : ''}`}\n              />\n            </button>\n            <AnimatePresence>\n              {activePopover === 'period' && (\n                <motion.div\n                  {...popoverAnim}\n                  className=\"absolute top-full right-0 z-50 mt-2 w-36 overflow-hidden rounded-2xl border border-gray-200 bg-white py-1.5 shadow-2xl dark:border-[#303030] dark:bg-[#1a1a1a]\"\n                >\n                  {PERIOD_OPTIONS.map((opt) => (\n                    <button\n                      key={opt}\n                      onClick={() => {\n                        setSelectedPeriod(opt);\n                        setActivePopover(null);\n                      }}\n                      className={`flex w-full items-center justify-between px-4 py-2 text-left text-[11px] transition-colors ${selectedPeriod === opt ? 'text-[#FF7A3F]' : 'text-gray-600 hover:bg-gray-50 dark:text-[#aaa] dark:hover:bg-[#222]'}`}\n                    >\n                      {opt}\n                      {selectedPeriod === opt && <Check size={11} />}\n                    </button>\n                  ))}\n                </motion.div>\n              )}\n            </AnimatePresence>\n          </div>\n        </div>\n\n        {/* Table Wrapper */}\n        <div className=\"no-scrollbar overflow-x-auto bg-gray-50/50 dark:bg-[#171717]\">\n          <div className=\"min-w-120 space-y-0.5 border-b-[1.4px] border-gray-200 px-4 py-2 sm:px-6 md:px-8 dark:border-[#303030]/60\">\n            <div className=\"grid grid-cols-4 px-1 pb-2 text-[10px] font-bold tracking-[0.15em] text-slate-400 uppercase dark:text-[#737373]\">\n              <span>Date</span>\n              <span>Model</span>\n              <span className=\"text-right\">Credits</span>\n              <span className=\"text-right\">Cost</span>\n            </div>\n            {usageHistory.map((row, idx) => (\n              <div\n                key={idx}\n                className=\"group grid grid-cols-4 border-t-[1.5px] border-gray-100 px-1 py-2 text-[10.5px] text-slate-500 transition-colors hover:bg-white dark:border-[#222222] dark:text-[#999] dark:hover:bg-[#161616]\"\n              >\n                <span className=\"group-hover:text-slate-900 dark:group-hover:text-white/80\">\n                  {row.date}\n                </span>\n                <span className=\"truncate pr-2 font-medium group-hover:text-slate-900 dark:group-hover:text-white/80\">\n                  {row.model}\n                </span>\n                <span className=\"text-right group-hover:text-slate-900 dark:group-hover:text-white/80\">\n                  {row.credits}\n                </span>\n                <span className=\"text-right font-bold group-hover:text-slate-900 dark:group-hover:text-white/80\">\n                  {row.cost}\n                </span>\n              </div>\n            ))}\n          </div>\n        </div>\n\n        {/* Footer*/}\n        <div className=\"flex flex-col items-center justify-between gap-4 bg-white px-4 pt-4 pb-4 sm:flex-row sm:px-6 md:px-8 dark:bg-[#101010]\">\n          <div className=\"flex items-center gap-3 self-start text-slate-400 sm:self-auto dark:text-[#888888]\">\n            {/* More Options */}\n            <div ref={moreRef} className=\"relative flex items-center\">\n              <button\n                title=\"more\"\n                onClick={() =>\n                  setActivePopover((prev) => (prev === 'more' ? null : 'more'))\n                }\n                className=\"flex items-center justify-center\"\n              >\n                <MoreVertical\n                  size={16}\n                  className=\"cursor-pointer transition-colors hover:text-slate-900 dark:hover:text-white\"\n                />\n              </button>\n              <AnimatePresence>\n                {activePopover === 'more' && (\n                  <motion.div\n                    {...popoverAnim}\n                    className=\"absolute bottom-full left-0 z-50 mb-2 w-44 overflow-hidden rounded-2xl border border-gray-200 bg-white py-1.5 shadow-2xl dark:border-[#303030] dark:bg-[#1a1a1a]\"\n                  >\n                    {[\n                      {\n                        label: 'Export CSV',\n                        icon: <Download size={12} />,\n                        action: handleDownload,\n                      },\n                      {\n                        label: 'Print',\n                        icon: <Printer size={12} />,\n                        action: () => {\n                          window.print();\n                          setActivePopover(null);\n                        },\n                      },\n                      {\n                        label: 'Share report',\n                        icon: <Share2 size={12} />,\n                        action: () => setActivePopover(null),\n                      },\n                      {\n                        label: 'Refresh data',\n                        icon: <RefreshCw size={12} />,\n                        action: () => setActivePopover(null),\n                      },\n                    ].map((opt) => (\n                      <button\n                        key={opt.label}\n                        onClick={opt.action}\n                        className=\"flex w-full items-center gap-2.5 px-4 py-2.5 text-left text-[12px] text-gray-600 transition-colors hover:bg-gray-50 dark:text-[#aaa] dark:hover:bg-[#222]\"\n                      >\n                        <span className=\"text-gray-400 dark:text-[#666]\">\n                          {opt.icon}\n                        </span>\n                        {opt.label}\n                      </button>\n                    ))}\n                  </motion.div>\n                )}\n              </AnimatePresence>\n            </div>\n\n            <div className=\"h-4 w-px bg-gray-200 dark:bg-[#242424]\" />\n\n            {/* Download CSV */}\n            <button\n              title=\"download\"\n              onClick={handleDownload}\n              className=\"relative flex items-center justify-center\"\n            >\n              <motion.div\n                animate={{ scale: downloadDone ? 1.15 : 1 }}\n                transition={{ type: 'spring', stiffness: 400, damping: 20 }}\n                className=\"flex items-center justify-center\"\n              >\n                <Download\n                  size={16}\n                  className={`cursor-pointer transition-colors ${downloadDone ? 'text-green-500 dark:text-[#2FD340]' : 'hover:text-slate-900 dark:hover:text-white'}`}\n                />\n              </motion.div>\n            </button>\n          </div>\n\n          <div className=\"flex w-full items-center justify-between gap-2 sm:w-auto sm:justify-end\">\n            <div className=\"flex items-center gap-1.5 py-1\">\n              <div className=\"flex h-4 w-4 items-center justify-center rounded-full bg-[#6772E7] text-[10px] font-semibold text-white\">\n                S\n              </div>\n              <span className=\"text-[9px] font-bold tracking-tighter text-slate-400 uppercase dark:text-[#7f7d7d]\">\n                Billing via Stripe\n              </span>\n            </div>\n            <button\n              title=\"plans\"\n              onClick={onManagePlan}\n              className=\"inter rounded-full border border-gray-200 px-3 py-1.5 text-[10px] font-normal whitespace-nowrap text-slate-600 transition-all hover:bg-slate-900 hover:text-white sm:text-[11px] dark:border-[#222] dark:text-white/70 dark:hover:bg-white dark:hover:text-black\"\n            >\n              Manage plan\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <style>{`\n        .no-scrollbar::-webkit-scrollbar { display: none; }\n        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }\n      `}</style>\n    </div>\n  );\n};\n"
    }
  ]
}