/**
 * Product Addons Customization Tab
 *
 * Template-based appearance customization with Stacked, Grid, and Inline layouts.
 * - NumberStepper replaces all Slider controls for compact sizing inputs
 * - Google Fonts searchable picker in Typography (Pro)
 */

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Button } from "@/components/ui/button"
import { Switch } from "@/components/ui/switch"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"
import { LivePreview } from "@/components/ui/live-preview"
import { Check, ChevronDown, LayoutTemplate, Minus, Palette, Plus, RotateCcw } from "lucide-react"
import { ProIndicator } from "@/components/pro/pro-indicator"
import {
  AddonCustomizationSettings,
  ProductAddonsSettings,
  quickStartPresets,
} from "../../config"
import { GlobalTypographyPicker } from "@/components/ui/global-typography-picker"
import { GlobalColorPicker } from "@/components/ui/global-color-picker"
import { ProductAddonsPreview } from "../product-addons-preview"

interface CustomizationTabProps {
  customization: AddonCustomizationSettings
  settings: ProductAddonsSettings
  isPro: boolean
  updateCustomization: <K extends keyof AddonCustomizationSettings>(key: K, value: AddonCustomizationSettings[K]) => void
  updateSettings: <K extends keyof ProductAddonsSettings>(key: K, value: ProductAddonsSettings[K]) => void
  resetCustomization: () => void
}

/* ------------------------------------------------------------------ */
/*  Reusable inline helpers                                            */
/* ------------------------------------------------------------------ */

/** Compact number input with +/- buttons — replaces Slider */
function NumberStepper({
  label,
  value,
  onChange,
  min,
  max,
  step = 1,
  unit = 'px',
}: {
  label: string
  value: number
  onChange: (v: number) => void
  min: number
  max: number
  step?: number
  unit?: string
}) {
  const clamp = (v: number) => Math.min(max, Math.max(min, v))
  return (
    <div className="flex items-center justify-between gap-2">
      <Label className="text-sm whitespace-nowrap">{label}</Label>
      <div className="inline-flex items-center rounded-md border bg-background">
        <button
          type="button"
          onClick={() => onChange(clamp(value - step))}
          disabled={value <= min}
          className="flex items-center justify-center h-8 w-8 text-muted-foreground hover:text-foreground disabled:opacity-30 transition-colors cursor-pointer"
        >
          <Minus className="h-3 w-3" />
        </button>
        <input
          type="text"
          value={`${value}${unit}`}
          onChange={(e) => {
            const parsed = parseInt(e.target.value, 10)
            if (!isNaN(parsed)) onChange(clamp(parsed))
          }}
          className="h-8 w-14 text-center text-sm border-x bg-transparent outline-none"
        />
        <button
          type="button"
          onClick={() => onChange(clamp(value + step))}
          disabled={value >= max}
          className="flex items-center justify-center h-8 w-8 text-muted-foreground hover:text-foreground disabled:opacity-30 transition-colors cursor-pointer"
        >
          <Plus className="h-3 w-3" />
        </button>
      </div>
    </div>
  )
}

/** Segmented control for visual toggles */
function SegmentedControl<T extends string>({
  value, onChange, options,
}: {
  value: T
  onChange: (v: T) => void
  options: { value: T; label: string }[]
}) {
  return (
    <div className="inline-flex items-center rounded-lg border bg-muted/40 p-0.5">
      {options.map(opt => (
        <button
          key={opt.value}
          type="button"
          onClick={() => onChange(opt.value)}
          className={`
            px-3 py-1.5 text-xs font-medium rounded-md transition-all cursor-pointer
            ${value === opt.value
              ? 'bg-background text-foreground shadow-sm'
              : 'text-muted-foreground hover:text-foreground'}
          `}
        >
          {opt.label}
        </button>
      ))}
    </div>
  )
}

/* ------------------------------------------------------------------ */
/*  Main component                                                     */
/* ------------------------------------------------------------------ */

export function CustomizationTab({
  customization,
  settings: _settings,
  isPro,
  updateCustomization,
  updateSettings: _updateSettings,
  resetCustomization,
}: CustomizationTabProps) {
  const [expandedSections, setExpandedSections] = useState<Record<string, boolean>>({
    colors: false,
    layout: false,
    typography: false,
    spacing: false,
    prices: false,
    images: false,
  })

  const template = customization.template || 'stacked'

  const applyPreset = (presetId: string) => {
    const preset = quickStartPresets.find(p => p.id === presetId)
    if (preset) {
      Object.entries(preset.customization).forEach(([key, value]) => {
        updateCustomization(
          key as keyof AddonCustomizationSettings,
          value as AddonCustomizationSettings[keyof AddonCustomizationSettings]
        )
      })
    }
  }

  const toggleSection = (section: string) => {
    setExpandedSections(prev => ({ ...prev, [section]: !prev[section] }))
  }

  /* ------------------------------------------------------------------ */
  /*  Render                                                             */
  /* ------------------------------------------------------------------ */
  return (
    <div className="grid gap-6 lg:grid-cols-2">
      {/* Left Column */}
      <div className="space-y-6">
        {/* Template Selection */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <LayoutTemplate className="h-5 w-5" />
              Layout Template
            </CardTitle>
            <CardDescription>
              Choose how addon options are displayed to customers
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-3 gap-3">
              {/* Stacked */}
              <button
                type="button"
                onClick={() => updateCustomization('template', 'stacked')}
                className={`relative flex flex-col items-center gap-2 rounded-lg border-2 p-4 transition-all text-left ${
                  template === 'stacked'
                    ? 'border-primary bg-primary/5 shadow-sm'
                    : 'border-muted hover:border-muted-foreground/30'
                }`}
              >
                <div className="w-full space-y-1.5 mb-1">
                  <div className="h-2 w-full rounded-sm bg-muted-foreground/20" />
                  <div className="h-2 w-full rounded-sm bg-muted-foreground/20" />
                  <div className="h-2 w-3/4 rounded-sm bg-muted-foreground/20" />
                </div>
                <div className="text-center">
                  <div className="text-sm font-medium">Stacked</div>
                  <div className="text-[10px] text-muted-foreground">Vertical list</div>
                </div>
                {template === 'stacked' && (
                  <div className="absolute -top-1.5 -right-1.5 rounded-full bg-primary p-0.5">
                    <Check className="h-3 w-3 text-white" strokeWidth={3} />
                  </div>
                )}
              </button>

              {/* Grid */}
              <button
                type="button"
                onClick={() => updateCustomization('template', 'grid')}
                className={`relative flex flex-col items-center gap-2 rounded-lg border-2 p-4 transition-all text-left ${
                  template === 'grid'
                    ? 'border-primary bg-primary/5 shadow-sm'
                    : 'border-muted hover:border-muted-foreground/30'
                }`}
              >
                <div className="grid grid-cols-2 gap-1.5 w-full mb-1">
                  <div className="h-5 rounded-sm bg-muted-foreground/20" />
                  <div className="h-5 rounded-sm bg-muted-foreground/20" />
                  <div className="h-5 rounded-sm bg-muted-foreground/20" />
                  <div className="h-5 rounded-sm bg-muted-foreground/20" />
                </div>
                <div className="text-center">
                  <div className="text-sm font-medium">Grid</div>
                  <div className="text-[10px] text-muted-foreground">Option cards</div>
                </div>
                {template === 'grid' && (
                  <div className="absolute -top-1.5 -right-1.5 rounded-full bg-primary p-0.5">
                    <Check className="h-3 w-3 text-white" strokeWidth={3} />
                  </div>
                )}
              </button>

              {/* Inline */}
              <button
                type="button"
                onClick={() => updateCustomization('template', 'inline')}
                className={`relative flex flex-col items-center gap-2 rounded-lg border-2 p-4 transition-all text-left ${
                  template === 'inline'
                    ? 'border-primary bg-primary/5 shadow-sm'
                    : 'border-muted hover:border-muted-foreground/30'
                }`}
              >
                <div className="flex flex-wrap gap-1 w-full mb-1">
                  <div className="h-4 w-8 rounded-full bg-muted-foreground/20" />
                  <div className="h-4 w-10 rounded-full bg-muted-foreground/20" />
                  <div className="h-4 w-7 rounded-full bg-muted-foreground/20" />
                </div>
                <div className="text-center">
                  <div className="text-sm font-medium">Inline</div>
                  <div className="text-[10px] text-muted-foreground">Horizontal pills</div>
                </div>
                {template === 'inline' && (
                  <div className="absolute -top-1.5 -right-1.5 rounded-full bg-primary p-0.5">
                    <Check className="h-3 w-3 text-white" strokeWidth={3} />
                  </div>
                )}
              </button>
            </div>

            {/* Option Columns — shown when Grid template is selected */}
            {template === 'grid' && (
              <div className="mt-4 space-y-2">
                <Label className="text-sm">Grid Columns</Label>
                <SegmentedControl
                  value={String(customization.optionColumns || 2) as '1' | '2' | '3' | '4'}
                  onChange={(v) => updateCustomization('optionColumns', Number(v))}
                  options={[
                    { value: '1', label: '1 Column' },
                    { value: '2', label: '2 Columns' },
                    { value: '3', label: '3 Columns' },
                    { value: '4', label: '4 Columns' },
                  ]}
                />
              </div>
            )}
          </CardContent>
        </Card>

        {/* Customize Design */}
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <div>
              <CardTitle className="flex items-center gap-2">
                <Palette className="h-5 w-5" />
                Customize Design
              </CardTitle>
              <CardDescription>
                {isPro
                  ? 'Fine-tune every aspect of your addon appearance'
                  : 'Customize the colors of your addon appearance'}
              </CardDescription>
            </div>
            <Button variant="outline" size="sm" onClick={resetCustomization}>
              <RotateCcw className="h-3 w-3 mr-1" />
              Reset
            </Button>
          </CardHeader>
          <CardContent className="space-y-0">
            {/* Quick Start Presets */}
            <div className="flex items-center gap-2 pb-3">
              <span className="text-sm text-muted-foreground">Quick start:</span>
              {quickStartPresets.map(preset => (
                <Button
                  key={preset.id}
                  variant="outline"
                  size="sm"
                  className="h-7 px-2.5 text-xs gap-1.5"
                  onClick={() => applyPreset(preset.id)}
                >
                  <span
                    className="w-3 h-3 rounded-full border"
                    style={{ backgroundColor: preset.color, borderColor: preset.color }}
                  />
                  {preset.label}
                </Button>
              ))}
            </div>

            {/* Colors — Free */}
            <Collapsible open={expandedSections.colors} onOpenChange={() => toggleSection('colors')}>
              <CollapsibleTrigger className="flex w-full items-center justify-between py-3 text-sm font-medium hover:text-primary border-t mt-3">
                Colors
                <ChevronDown className={`h-4 w-4 transition-transform ${expandedSections.colors ? 'rotate-180' : ''}`} />
              </CollapsibleTrigger>
              <CollapsibleContent className="space-y-3 pt-2 pb-4">
                <div className="grid grid-cols-2 gap-3">
                  <GlobalColorPicker label="Container Background" value={customization.containerBackground} onChange={v => updateCustomization('containerBackground', v)} globalTokenId="background" />
                  <GlobalColorPicker label="Container Border" value={customization.containerBorderColor} onChange={v => updateCustomization('containerBorderColor', v)} globalTokenId="accent" featureDefault="#e5e7eb" />
                </div>
                <div className="grid grid-cols-2 gap-3">
                  <GlobalColorPicker label="Title Color" value={customization.titleColor} onChange={v => updateCustomization('titleColor', v)} globalTokenId="text" />
                  <GlobalColorPicker label="Description Color" value={customization.descriptionColor} onChange={v => updateCustomization('descriptionColor', v)} />
                </div>
                <div className="grid grid-cols-2 gap-3">
                  <GlobalColorPicker label="Label Color" value={customization.labelColor} onChange={v => updateCustomization('labelColor', v)} globalTokenId="text" />
                  <GlobalColorPicker label="Price Color" value={customization.priceColor} onChange={v => updateCustomization('priceColor', v)} globalTokenId="primary" featureDefault="#00226b" />
                </div>
                <div className="grid grid-cols-2 gap-3">
                  <GlobalColorPicker label="Input Border" value={customization.inputBorderColor} onChange={v => updateCustomization('inputBorderColor', v)} globalTokenId="accent" featureDefault="#d1d5db" />
                  <GlobalColorPicker label="Input Focus Border" value={customization.inputFocusBorderColor} onChange={v => updateCustomization('inputFocusBorderColor', v)} globalTokenId="primary" />
                </div>
                <div className="grid grid-cols-2 gap-3">
                  <GlobalColorPicker label="Required Indicator" value={customization.requiredIndicatorColor} onChange={v => updateCustomization('requiredIndicatorColor', v)} globalTokenId="error" featureDefault="#ef4444" />
                  <GlobalColorPicker label="Total Price Color" value={customization.totalPriceColor} onChange={v => updateCustomization('totalPriceColor', v)} globalTokenId="text" />
                </div>
                <div className="grid grid-cols-2 gap-3">
                  <GlobalColorPicker label="Input Background" value={customization.inputBackgroundColor} onChange={v => updateCustomization('inputBackgroundColor', v)} globalTokenId="background" />
                  <GlobalColorPicker label="Total Price Background" value={customization.totalPriceBackground} onChange={v => updateCustomization('totalPriceBackground', v)} />
                </div>
                <div className="grid grid-cols-2 gap-3">
                  <GlobalColorPicker label="Selected Image Border" value={customization.imageOptionSelectedBorderColor} onChange={v => updateCustomization('imageOptionSelectedBorderColor', v)} globalTokenId="primary" />
                </div>
              </CollapsibleContent>
            </Collapsible>

            {/* Upgrade nudge for Free users */}
            {!isPro && (
              <p className="text-sm text-muted-foreground py-4 border-t">
                For full customization control including typography, spacing, borders,
                and more, upgrade to Swift Commerce Pro.
              </p>
            )}

            {/* Layout & Display — Pro only */}
            {isPro && (
              <Collapsible open={expandedSections.layout} onOpenChange={() => toggleSection('layout')}>
                <CollapsibleTrigger className="flex w-full items-center justify-between py-3 text-sm font-medium hover:text-primary border-t">
                  <span>Layout & Display</span>
                  <div className="flex items-center gap-2">
                    <ProIndicator size="sm" />
                    <ChevronDown className={`h-4 w-4 transition-transform ${expandedSections.layout ? 'rotate-180' : ''}`} />
                  </div>
                </CollapsibleTrigger>
                <CollapsibleContent className="space-y-4 pt-2 pb-4">
                  {template === 'grid' && (
                    <>
                      <div className="space-y-2">
                        <Label className="text-sm">Card Style</Label>
                        <SegmentedControl
                          value={customization.optionCardStyle || 'bordered'}
                          onChange={(v) => updateCustomization('optionCardStyle', v)}
                          options={[
                            { value: 'bordered', label: 'Bordered' },
                            { value: 'filled', label: 'Filled' },
                          ]}
                        />
                      </div>
                    </>
                  )}
                  <div className="flex items-center justify-between">
                    <Label className="text-sm">Show Descriptions</Label>
                    <Switch
                      checked={customization.showDescriptions !== false}
                      onCheckedChange={(checked) => updateCustomization('showDescriptions', checked)}
                    />
                  </div>
                </CollapsibleContent>
              </Collapsible>
            )}

            {/* Typography — Pro only */}
            {isPro && (
              <Collapsible open={expandedSections.typography} onOpenChange={() => toggleSection('typography')}>
                <CollapsibleTrigger className="flex w-full items-center justify-between py-3 text-sm font-medium hover:text-primary border-t">
                  <span>Typography</span>
                  <div className="flex items-center gap-2">
                    <ProIndicator size="sm" />
                    <ChevronDown className={`h-4 w-4 transition-transform ${expandedSections.typography ? 'rotate-180' : ''}`} />
                  </div>
                </CollapsibleTrigger>
                <CollapsibleContent className="space-y-4 pt-2 pb-4">
                  {/* Font Family — with global typography support */}
                  <GlobalTypographyPicker
                    label="Font Family"
                    value={customization.fontFamily || 'inherit'}
                    onChange={(value) => updateCustomization('fontFamily', value)}
                    globalTokenId="body"
                    featureDefault="inherit"
                  />

                  {/* Title */}
                  <div className="space-y-2">
                    <Label className="text-sm text-muted-foreground">Title</Label>
                    <div className="space-y-2">
                      <NumberStepper
                        label="Size"
                        value={customization.titleFontSize}
                        onChange={v => updateCustomization('titleFontSize', v)}
                        min={12} max={24}
                      />
                      <div className="flex items-center justify-between gap-2">
                        <Label className="text-sm whitespace-nowrap">Weight</Label>
                        <Select value={customization.titleFontWeight} onValueChange={v => updateCustomization('titleFontWeight', v)}>
                          <SelectTrigger className="h-8 w-[140px] text-sm"><SelectValue /></SelectTrigger>
                          <SelectContent>
                            <SelectItem value="400">Normal</SelectItem>
                            <SelectItem value="500">Medium</SelectItem>
                            <SelectItem value="600">Semi-bold</SelectItem>
                            <SelectItem value="700">Bold</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                    </div>
                  </div>

                  {/* Description */}
                  <div className="space-y-2">
                    <Label className="text-sm text-muted-foreground">Description</Label>
                    <NumberStepper
                      label="Size"
                      value={customization.descriptionFontSize}
                      onChange={v => updateCustomization('descriptionFontSize', v)}
                      min={10} max={18}
                    />
                  </div>

                  {/* Label */}
                  <div className="space-y-2">
                    <Label className="text-sm text-muted-foreground">Label</Label>
                    <NumberStepper
                      label="Size"
                      value={customization.labelFontSize}
                      onChange={v => updateCustomization('labelFontSize', v)}
                      min={10} max={18}
                    />
                  </div>
                </CollapsibleContent>
              </Collapsible>
            )}

            {/* Spacing & Dimensions — Pro only */}
            {isPro && (
              <Collapsible open={expandedSections.spacing} onOpenChange={() => toggleSection('spacing')}>
                <CollapsibleTrigger className="flex w-full items-center justify-between py-3 text-sm font-medium hover:text-primary border-t">
                  <span>Spacing & Dimensions</span>
                  <div className="flex items-center gap-2">
                    <ProIndicator size="sm" />
                    <ChevronDown className={`h-4 w-4 transition-transform ${expandedSections.spacing ? 'rotate-180' : ''}`} />
                  </div>
                </CollapsibleTrigger>
                <CollapsibleContent className="space-y-3 pt-2 pb-4">
                  <NumberStepper
                    label="Border Radius"
                    value={customization.containerBorderRadius}
                    onChange={v => updateCustomization('containerBorderRadius', v)}
                    min={0} max={24}
                  />
                  <NumberStepper
                    label="Padding"
                    value={customization.containerPadding}
                    onChange={v => updateCustomization('containerPadding', v)}
                    min={0} max={40} step={2}
                  />
                  <NumberStepper
                    label="Input Border Radius"
                    value={customization.inputBorderRadius}
                    onChange={v => updateCustomization('inputBorderRadius', v)}
                    min={0} max={16}
                  />
                </CollapsibleContent>
              </Collapsible>
            )}

            {/* Price Styles — Pro only */}
            {isPro && (
              <Collapsible open={expandedSections.prices} onOpenChange={() => toggleSection('prices')}>
                <CollapsibleTrigger className="flex w-full items-center justify-between py-3 text-sm font-medium hover:text-primary border-t">
                  <span>Price Styles</span>
                  <div className="flex items-center gap-2">
                    <ProIndicator size="sm" />
                    <ChevronDown className={`h-4 w-4 transition-transform ${expandedSections.prices ? 'rotate-180' : ''}`} />
                  </div>
                </CollapsibleTrigger>
                <CollapsibleContent className="space-y-3 pt-2 pb-4">
                  <NumberStepper
                    label="Price Size"
                    value={customization.priceFontSize}
                    onChange={v => updateCustomization('priceFontSize', v)}
                    min={10} max={20}
                  />
                  <div className="flex items-center justify-between gap-2">
                    <Label className="text-sm whitespace-nowrap">Price Weight</Label>
                    <Select value={customization.priceFontWeight} onValueChange={v => updateCustomization('priceFontWeight', v)}>
                      <SelectTrigger className="h-8 w-[140px] text-sm"><SelectValue /></SelectTrigger>
                      <SelectContent>
                        <SelectItem value="400">Normal</SelectItem>
                        <SelectItem value="500">Medium</SelectItem>
                        <SelectItem value="600">Semi-bold</SelectItem>
                        <SelectItem value="700">Bold</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="pt-2 border-t">
                    <Label className="text-sm text-muted-foreground mb-3 block">Total Price Display</Label>
                    <div className="space-y-3">
                      <NumberStepper
                        label="Size"
                        value={customization.totalPriceFontSize}
                        onChange={v => updateCustomization('totalPriceFontSize', v)}
                        min={14} max={24}
                      />
                      <div className="flex items-center justify-between gap-2">
                        <Label className="text-sm whitespace-nowrap">Weight</Label>
                        <Select value={customization.totalPriceFontWeight} onValueChange={v => updateCustomization('totalPriceFontWeight', v)}>
                          <SelectTrigger className="h-8 w-[140px] text-sm"><SelectValue /></SelectTrigger>
                          <SelectContent>
                            <SelectItem value="500">Medium</SelectItem>
                            <SelectItem value="600">Semi-bold</SelectItem>
                            <SelectItem value="700">Bold</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                    </div>
                  </div>
                </CollapsibleContent>
              </Collapsible>
            )}

            {/* Image Options — Pro only */}
            {isPro && (
              <Collapsible open={expandedSections.images} onOpenChange={() => toggleSection('images')}>
                <CollapsibleTrigger className="flex w-full items-center justify-between py-3 text-sm font-medium hover:text-primary border-t">
                  <span>Image Options</span>
                  <div className="flex items-center gap-2">
                    <ProIndicator size="sm" />
                    <ChevronDown className={`h-4 w-4 transition-transform ${expandedSections.images ? 'rotate-180' : ''}`} />
                  </div>
                </CollapsibleTrigger>
                <CollapsibleContent className="space-y-3 pt-2 pb-4">
                  <NumberStepper
                    label="Image Size"
                    value={customization.imageOptionSize}
                    onChange={v => updateCustomization('imageOptionSize', v)}
                    min={40} max={120} step={4}
                  />
                  <NumberStepper
                    label="Border Radius"
                    value={customization.imageOptionBorderRadius}
                    onChange={v => updateCustomization('imageOptionBorderRadius', v)}
                    min={0} max={24}
                  />
                  <NumberStepper
                    label="Selected Border"
                    value={customization.imageOptionSelectedBorderWidth}
                    onChange={v => updateCustomization('imageOptionSelectedBorderWidth', v)}
                    min={1} max={6}
                  />
                </CollapsibleContent>
              </Collapsible>
            )}
          </CardContent>
        </Card>
      </div>

      {/* Right Column — Sticky Preview */}
      <LivePreview
        title="Live Preview"
        description="Real-time preview of your addon styling"
        stickyTop={100}
        minHeight={400}
        showPattern={true}
        headerActions={
          <Button variant="outline" size="sm" onClick={resetCustomization} className="h-8">
            <RotateCcw className="h-3 w-3 mr-1.5" />
            Reset
          </Button>
        }
      >
        <div className="w-full p-4">
          <ProductAddonsPreview customization={customization} />
        </div>
      </LivePreview>
    </div>
  )
}