import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Label } from '@/components/ui/label'
import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button'
import { Skeleton } from '@/components/ui/skeleton'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import type { QuantitySelectorDefaults } from '../../hooks/use-selector-defaults'

interface Props {
  settings: QuantitySelectorDefaults | null
  onChange: (settings: QuantitySelectorDefaults) => void
  loading: boolean
  error: string | null
  onRetry: () => void
}
export function ProductDefaultsTab({settings, onChange, loading, error, onRetry}: Props) {
  if (loading) return <div className="max-w-4xl space-y-4" role="status" aria-label="Loading product defaults"><Skeleton className="h-10 w-64"/><Skeleton className="h-48 w-full"/></div>
  if (error || !settings) return <div className="max-w-4xl space-y-4 rounded-lg border bg-background p-6" role="alert"><p>{error || 'Product defaults are unavailable.'}</p><Button variant="outline" onClick={onRetry}>Retry</Button></div>
  const set = <K extends keyof QuantitySelectorDefaults>(key: K, value: QuantitySelectorDefaults[K]) => onChange({...settings, [key]: value})
  return <div className="w-full max-w-4xl space-y-6">
    <Card className="min-w-0 shadow-none">
      <CardHeader><CardTitle>Product-page quantity selector</CardTitle><CardDescription>Defaults for products using “Use dashboard default.” Product-specific overrides stay unchanged.</CardDescription></CardHeader>
      <CardContent className="space-y-6">
        <div className="max-w-xs space-y-2"><Label htmlFor="quantity-default-display">Selector</Label><Select value={settings.display} onValueChange={value => set('display', value as QuantitySelectorDefaults['display'])}><SelectTrigger id="quantity-default-display"><SelectValue/></SelectTrigger><SelectContent><SelectItem value="input">Number input</SelectItem><SelectItem value="dropdown">Dropdown</SelectItem><SelectItem value="buttons">Quantity buttons</SelectItem></SelectContent></Select></div>
        {settings.display !== 'input' && <>
          <div className="grid gap-6 sm:grid-cols-2">
            <div className="space-y-2"><Label htmlFor="quantity-default-source">Quantity choices</Label><Select value={settings.choice_source} onValueChange={value => set('choice_source', value as QuantitySelectorDefaults['choice_source'])}><SelectTrigger id="quantity-default-source"><SelectValue/></SelectTrigger><SelectContent><SelectItem value="range">From minimum, maximum and step</SelectItem><SelectItem value="custom">Custom quantities</SelectItem></SelectContent></Select></div>
            <div className="space-y-2"><Label htmlFor="quantity-default-width">Control width (px)</Label><Input className="max-w-40" id="quantity-default-width" type="number" min={80} max={320} step={1} value={settings.width} onChange={event => set('width', Number(event.target.value))}/></div>
          </div>
          {settings.choice_source === 'custom' && <div className="space-y-2"><Label htmlFor="quantity-default-choices">Custom quantities</Label><Input id="quantity-default-choices" value={settings.choices} placeholder="1, 3, 6, 12" onChange={event => set('choices', event.target.value)} aria-describedby="quantity-default-choices-help"/><p id="quantity-default-choices-help" className="text-sm text-muted-foreground">Comma-separated whole quantities. Choices outside the product’s limits or stock are hidden; purchasing rules do not change.</p></div>}
          <div className="max-w-xs space-y-2"><Label htmlFor="quantity-default-suffix">Label suffix</Label><Input id="quantity-default-suffix" maxLength={80} value={settings.suffix} placeholder="items" onChange={event => set('suffix', event.target.value)}/><p className="text-sm text-muted-foreground">For example, “items” displays “6 items.”</p></div>
        </>}
        <p className="text-sm text-muted-foreground">Classic product forms only. Automatic choices need a finite maximum and no more than 100 options; otherwise the original number input stays available. Cart and Checkout Blocks keep their native selectors.</p>
      </CardContent>
    </Card>
    <p className="text-sm text-muted-foreground">Role-specific quantities, customer purchase limits, product spend limits and category exclusions remain in each product’s Product data → Quantity Limits panel.</p>
  </div>
}