/**
 * Product Display Section
 * Controls for toggling product image, title, price, and button text
 * inside back-in-stock (or similar product-oriented) email templates.
 */

import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import { Switch } from '@/components/ui/switch';
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from '@/components/ui/collapsible';
import { ChevronDown, Package } from 'lucide-react';
import { useState } from 'react';

export interface ProductCardConfig {
  showImage: boolean;
  showTitle: boolean;
  showPrice: boolean;
  buttonText: string;
  /** Sample data rendered in the email preview. */
  sample: {
    name: string;
    price: string;
    imageUrl: string;
    productUrl: string;
  };
}

interface ProductDisplaySectionProps {
  productCard: ProductCardConfig;
  onUpdate: (updates: Partial<ProductCardConfig>) => void;
}

export function ProductDisplaySection({
  productCard,
  onUpdate,
}: ProductDisplaySectionProps) {
  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">
          <Package className="h-4 w-4 text-muted-foreground" />
          <div className="text-left">
            <span className="font-medium">Product Display</span>
            <p className="text-xs text-muted-foreground">
              Product card in email
            </p>
          </div>
        </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">
        {/* Show Product Image */}
        <div className="flex items-center justify-between">
          <div className="space-y-0.5">
            <Label htmlFor="show-product-image" className="text-sm">
              Product Image
            </Label>
            <p className="text-xs text-muted-foreground">
              Show the product image in the email
            </p>
          </div>
          <Switch
            id="show-product-image"
            checked={productCard.showImage}
            onCheckedChange={(v) => onUpdate({ showImage: v })}
          />
        </div>

        {/* Show Product Title */}
        <div className="flex items-center justify-between">
          <div className="space-y-0.5">
            <Label htmlFor="show-product-title" className="text-sm">
              Product Name
            </Label>
            <p className="text-xs text-muted-foreground">
              Show the product name in the email
            </p>
          </div>
          <Switch
            id="show-product-title"
            checked={productCard.showTitle}
            onCheckedChange={(v) => onUpdate({ showTitle: v })}
          />
        </div>

        {/* Show Product Price */}
        <div className="flex items-center justify-between">
          <div className="space-y-0.5">
            <Label htmlFor="show-product-price" className="text-sm">
              Product Price
            </Label>
            <p className="text-xs text-muted-foreground">
              Show the product price in the email
            </p>
          </div>
          <Switch
            id="show-product-price"
            checked={productCard.showPrice}
            onCheckedChange={(v) => onUpdate({ showPrice: v })}
          />
        </div>

        {/* Button Text */}
        <div className="space-y-2 pt-2 border-t">
          <Label htmlFor="product-button-text">Button Text</Label>
          <Input
            id="product-button-text"
            value={productCard.buttonText}
            onChange={(e) => onUpdate({ buttonText: e.target.value })}
            placeholder="Shop Now"
          />
          <p className="text-xs text-muted-foreground">
            The call-to-action button shown below the product
          </p>
        </div>
      </CollapsibleContent>
    </Collapsible>
  );
}

export default ProductDisplaySection;