/**
 * Sender Section
 * From Name, From Email, Reply-To Name, Reply-To Email settings.
 *
 * When fields are empty the WordPress / WooCommerce defaults are used.
 * Values set here apply to all emails sent through wp_mail().
 */

import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from '@/components/ui/collapsible';
import { ChevronDown, Send } from 'lucide-react';
import { useState } from 'react';
import type { EmailSender } from '../types';

interface SenderSectionProps {
  sender: EmailSender;
  onUpdate: (updates: Partial<EmailSender>) => void;
}

export function SenderSection({ sender, onUpdate }: SenderSectionProps) {
  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">
          <Send className="h-4 w-4 text-muted-foreground" />
          <div className="text-left">
            <span className="font-medium">Sender</span>
            <p className="text-xs text-muted-foreground">From &amp; Reply-To settings</p>
          </div>
        </div>
        <ChevronDown
          className={`h-4 w-4 text-muted-foreground transition-transform ${
            isOpen ? 'rotate-180' : ''
          }`}
        />
      </CollapsibleTrigger>
      <CollapsibleContent className="p-4 space-y-5 border-b">
        {/* From fields */}
        <div className="space-y-3">
          <h4 className="text-sm font-medium text-foreground">From</h4>

          <div className="space-y-2">
            <Label htmlFor="sender-from-name">&quot;From&quot; Name</Label>
            <Input
              id="sender-from-name"
              value={sender.fromName}
              onChange={(e) => onUpdate({ fromName: e.target.value })}
              placeholder="e.g. My Store"
            />
            <p className="text-xs text-muted-foreground">
              Leave empty to use the WordPress default.
            </p>
          </div>

          <div className="space-y-2">
            <Label htmlFor="sender-from-email">&quot;From&quot; Email</Label>
            <Input
              id="sender-from-email"
              type="email"
              value={sender.fromEmail}
              onChange={(e) => onUpdate({ fromEmail: e.target.value })}
              placeholder="e.g. shop@example.com"
            />
            <p className="text-xs text-muted-foreground">
              Leave empty to use the WordPress default.
            </p>
          </div>
        </div>

        {/* Reply-To fields */}
        <div className="space-y-3">
          <h4 className="text-sm font-medium text-foreground">Reply-To</h4>

          <div className="space-y-2">
            <Label htmlFor="sender-reply-name">Reply-To Name</Label>
            <Input
              id="sender-reply-name"
              value={sender.replyToName}
              onChange={(e) => onUpdate({ replyToName: e.target.value })}
              placeholder="Same as From Name"
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="sender-reply-email">Reply-To Email</Label>
            <Input
              id="sender-reply-email"
              type="email"
              value={sender.replyToEmail}
              onChange={(e) => onUpdate({ replyToEmail: e.target.value })}
              placeholder="Same as From Email"
            />
            <p className="text-xs text-muted-foreground">
              Set a different reply-to address so replies go to the right inbox.
            </p>
          </div>
        </div>

        <p className="text-xs text-muted-foreground border-t pt-3">
          These settings apply to all emails sent by WordPress on this site. If you use WooCommerce, its own &quot;From&quot; settings are under WooCommerce → Settings → Emails.
        </p>
      </CollapsibleContent>
    </Collapsible>
  );
}