/**
 * Colors Section
 * Color palette customization for email templates
 */

import { GlobalColorPicker } from '@/components/ui/global-color-picker';
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from '@/components/ui/collapsible';
import { ChevronDown, Palette } from 'lucide-react';
import { useState } from 'react';
import type { EmailColors } from '../types';

interface ColorsSectionProps {
  colors: EmailColors;
  onUpdate: (updates: Partial<EmailColors>) => void;
}

export function ColorsSection({ colors, onUpdate }: ColorsSectionProps) {
  const [isOpen, setIsOpen] = useState(true);

  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">
          <Palette className="h-4 w-4 text-muted-foreground" />
          <span className="font-medium">Colors</span>
        </div>
        <ChevronDown
          className={`h-4 w-4 text-muted-foreground transition-transform ${
            isOpen ? 'rotate-180' : ''
          }`}
        />
      </CollapsibleTrigger>
      <CollapsibleContent className="p-4 space-y-3 border-b">
        {/* Background Colors */}
        <div className="space-y-2">
          <h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
            Backgrounds
          </h4>
          <GlobalColorPicker
            label="Header"
            value={colors.headerBackground}
            onChange={(value) => onUpdate({ headerBackground: value })}
            featureDefault="#f7f7f7"
          />
          <GlobalColorPicker
            label="Body"
            value={colors.bodyBackground}
            onChange={(value) => onUpdate({ bodyBackground: value })}
            globalTokenId="background"
            featureDefault="#f7f7f7"
          />
          <GlobalColorPicker
            label="Content"
            value={colors.contentBackground}
            onChange={(value) => onUpdate({ contentBackground: value })}
            featureDefault="#ffffff"
          />
        </div>

        {/* Text Colors */}
        <div className="space-y-2 pt-2">
          <h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
            Text
          </h4>
          <GlobalColorPicker
            label="Primary Text"
            value={colors.primaryText}
            onChange={(value) => onUpdate({ primaryText: value })}
            globalTokenId="text"
            featureDefault="#333333"
          />
          <GlobalColorPicker
            label="Secondary Text"
            value={colors.secondaryText}
            onChange={(value) => onUpdate({ secondaryText: value })}
            featureDefault="#666666"
          />
          <GlobalColorPicker
            label="Link Color"
            value={colors.linkColor}
            onChange={(value) => onUpdate({ linkColor: value })}
            globalTokenId="primary"
            featureDefault="#0073aa"
          />
        </div>

        {/* Button Colors */}
        <div className="space-y-2 pt-2">
          <h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
            Buttons
          </h4>
          <GlobalColorPicker
            label="Button Background"
            value={colors.buttonBackground}
            onChange={(value) => onUpdate({ buttonBackground: value })}
            globalTokenId="primary"
            featureDefault="#0073aa"
          />
          <GlobalColorPicker
            label="Button Text"
            value={colors.buttonText}
            onChange={(value) => onUpdate({ buttonText: value })}
            featureDefault="#ffffff"
          />
        </div>

        {/* Border */}
        <div className="space-y-2 pt-2">
          <h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
            Border
          </h4>
          <GlobalColorPicker
            label="Border Color"
            value={colors.borderColor}
            onChange={(value) => onUpdate({ borderColor: value })}
            globalTokenId="border"
            featureDefault="#e5e5e5"
          />
        </div>
      </CollapsibleContent>
    </Collapsible>
  );
}

export default ColorsSection;