/**
 * Placeholders Section
 * Reference for available email placeholders/merge tags.
 *
 * Accepts optional `placeholders` and `categoryLabels` props so each
 * feature can supply its own set. When omitted the subscription-specific
 * defaults are used (backward-compatible).
 */

import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from '@/components/ui/collapsible';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip';
import { ChevronDown, Variable, Copy, Check } from 'lucide-react';
import { toast } from 'sonner';

/** A single placeholder / merge-tag definition. */
export interface PlaceholderConfig {
  tag: string;
  description: string;
  example: string;
  category: string;
}

/** Label + colour for a placeholder category badge. */
export interface PlaceholderCategoryLabel {
  label: string;
  color: string;
}

// ---------------------------------------------------------------------------
// Default subscription placeholders (used when no props are supplied)
// ---------------------------------------------------------------------------

const defaultPlaceholders: PlaceholderConfig[] = [
  // Customer
  { tag: '{customer_name}', description: 'Customer full name', example: 'John Doe', category: 'customer' },
  { tag: '{customer_first_name}', description: 'Customer first name', example: 'John', category: 'customer' },
  { tag: '{customer_last_name}', description: 'Customer last name', example: 'Doe', category: 'customer' },
  { tag: '{customer_email}', description: 'Customer email address', example: 'john@example.com', category: 'customer' },
  // Order
  { tag: '{order_id}', description: 'Order number', example: '#1234', category: 'order' },
  { tag: '{order_date}', description: 'Order date', example: 'January 15, 2025', category: 'order' },
  { tag: '{order_total}', description: 'Order total amount', example: '$99.99', category: 'order' },
  { tag: '{payment_method}', description: 'Payment method used', example: 'Credit Card', category: 'order' },
  // Subscription
  { tag: '{subscription_id}', description: 'Subscription ID', example: '#SUB-5678', category: 'subscription' },
  { tag: '{subscription_status}', description: 'Current subscription status', example: 'Active', category: 'subscription' },
  { tag: '{product_name}', description: 'Subscription product name', example: 'Premium Membership', category: 'subscription' },
  { tag: '{subscription_price}', description: 'Subscription price', example: '$29.99/month', category: 'subscription' },
  { tag: '{next_billing_date}', description: 'Next billing/renewal date', example: 'February 15, 2025', category: 'subscription' },
  { tag: '{expiry_date}', description: 'Subscription expiry date', example: 'March 15, 2025', category: 'subscription' },
  { tag: '{billing_period}', description: 'Billing period', example: 'Monthly', category: 'subscription' },
  // Site
  { tag: '{site_name}', description: 'Your website name', example: 'My Store', category: 'site' },
  { tag: '{site_url}', description: 'Your website URL', example: 'https://mystore.com', category: 'site' },
  { tag: '{admin_email}', description: 'Admin email address', example: 'admin@mystore.com', category: 'site' },
  { tag: '{my_account_url}', description: 'My Account page URL', example: 'https://mystore.com/my-account', category: 'site' },
  // Date
  { tag: '{current_date}', description: 'Current date', example: 'January 24, 2026', category: 'date' },
  { tag: '{year}', description: 'Current year', example: '2026', category: 'date' },
];

const defaultCategoryLabels: Record<string, PlaceholderCategoryLabel> = {
  customer: { label: 'Customer', color: 'bg-blue-100 text-blue-700' },
  order: { label: 'Order', color: 'bg-green-100 text-green-700' },
  subscription: { label: 'Subscription', color: 'bg-purple-100 text-purple-700' },
  site: { label: 'Site', color: 'bg-orange-100 text-orange-700' },
  date: { label: 'Date', color: 'bg-gray-100 text-gray-700' },
};

// ---------------------------------------------------------------------------
// Placeholder item component
// ---------------------------------------------------------------------------

interface PlaceholderItemProps {
  placeholder: PlaceholderConfig;
  catLabels: Record<string, PlaceholderCategoryLabel>;
}

function PlaceholderItem({ placeholder, catLabels }: PlaceholderItemProps) {
  const [copied, setCopied] = useState(false);

  const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(placeholder.tag);
      setCopied(true);
      toast.success(`Copied ${placeholder.tag}`);
      setTimeout(() => setCopied(false), 2000);
    } catch {
      toast.error('Failed to copy');
    }
  };

  const cat = catLabels[placeholder.category];

  return (
    <div className="flex items-center justify-between py-2 px-3 hover:bg-muted/50 rounded-md group">
      <div className="flex-1 min-w-0">
        <div className="flex items-center gap-2">
          <code className="text-xs font-mono bg-muted px-1.5 py-0.5 rounded">
            {placeholder.tag}
          </code>
          {cat && (
            <Badge variant="outline" className={`text-[10px] px-1.5 py-0 ${cat.color}`}>
              {cat.label}
            </Badge>
          )}
        </div>
        <p className="text-xs text-muted-foreground mt-0.5 truncate">
          {placeholder.description}
        </p>
      </div>
      <TooltipProvider>
        <Tooltip>
          <TooltipTrigger asChild>
            <Button
              variant="ghost"
              size="icon"
              className="h-7 w-7 opacity-0 group-hover:opacity-100 transition-opacity"
              onClick={handleCopy}
            >
              {copied ? (
                <Check className="h-3.5 w-3.5 text-green-600" />
              ) : (
                <Copy className="h-3.5 w-3.5" />
              )}
            </Button>
          </TooltipTrigger>
          <TooltipContent side="left">
            <p>Click to copy</p>
          </TooltipContent>
        </Tooltip>
      </TooltipProvider>
    </div>
  );
}

// ---------------------------------------------------------------------------
// Main component
// ---------------------------------------------------------------------------

interface PlaceholdersSectionProps {
  /** Custom placeholder list. Falls back to subscription defaults. */
  placeholders?: PlaceholderConfig[];
  /** Custom category label map. Falls back to subscription defaults. */
  categoryLabels?: Record<string, PlaceholderCategoryLabel>;
}

export function PlaceholdersSection({
  placeholders,
  categoryLabels,
}: PlaceholdersSectionProps = {}) {
  const [isOpen, setIsOpen] = useState(false);
  const [activeCategory, setActiveCategory] = useState<string | null>(null);

  const items = placeholders ?? defaultPlaceholders;
  const catLabels = categoryLabels ?? defaultCategoryLabels;

  const filteredPlaceholders = activeCategory
    ? items.filter((p) => p.category === activeCategory)
    : items;

  // Derive unique category keys from the items.
  const categories = Array.from(new Set(items.map((p) => p.category)));

  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">
          <Variable className="h-4 w-4 text-muted-foreground" />
          <span className="font-medium">Placeholders</span>
          <Badge variant="secondary" className="text-[10px] px-1.5">
            {items.length}
          </Badge>
        </div>
        <ChevronDown
          className={`h-4 w-4 text-muted-foreground transition-transform ${
            isOpen ? 'rotate-180' : ''
          }`}
        />
      </CollapsibleTrigger>
      <CollapsibleContent className="border-b">
        {/* Category Filter */}
        <div className="p-3 border-b bg-muted/30">
          <div className="flex flex-wrap gap-1">
            <Button
              variant={activeCategory === null ? 'default' : 'outline'}
              size="sm"
              className="h-6 text-xs px-2"
              onClick={() => setActiveCategory(null)}
            >
              All
            </Button>
            {categories.map((cat) => (
              <Button
                key={cat}
                variant={activeCategory === cat ? 'default' : 'outline'}
                size="sm"
                className="h-6 text-xs px-2"
                onClick={() => setActiveCategory(cat)}
              >
                {catLabels[cat]?.label ?? cat}
              </Button>
            ))}
          </div>
        </div>

        {/* Placeholder List */}
        <div className="max-h-[300px] overflow-y-auto p-2">
          {filteredPlaceholders.map((placeholder) => (
            <PlaceholderItem
              key={placeholder.tag}
              placeholder={placeholder}
              catLabels={catLabels}
            />
          ))}
        </div>

        {/* Helper Text */}
        <div className="p-3 border-t bg-muted/30">
          <p className="text-xs text-muted-foreground">
            Click any placeholder to copy it. Use these in your email content fields.
          </p>
        </div>
      </CollapsibleContent>
    </Collapsible>
  );
}