/**
 * Table Section
 * Styling controls for data tables in email templates
 */

import { Label } from '@/components/ui/label';
import { Slider } from '@/components/ui/slider';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from '@/components/ui/collapsible';
import { ChevronDown, Table2 } from 'lucide-react';
import { useState } from 'react';
import { ColorPickerInput } from '@/components/ui/color-picker-input';
import type { EmailTable } from '../types';

interface TableSectionProps {
  table: EmailTable;
  onUpdate: (updates: Partial<EmailTable>) => void;
}

export function TableSection({ table, onUpdate }: TableSectionProps) {
  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">
          <Table2 className="h-4 w-4 text-muted-foreground" />
          <span className="font-medium">Table</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">
        {/* Header Colors */}
        <div className="space-y-2">
          <h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
            Table Header
          </h4>
          <ColorPickerInput
            label="Background"
            value={table.headerBackground}
            onChange={(value) => onUpdate({ headerBackground: value })}
          />
          <ColorPickerInput
            label="Text Color"
            value={table.headerTextColor}
            onChange={(value) => onUpdate({ headerTextColor: value })}
          />
          <div className="flex items-center justify-between gap-3">
            <Label className="text-sm flex-1">Font Weight</Label>
            <Select
              value={table.headerFontWeight}
              onValueChange={(value: 'normal' | 'bold' | '600') =>
                onUpdate({ headerFontWeight: value })
              }
            >
              <SelectTrigger className="w-28 h-8">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="normal">Normal</SelectItem>
                <SelectItem value="600">Semi Bold</SelectItem>
                <SelectItem value="bold">Bold</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>

        {/* Row Colors */}
        <div className="space-y-2 pt-2">
          <h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
            Table Rows
          </h4>
          <ColorPickerInput
            label="Row Background"
            value={table.rowBackground}
            onChange={(value) => onUpdate({ rowBackground: value })}
          />
          <ColorPickerInput
            label="Alternate Row"
            value={table.alternateRowBackground}
            onChange={(value) => onUpdate({ alternateRowBackground: value })}
          />
        </div>

        {/* Borders & Spacing */}
        <div className="space-y-2 pt-2">
          <h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
            Borders & Spacing
          </h4>
          <ColorPickerInput
            label="Border Color"
            value={table.borderColor}
            onChange={(value) => onUpdate({ borderColor: value })}
          />
          <div className="space-y-2">
            <div className="flex items-center justify-between">
              <Label className="text-sm">Cell Padding</Label>
              <span className="text-xs text-muted-foreground">
                {table.cellPadding}px
              </span>
            </div>
            <Slider
              value={[table.cellPadding]}
              onValueChange={([value]) => onUpdate({ cellPadding: value })}
              min={4}
              max={24}
              step={2}
              className="w-full"
            />
          </div>
        </div>
      </CollapsibleContent>
    </Collapsible>
  );
}