/**
 * Coupon Display Section
 * Controls for styling the coupon box in recovery emails.
 * Uses GlobalColorPicker so colours can sync with Global Styles.
 */

import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import { GlobalColorPicker } from '@/components/ui/global-color-picker';
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from '@/components/ui/collapsible';
import { ChevronDown, Ticket } from 'lucide-react';
import { useState } from 'react';

export interface CouponDisplayConfig {
  /** Background color of the coupon box. */
  boxBgColor: string;
  /** Border color of the coupon box. */
  boxBorderColor: string;
  /** Text color inside the coupon box. */
  boxTextColor: string;
  /** Background color of the coupon code highlight. */
  codeBgColor: string;
  /** The message template. Use {coupon_code} for the code placeholder. */
  messageText: string;
}

export const defaultCouponDisplayConfig: CouponDisplayConfig = {
  boxBgColor: '#f0fdf4',
  boxBorderColor: '#bbf7d0',
  boxTextColor: '#166534',
  codeBgColor: '#dcfce7',
  messageText: 'Use code {coupon_code} at checkout for a special discount!',
};

interface CouponDisplaySectionProps {
  config: CouponDisplayConfig;
  onUpdate: (updates: Partial<CouponDisplayConfig>) => void;
}

export function CouponDisplaySection({
  config,
  onUpdate,
}: CouponDisplaySectionProps) {
  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">
          <Ticket className="h-4 w-4 text-muted-foreground" />
          <div className="text-left">
            <span className="font-medium">Coupon Display</span>
            <p className="text-xs text-muted-foreground">
              Coupon box styling
            </p>
          </div>
        </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">
        {/* Colors */}
        <div className="space-y-2">
          <h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
            Colors
          </h4>
          <GlobalColorPicker
            label="Box Background"
            value={config.boxBgColor}
            onChange={(value) => onUpdate({ boxBgColor: value })}
            featureDefault="#f0fdf4"
          />
          <GlobalColorPicker
            label="Box Border"
            value={config.boxBorderColor}
            onChange={(value) => onUpdate({ boxBorderColor: value })}
            globalTokenId="border"
            featureDefault="#bbf7d0"
          />
          <GlobalColorPicker
            label="Text Color"
            value={config.boxTextColor}
            onChange={(value) => onUpdate({ boxTextColor: value })}
            globalTokenId="text"
            featureDefault="#166534"
          />
          <GlobalColorPicker
            label="Code Highlight"
            value={config.codeBgColor}
            onChange={(value) => onUpdate({ codeBgColor: value })}
            featureDefault="#dcfce7"
          />
        </div>

        {/* Message Text */}
        <div className="space-y-2 pt-2 border-t">
          <Label htmlFor="coupon-message-text">Coupon Message</Label>
          <Input
            id="coupon-message-text"
            value={config.messageText}
            onChange={(e) => onUpdate({ messageText: e.target.value })}
            placeholder="Use code {coupon_code} at checkout for a special discount!"
          />
          <p className="text-xs text-muted-foreground">
            Use <code className="bg-muted px-1 py-0.5 rounded text-xs">{'{coupon_code}'}</code> where the code should appear.
          </p>
        </div>

        {/* Live Preview */}
        <div className="pt-2 border-t">
          <Label className="text-xs text-muted-foreground mb-2 block">Preview</Label>
          <div
            style={{
              background: config.boxBgColor,
              border: `1px solid ${config.boxBorderColor}`,
              borderRadius: '8px',
              padding: '12px',
              textAlign: 'center',
            }}
          >
            <p
              style={{
                margin: 0,
                fontWeight: 600,
                color: config.boxTextColor,
                fontSize: '13px',
              }}
            >
              {config.messageText.split('{coupon_code}').map((part, i, arr) => (
                <span key={i}>
                  {part}
                  {i < arr.length - 1 && (
                    <code
                      style={{
                        background: config.codeBgColor,
                        padding: '2px 6px',
                        borderRadius: '4px',
                        fontSize: '12px',
                      }}
                    >
                      RECOVER-A1B2C3
                    </code>
                  )}
                </span>
              ))}
            </p>
          </div>
        </div>
      </CollapsibleContent>
    </Collapsible>
  );
}