/**
 * Content Section
 * Email subject, heading, body, and additional content settings.
 *
 * The optional `body` field is used by features (e.g. Email Verification)
 * that let users fully edit the email body text. When `body` is undefined
 * (e.g. Subscriptions), the textarea is hidden.
 */

import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from '@/components/ui/collapsible';
import { ChevronDown, FileText } from 'lucide-react';
import { useState, useEffect } from 'react';

export interface EmailContentSettings {
  subject: string;
  heading: string;
  /** Optional user-editable body (e.g. Email Verification). */
  body?: string;
  additionalContent: string;
  preheaderText: string;
}

interface ContentSectionProps {
  content: EmailContentSettings;
  onUpdate: (updates: Partial<EmailContentSettings>) => void;
  emailTypeLabel: string;
  defaultOpen?: boolean;
  /** Optional hint text shown below the subject field. */
  subjectPlaceholderHint?: string;
}

export function ContentSection({
  content,
  onUpdate,
  emailTypeLabel,
  defaultOpen = true,
  subjectPlaceholderHint,
}: ContentSectionProps) {
  const [isOpen, setIsOpen] = useState(defaultOpen);

  // Open by default when email type changes
  useEffect(() => {
    if (defaultOpen) {
      setIsOpen(true);
    }
  }, [emailTypeLabel, defaultOpen]);

  const hasBody = content.body !== undefined;

  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">
          <FileText className="h-4 w-4 text-muted-foreground" />
          <div className="text-left">
            <span className="font-medium">Content</span>
            <p className="text-xs text-muted-foreground">{emailTypeLabel}</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">
        {/* Email Subject */}
        <div className="space-y-2">
          <Label htmlFor="email-subject">Email Subject</Label>
          <Input
            id="email-subject"
            value={content.subject}
            onChange={(e) => onUpdate({ subject: e.target.value })}
            placeholder="Enter email subject"
          />
          {subjectPlaceholderHint && (
            <p className="text-xs text-muted-foreground">
              {subjectPlaceholderHint}
            </p>
          )}
        </div>

        {/* Email Heading */}
        <div className="space-y-2">
          <Label htmlFor="email-heading">Email Heading</Label>
          <Input
            id="email-heading"
            value={content.heading}
            onChange={(e) => onUpdate({ heading: e.target.value })}
            placeholder="Enter email heading"
          />
        </div>

        {/* Email Body — only shown when the feature supports editable body */}
        {hasBody && (
          <div className="space-y-2">
            <Label htmlFor="email-body">Email Body</Label>
            <Textarea
              id="email-body"
              value={content.body}
              onChange={(e) => onUpdate({ body: e.target.value })}
              placeholder="Enter the main email body text"
              rows={8}
              className="font-mono text-sm"
            />
            <p className="text-xs text-muted-foreground">
              Use placeholders from the Placeholders section to personalize the content.
            </p>
          </div>
        )}

        {/* Preheader Text */}
        <div className="space-y-2">
          <Label htmlFor="preheader-text">Preheader Text</Label>
          <Input
            id="preheader-text"
            value={content.preheaderText}
            onChange={(e) => onUpdate({ preheaderText: e.target.value })}
            placeholder="Preview text shown in inbox"
          />
          <p className="text-xs text-muted-foreground">
            The preview text shown next to the subject line in email clients.
          </p>
        </div>

        {/* Additional Content */}
        <div className="space-y-2">
          <Label htmlFor="additional-content">Additional Content</Label>
          <Textarea
            id="additional-content"
            value={content.additionalContent}
            onChange={(e) => onUpdate({ additionalContent: e.target.value })}
            placeholder="Additional text to include in the email"
            rows={3}
          />
          <p className="text-xs text-muted-foreground">
            This text appears at the bottom of the email content.
          </p>
        </div>
      </CollapsibleContent>
    </Collapsible>
  );
}

export default ContentSection;