{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "price-drop-alert-card",
  "title": "Price Drop Alert Card",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/price-drop-alert-card/PriceDropAlertCard.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport {\n  BellRing,\n  Check,\n  History,\n  Mail,\n  RefreshCw,\n  ShieldCheck,\n  Smartphone,\n  Tag,\n  Trash2,\n  TrendingDown,\n  Zap,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'\nimport { Separator } from '@/components/ui/separator'\nimport { Slider } from '@/components/ui/slider'\nimport { Switch } from '@/components/ui/switch'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\ninterface TrackedProduct {\n  id: string\n  name: string\n  variant: string\n  category: string\n  sku: string\n  image: string\n  currentPrice: number\n  targetPrice: number\n  lowest90d: number\n  channel: 'email' | 'sms'\n  status: 'monitoring' | 'reached'\n  active: boolean\n}\n\nexport function PriceDropAlertCard({ className }: { className?: string }) {\n  const currentPrice = 299.0\n  const msrpPrice = 349.0\n  const lowest90dPrice = 279.0\n\n  const [alertMethod, setAlertMethod] = React.useState<'email' | 'sms'>('email')\n  const [targetPrice, setTargetPrice] = React.useState<number>(280)\n  const [inStockNotification, setInStockNotification] = React.useState<boolean>(true)\n  const [alertSaved, setAlertSaved] = React.useState<boolean>(false)\n  const [isRefreshing, setIsRefreshing] = React.useState<boolean>(false)\n\n  const [trackedProducts, setTrackedProducts] = React.useState<TrackedProduct[]>([\n    {\n      id: 'prod-1',\n      name: 'Pro Studio Wireless Headphones',\n      variant: 'Space Black',\n      category: 'Audio',\n      sku: 'SKU-8842',\n      image: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=300&auto=format&fit=crop&q=80',\n      currentPrice: 299.0,\n      targetPrice: 280.0,\n      lowest90d: 279.0,\n      channel: 'email',\n      status: 'monitoring',\n      active: true,\n    },\n    {\n      id: 'prod-2',\n      name: 'Ergonomic Mechanical Keyboard',\n      variant: 'RGB / Cherry MX Brown',\n      category: 'Peripherals',\n      sku: 'SKU-4109',\n      image: 'https://images.unsplash.com/photo-1587829741301-dc798b83add3?w=300&auto=format&fit=crop&q=80',\n      currentPrice: 119.0,\n      targetPrice: 120.0,\n      lowest90d: 119.0,\n      channel: 'sms',\n      status: 'reached',\n      active: true,\n    },\n    {\n      id: 'prod-3',\n      name: 'Ultra-Wide Curved Monitor 34\"',\n      variant: 'WQHD 144Hz IPS',\n      category: 'Displays',\n      sku: 'SKU-9011',\n      image: 'https://images.unsplash.com/photo-1527443224154-c4a3942d3acf?w=300&auto=format&fit=crop&q=80',\n      currentPrice: 679.0,\n      targetPrice: 599.0,\n      lowest90d: 629.0,\n      channel: 'email',\n      status: 'monitoring',\n      active: true,\n    },\n  ])\n\n  // Dynamic savings calculations\n  const additionalSavings = Math.max(0, currentPrice - targetPrice)\n  const additionalSavingsPercent = currentPrice > 0 ? ((additionalSavings / currentPrice) * 100).toFixed(1) : '0.0'\n\n  // Dynamic SVG Chart Target Line Calculation\n  // Y range: $240 (y=150) to $360 (y=20), height=130, span=120\n  const clampedTarget = Math.max(240, Math.min(360, targetPrice))\n  const targetY = 150 - ((clampedTarget - 240) / 120) * 130\n\n  const handleSetAlert = () => {\n    setAlertSaved(true)\n  }\n\n  const handlePresetClick = (price: number) => {\n    setTargetPrice(price)\n  }\n\n  const handleRemoveProduct = (id: string) => {\n    setTrackedProducts((prev) => prev.filter((p) => p.id !== id))\n  }\n\n  const triggerRefresh = () => {\n    setIsRefreshing(true)\n    setTimeout(() => {\n      setIsRefreshing(false)\n    }, 600)\n  }\n\n  return (\n    <div data-slot=\"price-drop-alert-card\" className={cn('mx-auto w-full max-w-5xl space-y-6', className)}>\n      {/* Header bar */}\n      <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n        <div className=\"space-y-1\">\n          <div className=\"flex items-center gap-2\">\n            <h2 className=\"text-foreground text-2xl font-semibold tracking-tight sm:text-3xl\">Price Drop Tracker</h2>\n            <Badge\n              variant=\"outline\"\n              className=\"border-success/30 bg-success/10 text-success gap-1.5 text-xs font-semibold\"\n            >\n              <span className=\"bg-success size-1.5 animate-pulse rounded-full\" />\n              Live Sync\n            </Badge>\n          </div>\n          <p className=\"text-muted-foreground text-sm\">\n            Monitor historical market fluctuations, set custom discount thresholds, and receive real-time notifications.\n          </p>\n        </div>\n\n        <div className=\"flex items-center gap-2\">\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            className=\"gap-1.5 text-xs\"\n            disabled={isRefreshing}\n            onClick={triggerRefresh}\n          >\n            <RefreshCw className={cn('size-3.5', isRefreshing && 'text-primary animate-spin')} />\n            <span>{isRefreshing ? 'Checking prices…' : 'Check All Prices'}</span>\n          </Button>\n        </div>\n      </div>\n\n      {/* 1. Product Wishlist Hero */}\n      <Card className=\"border-border bg-card overflow-hidden shadow-xs\">\n        <div className=\"grid grid-cols-1 gap-6 p-6 lg:grid-cols-12 lg:gap-8\">\n          {/* Thumbnail column */}\n          <div className=\"relative flex flex-col items-center justify-center lg:col-span-4\">\n            <div className=\"border-border/80 bg-muted/30 relative aspect-square w-full max-w-72 overflow-hidden rounded-xl border\">\n              <img\n                src=\"https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=800&auto=format&fit=crop&q=80\"\n                alt=\"Pro Studio Wireless Headphones - Space Black\"\n                className=\"size-full object-cover object-center transition-transform duration-300 hover:scale-105\"\n              />\n              <div className=\"absolute top-3 left-3 flex flex-col gap-1.5\">\n                <Badge\n                  variant=\"secondary\"\n                  className=\"bg-background/90 text-foreground border-border/40 border text-xs font-medium backdrop-blur-xs\"\n                >\n                  Audio · SKU-8842\n                </Badge>\n              </div>\n              <div className=\"absolute right-3 bottom-3\">\n                <Badge className=\"bg-success bg-success text-xs font-semibold text-white shadow-xs\">\n                  Lowest in 90 Days\n                </Badge>\n              </div>\n            </div>\n          </div>\n\n          {/* Product detail column */}\n          <div className=\"flex flex-col justify-between space-y-4 lg:col-span-8\">\n            <div className=\"space-y-2\">\n              <div className=\"text-muted-foreground flex flex-wrap items-center gap-2 text-xs\">\n                <span className=\"text-foreground font-medium\">Sony Acoustic Systems</span>\n                <span>•</span>\n                <span>Model WH-1000XM-Pro</span>\n                <span>•</span>\n                <span className=\"text-warning inline-flex items-center gap-1 font-medium\">\n                  ★ 4.8 <span className=\"text-muted-foreground\">(1,420 reviews)</span>\n                </span>\n              </div>\n\n              <h3 className=\"text-foreground text-xl font-semibold tracking-tight sm:text-2xl\">\n                Pro Studio Wireless Headphones - Space Black\n              </h3>\n\n              <p className=\"text-muted-foreground text-sm leading-relaxed\">\n                Flagship hybrid active noise cancelling with beryllium dynamic drivers, 38-hour battery longevity,\n                lossless LDAC codec support, and ultra-plush memory foam acoustic isolation cushions.\n              </p>\n            </div>\n\n            {/* Price breakdown strip */}\n            <div className=\"border-border/60 bg-muted/20 rounded-xl border p-4\">\n              <div className=\"flex flex-wrap items-baseline gap-3 sm:gap-4\">\n                <div className=\"flex items-baseline gap-1.5\">\n                  <span className=\"text-foreground text-3xl font-semibold tracking-tight tabular-nums sm:text-4xl\">\n                    ${currentPrice.toFixed(2)}\n                  </span>\n                  <span className=\"text-muted-foreground text-sm tabular-nums line-through\">\n                    ${msrpPrice.toFixed(2)}\n                  </span>\n                </div>\n\n                <div className=\"flex flex-wrap items-center gap-2\">\n                  <span className=\"border-success/25 bg-success/10 text-success inline-flex items-center gap-1 rounded-full border px-2.5 py-1 text-xs font-semibold\">\n                    <TrendingDown className=\"size-3.5\" />\n                    Save $50.00 (-14.3%)\n                  </span>\n\n                  <span className=\"border-border bg-background text-muted-foreground inline-flex items-center gap-1 rounded-full border px-2.5 py-1 text-xs font-medium\">\n                    <Tag className=\"text-warning size-3\" />\n                    90-Day Low:{' '}\n                    <span className=\"text-foreground font-semibold tabular-nums\">${lowest90dPrice.toFixed(2)}</span>\n                  </span>\n                </div>\n              </div>\n\n              <div className=\"text-muted-foreground border-border/40 mt-3 flex flex-wrap items-center gap-4 border-t pt-3 text-xs\">\n                <span className=\"text-success inline-flex items-center gap-1.5 font-medium\">\n                  <Check className=\"size-3.5\" /> In Stock (14 left)\n                </span>\n                <span>•</span>\n                <span className=\"inline-flex items-center gap-1.5\">\n                  <ShieldCheck className=\"text-muted-foreground size-3.5\" /> 30-Day Price Match Guarantee\n                </span>\n                <span>•</span>\n                <span>Free 2-Day Priority Delivery</span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Card>\n\n      {/* 2. 90-Day Price History SVG Trend Chart */}\n      <Card className=\"border-border bg-card shadow-xs\">\n        <CardHeader className=\"pb-3\">\n          <div className=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n            <div className=\"space-y-1\">\n              <CardTitle className=\"flex items-center gap-2 text-base font-semibold sm:text-lg\">\n                <History className=\"text-primary size-4\" />\n                90-Day Price History & Target Threshold\n              </CardTitle>\n              <CardDescription className=\"text-xs sm:text-sm\">\n                Retail price trajectory from May through August with real-time target price alert line.\n              </CardDescription>\n            </div>\n\n            {/* Quick trend stats pills */}\n            <div className=\"flex flex-wrap items-center gap-2 text-xs\">\n              <div className=\"border-border/80 bg-muted/40 rounded-md border px-2.5 py-1\">\n                <span className=\"text-muted-foreground\">High: </span>\n                <span className=\"text-foreground font-semibold tabular-nums\">$349.00</span>\n              </div>\n              <div className=\"border-border/80 bg-muted/40 rounded-md border px-2.5 py-1\">\n                <span className=\"text-muted-foreground\">Avg: </span>\n                <span className=\"text-foreground font-semibold tabular-nums\">$324.50</span>\n              </div>\n              <div className=\"border-success/30 bg-success/10 text-success rounded-md border px-2.5 py-1\">\n                <span className=\"opacity-80\">90d Low: </span>\n                <span className=\"font-bold tabular-nums\">$279.00</span>\n              </div>\n            </div>\n          </div>\n        </CardHeader>\n\n        <CardContent className=\"pt-2\">\n          <div className=\"border-border/60 bg-muted/10 relative w-full overflow-x-auto rounded-lg border p-2 sm:p-4\">\n            <svg\n              viewBox=\"0 0 600 180\"\n              className=\"h-auto w-full max-w-[560px] min-w-full overflow-visible select-none\"\n              preserveAspectRatio=\"xMidYMid meet\"\n            >\n              <defs>\n                <linearGradient id=\"react-price-gradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                  <stop offset=\"0%\" stopColor=\"var(--primary)\" stopOpacity=\"0.28\" />\n                  <stop offset=\"100%\" stopColor=\"var(--primary)\" stopOpacity=\"0.0\" />\n                </linearGradient>\n              </defs>\n\n              {/* Y-Axis Grid Lines & Labels */}\n              <line x1=\"50\" y1=\"20\" x2=\"575\" y2=\"20\" className=\"stroke-border/40 stroke-1\" strokeDasharray=\"3 3\" />\n              <text x=\"42\" y=\"24\" textAnchor=\"end\" className=\"fill-muted-foreground font-mono text-xs tabular-nums\">\n                $360\n              </text>\n\n              <line x1=\"50\" y1=\"63.3\" x2=\"575\" y2=\"63.3\" className=\"stroke-border/40 stroke-1\" strokeDasharray=\"3 3\" />\n              <text x=\"42\" y=\"67\" textAnchor=\"end\" className=\"fill-muted-foreground font-mono text-xs tabular-nums\">\n                $320\n              </text>\n\n              <line\n                x1=\"50\"\n                y1=\"106.6\"\n                x2=\"575\"\n                y2=\"106.6\"\n                className=\"stroke-border/40 stroke-1\"\n                strokeDasharray=\"3 3\"\n              />\n              <text x=\"42\" y=\"110\" textAnchor=\"end\" className=\"fill-muted-foreground font-mono text-xs tabular-nums\">\n                $280\n              </text>\n\n              <line x1=\"50\" y1=\"150\" x2=\"575\" y2=\"150\" className=\"stroke-border/40 stroke-1\" />\n              <text x=\"42\" y=\"154\" textAnchor=\"end\" className=\"fill-muted-foreground font-mono text-xs tabular-nums\">\n                $240\n              </text>\n\n              {/* Price Area Fill */}\n              <path\n                d=\"M 60,31.9 C 105,31.9 105,53.6 150,53.6 C 200,53.6 200,31.9 250,31.9 C 300,31.9 300,107.8 350,107.8 C 405,107.8 405,64.4 460,64.4 C 510,64.4 510,86.1 560,86.1 L 560,150 L 60,150 Z\"\n                fill=\"url(#react-price-gradient)\"\n              />\n\n              {/* Price Trajectory Line */}\n              <path\n                d=\"M 60,31.9 C 105,31.9 105,53.6 150,53.6 C 200,53.6 200,31.9 250,31.9 C 300,31.9 300,107.8 350,107.8 C 405,107.8 405,64.4 460,64.4 C 510,64.4 510,86.1 560,86.1\"\n                fill=\"none\"\n                className=\"stroke-primary stroke-2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              />\n\n              {/* Target Price Dynamic Threshold Line (Amber Dashed) */}\n              <line\n                x1=\"50\"\n                y1={targetY}\n                x2=\"575\"\n                y2={targetY}\n                className=\"stroke-amber-500 stroke-2 transition-colors duration-150 ease-out\"\n                strokeDasharray=\"4 4\"\n              />\n\n              {/* Dynamic Target Label Tag */}\n              <g transform={`translate(565, ${targetY})`} className=\"transition-colors duration-150 ease-out\">\n                <rect x=\"-96\" y=\"-18\" width=\"96\" height=\"18\" rx=\"4\" className=\"fill-warning dark:fill-amber-600\" />\n                <text\n                  x=\"-48\"\n                  y=\"-5\"\n                  textAnchor=\"middle\"\n                  className=\"fill-white font-mono text-xs font-bold tracking-tight\"\n                >\n                  Alert: ${targetPrice.toFixed(0)}.00\n                </text>\n              </g>\n\n              {/* Historical Data Points & Annotations */}\n              <circle cx=\"60\" cy=\"31.9\" r=\"3.5\" className=\"fill-background stroke-primary stroke-2\" />\n              <circle cx=\"150\" cy=\"53.6\" r=\"3.5\" className=\"fill-background stroke-primary stroke-2\" />\n              <circle cx=\"250\" cy=\"31.9\" r=\"3.5\" className=\"fill-background stroke-primary stroke-2\" />\n\n              {/* Pt 4: Jul 26 ($279 - 90d Low) */}\n              <circle cx=\"350\" cy=\"107.8\" r=\"5\" className=\"stroke-background fill-success stroke-2\" />\n              <rect\n                x=\"306\"\n                y=\"117\"\n                width=\"88\"\n                height=\"18\"\n                rx=\"4\"\n                className=\"fill-success/10 stroke-emerald-500/30 stroke-1\"\n              />\n              <text\n                x=\"350\"\n                y=\"130\"\n                textAnchor=\"middle\"\n                className=\"dark:fill-success fill-emerald-600 font-mono text-xs font-bold\"\n              >\n                90d Low · $279\n              </text>\n\n              <circle cx=\"460\" cy=\"64.4\" r=\"3.5\" className=\"fill-background stroke-primary stroke-2\" />\n\n              {/* Pt 6: Aug 21 (Current $299) */}\n              <circle cx=\"560\" cy=\"86.1\" r=\"5\" className=\"fill-primary stroke-background stroke-2\" />\n              <rect\n                x=\"508\"\n                y=\"58\"\n                width=\"80\"\n                height=\"18\"\n                rx=\"4\"\n                className=\"fill-primary/10 stroke-primary/30 stroke-1\"\n              />\n              <text x=\"548\" y=\"71\" textAnchor=\"middle\" className=\"fill-primary font-mono text-xs font-bold\">\n                Now · $299.00\n              </text>\n\n              {/* X-Axis Timeline Milestones */}\n              <text x=\"60\" y=\"168\" textAnchor=\"middle\" className=\"fill-muted-foreground font-mono text-xs\">\n                May 22\n              </text>\n              <text x=\"150\" y=\"168\" textAnchor=\"middle\" className=\"fill-muted-foreground font-mono text-xs\">\n                Jun 15\n              </text>\n              <text x=\"250\" y=\"168\" textAnchor=\"middle\" className=\"fill-muted-foreground font-mono text-xs\">\n                Jul 05\n              </text>\n              <text x=\"350\" y=\"168\" textAnchor=\"middle\" className=\"fill-muted-foreground font-mono text-xs\">\n                Jul 26\n              </text>\n              <text x=\"460\" y=\"168\" textAnchor=\"middle\" className=\"fill-muted-foreground font-mono text-xs\">\n                Aug 10\n              </text>\n              <text x=\"560\" y=\"168\" textAnchor=\"middle\" className=\"fill-foreground font-mono text-xs font-semibold\">\n                Today\n              </text>\n            </svg>\n          </div>\n\n          <div className=\"text-muted-foreground mt-3 flex items-center justify-between text-xs\">\n            <div className=\"flex items-center gap-2\">\n              <span className=\"bg-warning size-2 rounded-full\" />\n              <span>Amber dashed threshold line updates automatically as you move the target slider below.</span>\n            </div>\n            <span className=\"font-mono text-xs\">Updated 4m ago</span>\n          </div>\n        </CardContent>\n      </Card>\n\n      {/* 3. Configure Price Drop Alert Form */}\n      <Card className=\"border-border bg-card shadow-xs\">\n        <CardHeader>\n          <CardTitle className=\"flex items-center gap-2 text-base font-semibold sm:text-lg\">\n            <BellRing className=\"text-primary size-4\" />\n            Configure Price Drop Alert\n          </CardTitle>\n          <CardDescription className=\"text-xs sm:text-sm\">\n            Set your notification channel and custom trigger price. We check pricing every 15 minutes across verified\n            retailers.\n          </CardDescription>\n        </CardHeader>\n\n        <CardContent className=\"space-y-6\">\n          {/* Step 1: Alert Delivery Method Radio */}\n          <div className=\"space-y-3\">\n            <label className=\"text-foreground text-sm font-semibold\">1. Alert Delivery Channel</label>\n            <RadioGroup\n              value={alertMethod}\n              onValueChange={(val) => setAlertMethod(val as 'email' | 'sms')}\n              className=\"grid grid-cols-1 gap-3 sm:grid-cols-2\"\n            >\n              <label\n                htmlFor=\"react-method-email\"\n                className={cn(\n                  'flex cursor-pointer items-center gap-3 rounded-lg border p-3.5 transition-colors',\n                  alertMethod === 'email'\n                    ? 'border-primary bg-primary/5 ring-primary/20 shadow-xs ring-1'\n                    : 'border-border bg-card hover:bg-muted/40',\n                )}\n              >\n                <RadioGroupItem id=\"react-method-email\" value=\"email\" />\n                <div className=\"space-y-0.5\">\n                  <div className=\"text-foreground flex items-center gap-1.5 text-sm font-semibold\">\n                    <Mail className=\"text-muted-foreground size-3.5\" />\n                    Email Notification\n                  </div>\n                  <p className=\"text-muted-foreground font-mono text-xs\">customer@example.com</p>\n                </div>\n              </label>\n\n              <label\n                htmlFor=\"react-method-sms\"\n                className={cn(\n                  'flex cursor-pointer items-center gap-3 rounded-lg border p-3.5 transition-colors',\n                  alertMethod === 'sms'\n                    ? 'border-primary bg-primary/5 ring-primary/20 shadow-xs ring-1'\n                    : 'border-border bg-card hover:bg-muted/40',\n                )}\n              >\n                <RadioGroupItem id=\"react-method-sms\" value=\"sms\" />\n                <div className=\"space-y-0.5\">\n                  <div className=\"text-foreground flex items-center gap-1.5 text-sm font-semibold\">\n                    <Smartphone className=\"text-muted-foreground size-3.5\" />\n                    SMS Push Notification\n                  </div>\n                  <p className=\"text-muted-foreground font-mono text-xs\">+1 (555) 019-2834</p>\n                </div>\n              </label>\n            </RadioGroup>\n          </div>\n\n          <Separator />\n\n          {/* Step 2: Target Price Slider & Input */}\n          <div className=\"space-y-4\">\n            <div className=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n              <div className=\"space-y-0.5\">\n                <label className=\"text-foreground text-sm font-semibold\">2. Target Price Alert Threshold</label>\n                <p className=\"text-muted-foreground text-xs\">\n                  Trigger an alert when the item price drops to or below this amount.\n                </p>\n              </div>\n\n              {/* Target Price Display */}\n              <div className=\"flex items-center gap-2\">\n                <div className=\"border-border bg-muted/40 flex items-center rounded-lg border px-3 py-1.5\">\n                  <span className=\"text-muted-foreground mr-1.5 text-xs font-medium\">Target:</span>\n                  <span className=\"text-foreground font-mono text-lg font-semibold tabular-nums\">\n                    ${targetPrice.toFixed(2)}\n                  </span>\n                </div>\n              </div>\n            </div>\n\n            {/* Slider component */}\n            <div className=\"space-y-2 pt-2\">\n              <Slider\n                value={[targetPrice]}\n                onValueChange={(val) => setTargetPrice(val[0])}\n                min={200}\n                max={349}\n                step={1}\n                className=\"w-full\"\n              />\n\n              {/* Min/Max labels */}\n              <div className=\"text-muted-foreground flex justify-between font-mono text-xs\">\n                <span>$200.00 (Deep Deal)</span>\n                <span className=\"text-warning font-semibold\">Target: ${targetPrice.toFixed(2)}</span>\n                <span>$349.00 (MSRP)</span>\n              </div>\n            </div>\n\n            {/* Savings calculation box & quick presets */}\n            <div className=\"border-border/80 bg-muted/20 flex flex-col gap-3 rounded-lg border p-3.5 sm:flex-row sm:items-center sm:justify-between\">\n              <div className=\"flex items-center gap-2\">\n                <Tag className=\"text-success size-4 shrink-0\" />\n                <div className=\"text-xs\">\n                  {targetPrice < currentPrice ? (\n                    <>\n                      <span className=\"text-foreground font-medium\">Notify when price drops below </span>\n                      <span className=\"text-success font-mono font-semibold\">${targetPrice.toFixed(2)}</span>\n                      <span className=\"text-muted-foreground\"> — saves an extra </span>\n                      <span className=\"text-foreground font-mono font-semibold\">${additionalSavings.toFixed(2)}</span>\n                      <span className=\"text-muted-foreground\"> ({additionalSavingsPercent}% additional drop)</span>\n                    </>\n                  ) : targetPrice === currentPrice ? (\n                    <>\n                      <span className=\"text-foreground font-medium\">Matches current price </span>\n                      <span className=\"text-primary font-mono font-semibold\">${currentPrice.toFixed(2)}</span>\n                      <span className=\"text-muted-foreground\"> — triggers on any new price movement</span>\n                    </>\n                  ) : (\n                    <span className=\"text-foreground font-medium\">\n                      Target is set above current price (${currentPrice.toFixed(2)}). Alert triggers immediately.\n                    </span>\n                  )}\n                </div>\n              </div>\n\n              {/* Quick preset buttons */}\n              <div className=\"flex shrink-0 flex-wrap items-center gap-1.5\">\n                <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  className=\"h-7 px-2 font-mono text-xs\"\n                  onClick={() => handlePresetClick(289)}\n                >\n                  $289 (-$10)\n                </Button>\n                <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  className=\"border-success/40 text-success h-7 px-2 font-mono text-xs\"\n                  onClick={() => handlePresetClick(279)}\n                >\n                  $279 (Low)\n                </Button>\n                <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  className=\"h-7 px-2 font-mono text-xs\"\n                  onClick={() => handlePresetClick(249)}\n                >\n                  $249 (-$50)\n                </Button>\n              </div>\n            </div>\n          </div>\n\n          <Separator />\n\n          {/* Step 3: In-Stock Notification Switch */}\n          <div className=\"border-border/80 flex flex-col gap-3 rounded-lg border p-4 sm:flex-row sm:items-center sm:justify-between\">\n            <div className=\"space-y-0.5\">\n              <div className=\"flex items-center gap-2\">\n                <Zap className=\"text-warning size-4\" />\n                <label htmlFor=\"react-stock-switch\" className=\"text-foreground cursor-pointer text-sm font-semibold\">\n                  In-Stock & Lightning Flash Deal Notification\n                </label>\n              </div>\n              <p className=\"text-muted-foreground text-xs\">\n                Send instant high-priority alert if available stock falls below 5 units or if a limited lightning coupon\n                goes live.\n              </p>\n            </div>\n\n            <Switch id=\"react-stock-switch\" checked={inStockNotification} onCheckedChange={setInStockNotification} />\n          </div>\n\n          {/* Alert confirmation banner (shown if saved) */}\n          {alertSaved && (\n            <div className=\"border-success/30 bg-success/10 text-success flex items-start gap-3 rounded-lg border p-4\">\n              <div className=\"bg-success mt-0.5 shrink-0 rounded-full p-1 text-white\">\n                <Check className=\"size-3.5\" />\n              </div>\n              <div className=\"space-y-1 text-xs\">\n                <p className=\"text-success dark:text-foreground text-sm font-semibold\">\n                  Price Drop Alert Configured Successfully!\n                </p>\n                <p>\n                  We'll monitor <span className=\"font-semibold\">Pro Studio Wireless Headphones</span> every 15 minutes\n                  and dispatch an alert to{' '}\n                  <span className=\"font-mono font-semibold\">\n                    {alertMethod === 'email' ? 'customer@example.com' : '+1 (555) 019-2834'}\n                  </span>{' '}\n                  the moment the price reaches{' '}\n                  <span className=\"font-mono font-semibold\">${targetPrice.toFixed(2)}</span> or lower.\n                </p>\n              </div>\n            </div>\n          )}\n        </CardContent>\n\n        <CardFooter className=\"border-border/60 flex flex-col gap-3 border-t pt-4 sm:flex-row sm:items-center sm:justify-between\">\n          <div className=\"text-muted-foreground flex items-center gap-1.5 text-xs\">\n            <ShieldCheck className=\"text-success size-4 shrink-0\" />\n            <span>Zero spam guarantee. You can pause or cancel alert subscriptions anytime.</span>\n          </div>\n\n          <Button className=\"w-full gap-2 font-semibold sm:w-auto\" onClick={handleSetAlert}>\n            <BellRing className=\"size-4\" />\n            <span>{alertSaved ? 'Update Price Drop Alert' : 'Set Price Drop Alert'}</span>\n          </Button>\n        </CardFooter>\n      </Card>\n\n      {/* 4. Active Tracked Products Mini Table */}\n      <Card className=\"border-border bg-card shadow-xs\">\n        <CardHeader className=\"pb-3\">\n          <div className=\"flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between\">\n            <div>\n              <CardTitle className=\"text-base font-semibold sm:text-lg\">Active Tracked Wishlist Items</CardTitle>\n              <CardDescription className=\"text-xs sm:text-sm\">\n                Real-time monitoring list currently linked to your notification profile.\n              </CardDescription>\n            </div>\n            <Badge variant=\"secondary\" className=\"w-fit font-mono text-xs\">\n              {trackedProducts.length} items active\n            </Badge>\n          </div>\n        </CardHeader>\n\n        <CardContent>\n          <div className=\"border-border/60 overflow-x-auto rounded-lg border\">\n            <Table>\n              <TableHeader>\n                <TableRow className=\"bg-muted/40 hover:bg-muted/40\">\n                  <TableHead className=\"text-xs font-semibold\">Product</TableHead>\n                  <TableHead className=\"text-right text-xs font-semibold\">Current Price</TableHead>\n                  <TableHead className=\"text-right text-xs font-semibold\">Target Alert</TableHead>\n                  <TableHead className=\"text-right text-xs font-semibold\">90-Day Low</TableHead>\n                  <TableHead className=\"text-xs font-semibold\">Channel</TableHead>\n                  <TableHead className=\"text-xs font-semibold\">Status</TableHead>\n                  <TableHead className=\"text-right text-xs font-semibold\">Actions</TableHead>\n                </TableRow>\n              </TableHeader>\n              <TableBody>\n                {trackedProducts.map((item) => (\n                  <TableRow key={item.id} className=\"transition-colors\">\n                    {/* Product name & image */}\n                    <TableCell className=\"py-3\">\n                      <div className=\"flex items-center gap-3\">\n                        <img\n                          src={item.image}\n                          alt={item.name}\n                          className=\"border-border/60 size-10 shrink-0 rounded-md border object-cover\"\n                        />\n                        <div className=\"min-w-0 space-y-0.5\">\n                          <p className=\"text-foreground max-w-56 truncate text-xs font-semibold sm:max-w-xs\">\n                            {item.name}\n                          </p>\n                          <p className=\"text-muted-foreground truncate text-xs\">\n                            {item.variant} · <span className=\"font-mono\">{item.sku}</span>\n                          </p>\n                        </div>\n                      </div>\n                    </TableCell>\n\n                    {/* Current Price */}\n                    <TableCell className=\"text-foreground py-3 text-right font-mono text-xs font-semibold tabular-nums\">\n                      ${item.currentPrice.toFixed(2)}\n                    </TableCell>\n\n                    {/* Target Price */}\n                    <TableCell className=\"text-warning text-warning py-3 text-right font-mono text-xs font-semibold tabular-nums\">\n                      ${item.targetPrice.toFixed(2)}\n                    </TableCell>\n\n                    {/* 90-Day Low */}\n                    <TableCell className=\"text-muted-foreground py-3 text-right font-mono text-xs tabular-nums\">\n                      ${item.lowest90d.toFixed(2)}\n                    </TableCell>\n\n                    {/* Alert Channel */}\n                    <TableCell className=\"py-3\">\n                      <Badge variant=\"outline\" className=\"gap-1 text-xs font-normal capitalize\">\n                        {item.channel === 'email' ? (\n                          <Mail className=\"text-muted-foreground size-3\" />\n                        ) : (\n                          <Smartphone className=\"text-muted-foreground size-3\" />\n                        )}\n                        {item.channel}\n                      </Badge>\n                    </TableCell>\n\n                    {/* Status Badge */}\n                    <TableCell className=\"py-3\">\n                      {item.status === 'reached' ? (\n                        <Badge\n                          className=\"border-success/30 bg-success/15 text-success gap-1 text-xs font-semibold\"\n                          variant=\"outline\"\n                        >\n                          <Check className=\"size-3\" /> Target Reached!\n                        </Badge>\n                      ) : (\n                        <Badge variant=\"secondary\" className=\"text-muted-foreground gap-1 text-xs font-medium\">\n                          <TrendingDown className=\"text-warning size-3\" /> Monitoring (-$\n                          {(item.currentPrice - item.targetPrice).toFixed(0)})\n                        </Badge>\n                      )}\n                    </TableCell>\n\n                    {/* Actions */}\n                    <TableCell className=\"py-3 text-right\">\n                      <div className=\"flex items-center justify-end gap-1.5\">\n                        <Button\n                          variant=\"ghost\"\n                          size=\"sm\"\n                          className=\"text-muted-foreground hover:text-destructive size-8 p-0\"\n                          title=\"Remove Tracker\"\n                          onClick={() => handleRemoveProduct(item.id)}\n                        >\n                          <Trash2 className=\"size-3.5\" />\n                        </Button>\n                      </div>\n                    </TableCell>\n                  </TableRow>\n                ))}\n              </TableBody>\n            </Table>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n\nexport default PriceDropAlertCard\n",
      "type": "registry:block",
      "target": "~/components/blocks/PriceDropAlertCard.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/radio-group.json",
    "https://uipkge.dev/r/react/separator.json",
    "https://uipkge.dev/r/react/slider.json",
    "https://uipkge.dev/r/react/switch.json",
    "https://uipkge.dev/r/react/table.json"
  ],
  "description": "E-commerce wishlist price tracker with 90-day price history chart, dynamic target price threshold slider, multi-channel alert configurator, and active tracked items table.",
  "categories": [
    "commerce",
    "ecommerce"
  ]
}