import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import { Switch } from '@/components/ui/switch';
import { Slider } from '@/components/ui/slider';
import { cn } from '@/lib/utils';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import type { FloatingCTABlockData } from '@/components/public/blocks/FloatingCTABlock';

interface FloatingCTABlockEditorProps {
  data: FloatingCTABlockData;
  onChange: (data: FloatingCTABlockData) => void;
  isEditing: boolean;
}

export function FloatingCTABlockEditor({ data, onChange, isEditing }: FloatingCTABlockEditorProps) {
  if (!isEditing) {
    const variant = data.variant || 'bar';
    const title = data.title || 'Untitled';

    return (
      <div className="py-6 px-4">
        <p className="text-[10px] text-muted-foreground text-center mb-3 uppercase tracking-wider">
          Floating CTA — appears after {data.showAfterScroll || 25}% scroll
        </p>
        <div className={cn(
          'mx-auto',
          variant === 'pill' ? 'max-w-xs' : 'max-w-lg'
        )}>
          <div className={cn(
            'flex items-center gap-3 bg-card border shadow-lg',
            variant === 'bar' && 'rounded-xl px-5 py-3 justify-between',
            variant === 'card' && 'rounded-xl p-4 flex-col text-center',
            variant === 'minimal' && 'rounded-lg px-4 py-2.5 justify-between',
            variant === 'pill' && 'rounded-full px-5 py-2.5 justify-center',
          )}>
            <div className={cn(variant === 'card' && 'mb-1')}>
              <p className="font-semibold text-sm">{title}</p>
              {data.subtitle && variant !== 'pill' && (
                <p className="text-xs text-muted-foreground">{data.subtitle}</p>
              )}
            </div>
            <div className="flex items-center gap-2">
              {data.secondaryButtonText && (
                <div className="h-8 px-3 rounded-md border text-xs font-medium flex items-center">
                  {data.secondaryButtonText}
                </div>
              )}
              <div className="h-8 px-4 rounded-md bg-primary text-primary-foreground text-xs font-medium flex items-center">
                {data.buttonText || 'Click here'}
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-6 py-4">
      {/* Content Section */}
      <div className="space-y-4">
        <h4 className="font-medium text-sm text-muted-foreground uppercase tracking-wider">
          Content
        </h4>
        
        <div className="space-y-2">
          <Label>Title</Label>
          <Input
            value={data.title || ''}
            onChange={(e) => onChange({ ...data, title: e.target.value })}
            placeholder="Ex: Book your slot today!"
          />
        </div>

        <div className="space-y-2">
          <Label>Subtitle (optional)</Label>
          <Input
            value={data.subtitle || ''}
            onChange={(e) => onChange({ ...data, subtitle: e.target.value })}
            placeholder="Ex: Limited spots available"
          />
        </div>

        <div className="grid grid-cols-2 gap-4">
          <div className="space-y-2">
            <Label>Button text</Label>
            <Input
              value={data.buttonText || ''}
              onChange={(e) => onChange({ ...data, buttonText: e.target.value })}
              placeholder="Book now"
            />
          </div>
          <div className="space-y-2">
            <Label>Button link</Label>
            <Input
              value={data.buttonUrl || ''}
              onChange={(e) => onChange({ ...data, buttonUrl: e.target.value })}
              placeholder="/contact"
            />
          </div>
        </div>

        <div className="grid grid-cols-2 gap-4">
          <div className="space-y-2">
            <Label>Secondary button text (optional)</Label>
            <Input
              value={data.secondaryButtonText || ''}
              onChange={(e) => onChange({ ...data, secondaryButtonText: e.target.value })}
              placeholder="Read more"
            />
          </div>
          <div className="space-y-2">
            <Label>Secondary button link</Label>
            <Input
              value={data.secondaryButtonUrl || ''}
              onChange={(e) => onChange({ ...data, secondaryButtonUrl: e.target.value })}
              placeholder="/about"
            />
          </div>
        </div>
      </div>

      {/* Trigger Settings */}
      <div className="space-y-4">
        <h4 className="font-medium text-sm text-muted-foreground uppercase tracking-wider">
          Trigger
        </h4>

        <div className="space-y-2">
          <Label>Show after scroll: {data.showAfterScroll || 25}%</Label>
          <Slider
            value={[data.showAfterScroll || 25]}
            onValueChange={([value]) => onChange({ ...data, showAfterScroll: value })}
            min={0}
            max={100}
            step={5}
          />
          <p className="text-xs text-muted-foreground">
            CTA appears after the user has scrolled {data.showAfterScroll || 25}% of the page
          </p>
        </div>

        <div className="flex items-center justify-between">
          <div>
            <Label>Hide on scroll up</Label>
            <p className="text-xs text-muted-foreground">Hide when the user scrolls up</p>
          </div>
          <Switch
            checked={data.hideOnScrollUp ?? false}
            onCheckedChange={(checked) => onChange({ ...data, hideOnScrollUp: checked })}
          />
        </div>
      </div>

      {/* Display Settings */}
      <div className="space-y-4">
        <h4 className="font-medium text-sm text-muted-foreground uppercase tracking-wider">
          Appearance
        </h4>

        <div className="grid grid-cols-2 gap-4">
          <div className="space-y-2">
            <Label>Variant</Label>
            <Select
              value={data.variant || 'bar'}
              onValueChange={(value: FloatingCTABlockData['variant']) => 
                onChange({ ...data, variant: value })
              }
            >
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="bar">Bar (full width)</SelectItem>
                <SelectItem value="card">Card</SelectItem>
                <SelectItem value="minimal">Minimal</SelectItem>
                <SelectItem value="pill">Pill</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div className="space-y-2">
            <Label>Position</Label>
            <Select
              value={data.position || 'bottom'}
              onValueChange={(value: FloatingCTABlockData['position']) => 
                onChange({ ...data, position: value })
              }
            >
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="bottom">Centered</SelectItem>
                <SelectItem value="bottom-left">Bottom left</SelectItem>
                <SelectItem value="bottom-right">Bottom right</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>

        <div className="grid grid-cols-2 gap-4">
          <div className="space-y-2">
            <Label>Size</Label>
            <Select
              value={data.size || 'md'}
              onValueChange={(value: FloatingCTABlockData['size']) => 
                onChange({ ...data, size: value })
              }
            >
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="sm">Small</SelectItem>
                <SelectItem value="md">Medium</SelectItem>
                <SelectItem value="lg">Large</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div className="space-y-2">
            <Label>Animation</Label>
            <Select
              value={data.animationType || 'slide'}
              onValueChange={(value: FloatingCTABlockData['animationType']) => 
                onChange({ ...data, animationType: value })
              }
            >
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="slide">Slide up</SelectItem>
                <SelectItem value="fade">Fade in</SelectItem>
                <SelectItem value="scale">Scale in</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>

        <div className="space-y-3">
          <div className="flex items-center justify-between">
            <div>
               <Label>Show close button</Label>
               <p className="text-xs text-muted-foreground">Allows the user to dismiss the CTA</p>
            </div>
            <Switch
              checked={data.showCloseButton ?? true}
              onCheckedChange={(checked) => onChange({ ...data, showCloseButton: checked })}
            />
          </div>

          {data.showCloseButton && (
            <div className="flex items-center justify-between pl-4 border-l-2">
              <div>
                <Label>Remember dismissal</Label>
                <p className="text-xs text-muted-foreground">Don't show again this session</p>
              </div>
              <Switch
                checked={data.closePersistent ?? false}
                onCheckedChange={(checked) => onChange({ ...data, closePersistent: checked })}
              />
            </div>
          )}

          {data.variant === 'pill' && (
            <div className="flex items-center justify-between">
              <div>
                <Label>Show "Scroll to top" button</Label>
                <p className="text-xs text-muted-foreground">Extra button to go to the top</p>
              </div>
              <Switch
                checked={data.showScrollTop ?? false}
                onCheckedChange={(checked) => onChange({ ...data, showScrollTop: checked })}
              />
            </div>
          )}
        </div>
      </div>
    </div>
  );
}
