/**
 * Layout Section
 * Container width, padding, and border radius settings
 */

import { Label } from '@/components/ui/label';
import { Slider } from '@/components/ui/slider';
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from '@/components/ui/collapsible';
import { ChevronDown, LayoutTemplate } from 'lucide-react';
import { useState } from 'react';
import type { EmailLayout } from '../types';

interface LayoutSectionProps {
  layout: EmailLayout;
  onUpdate: (updates: Partial<EmailLayout>) => void;
}

export function LayoutSection({ layout, onUpdate }: LayoutSectionProps) {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <Collapsible open={isOpen} onOpenChange={setIsOpen}>
      <CollapsibleTrigger className="flex items-center justify-between w-full p-4 border-b hover:bg-muted/50 transition-colors">
        <div className="flex items-center gap-2">
          <LayoutTemplate className="h-4 w-4 text-muted-foreground" />
          <span className="font-medium">Layout</span>
        </div>
        <ChevronDown
          className={`h-4 w-4 text-muted-foreground transition-transform ${
            isOpen ? 'rotate-180' : ''
          }`}
        />
      </CollapsibleTrigger>
      <CollapsibleContent className="p-4 space-y-4 border-b">
        {/* Container Width */}
        <div className="space-y-2">
          <div className="flex items-center justify-between">
            <Label>Container Width</Label>
            <span className="text-sm text-muted-foreground">{layout.containerWidth}px</span>
          </div>
          <Slider
            value={[layout.containerWidth]}
            onValueChange={([value]) => onUpdate({ containerWidth: value })}
            min={400}
            max={800}
            step={20}
          />
          <p className="text-xs text-muted-foreground">
            600px is the recommended width for most email clients.
          </p>
        </div>

        {/* Content Padding */}
        <div className="space-y-2">
          <div className="flex items-center justify-between">
            <Label>Content Padding</Label>
            <span className="text-sm text-muted-foreground">{layout.contentPadding}px</span>
          </div>
          <Slider
            value={[layout.contentPadding]}
            onValueChange={([value]) => onUpdate({ contentPadding: value })}
            min={10}
            max={80}
            step={5}
          />
        </div>

        {/* Border Radius */}
        <div className="space-y-2">
          <div className="flex items-center justify-between">
            <Label>Border Radius</Label>
            <span className="text-sm text-muted-foreground">{layout.borderRadius}px</span>
          </div>
          <Slider
            value={[layout.borderRadius]}
            onValueChange={([value]) => onUpdate({ borderRadius: value })}
            min={0}
            max={20}
            step={1}
          />
        </div>

        {/* Visual Preview */}
        <div className="mt-4">
          <p className="text-xs text-muted-foreground mb-2">Layout Preview</p>
          <div
            className="mx-auto border border-dashed border-muted-foreground/30 bg-muted/20"
            style={{
              width: `${Math.min(layout.containerWidth / 3, 200)}px`,
              borderRadius: `${layout.borderRadius}px`,
            }}
          >
            <div
              className="bg-muted/50 h-16"
              style={{
                padding: `${layout.contentPadding / 4}px`,
                borderRadius: `${layout.borderRadius}px ${layout.borderRadius}px 0 0`,
              }}
            >
              <div className="h-full bg-background/50 rounded-sm" />
            </div>
          </div>
        </div>
      </CollapsibleContent>
    </Collapsible>
  );
}

export default LayoutSection;