/**
 * Footer Section
 * Footer text, copyright, and social links settings
 */

import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Switch } from '@/components/ui/switch';
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from '@/components/ui/collapsible';
import {
  ChevronDown,
  Footprints,
  Facebook,
  Twitter,
  Instagram,
  Linkedin,
  Youtube,
} from 'lucide-react';
import { useState } from 'react';
import type { EmailFooter, EmailSocialLinks } from '../types';

interface FooterSectionProps {
  footer: EmailFooter;
  onUpdate: (updates: Partial<EmailFooter>) => void;
}

export function FooterSection({ footer, onUpdate }: FooterSectionProps) {
  const [isOpen, setIsOpen] = useState(false);

  const handleSocialLinkUpdate = (updates: Partial<EmailSocialLinks>) => {
    onUpdate({
      socialLinks: {
        ...footer.socialLinks,
        ...updates,
      },
    });
  };

  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">
          <Footprints className="h-4 w-4 text-muted-foreground" />
          <span className="font-medium">Footer</span>
        </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">
        {/* Footer Text */}
        <div className="space-y-2">
          <Label>Footer Message</Label>
          <Textarea
            value={footer.text}
            onChange={(e) => onUpdate({ text: e.target.value })}
            placeholder="Thank you for your business!"
            rows={2}
          />
        </div>

        {/* Copyright Text */}
        <div className="space-y-2">
          <Label>Copyright Text</Label>
          <Input
            value={footer.copyrightText}
            onChange={(e) => onUpdate({ copyrightText: e.target.value })}
            placeholder="© {year} {site_name}. All rights reserved."
          />
          <p className="text-xs text-muted-foreground">
            Available placeholders: {'{year}'}, {'{site_name}'}, {'{site_url}'}
          </p>
        </div>

        {/* Social Links Toggle */}
        <div className="flex items-center justify-between">
          <div className="space-y-0.5">
            <Label>Show Social Links</Label>
            <p className="text-xs text-muted-foreground">
              Display social media icons in the footer
            </p>
          </div>
          <Switch
            checked={footer.showSocialLinks}
            onCheckedChange={(checked) => onUpdate({ showSocialLinks: checked })}
          />
        </div>

        {/* Social Links Inputs */}
        {footer.showSocialLinks && (
          <div className="space-y-3 pt-2">
            <h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
              Social Media URLs
            </h4>

            <div className="space-y-2">
              <div className="flex items-center gap-2">
                <Facebook className="h-4 w-4 text-muted-foreground" />
                <Input
                  value={footer.socialLinks.facebook}
                  onChange={(e) =>
                    handleSocialLinkUpdate({ facebook: e.target.value })
                  }
                  placeholder="https://facebook.com/yourpage"
                  className="flex-1"
                />
              </div>

              <div className="flex items-center gap-2">
                <Twitter className="h-4 w-4 text-muted-foreground" />
                <Input
                  value={footer.socialLinks.twitter}
                  onChange={(e) =>
                    handleSocialLinkUpdate({ twitter: e.target.value })
                  }
                  placeholder="https://twitter.com/yourhandle"
                  className="flex-1"
                />
              </div>

              <div className="flex items-center gap-2">
                <Instagram className="h-4 w-4 text-muted-foreground" />
                <Input
                  value={footer.socialLinks.instagram}
                  onChange={(e) =>
                    handleSocialLinkUpdate({ instagram: e.target.value })
                  }
                  placeholder="https://instagram.com/yourprofile"
                  className="flex-1"
                />
              </div>

              <div className="flex items-center gap-2">
                <Linkedin className="h-4 w-4 text-muted-foreground" />
                <Input
                  value={footer.socialLinks.linkedin}
                  onChange={(e) =>
                    handleSocialLinkUpdate({ linkedin: e.target.value })
                  }
                  placeholder="https://linkedin.com/company/yourcompany"
                  className="flex-1"
                />
              </div>

              <div className="flex items-center gap-2">
                <Youtube className="h-4 w-4 text-muted-foreground" />
                <Input
                  value={footer.socialLinks.youtube}
                  onChange={(e) =>
                    handleSocialLinkUpdate({ youtube: e.target.value })
                  }
                  placeholder="https://youtube.com/yourchannel"
                  className="flex-1"
                />
              </div>
            </div>
          </div>
        )}

        {/* Unsubscribe Link */}
        <div className="flex items-center justify-between">
          <div className="space-y-0.5">
            <Label>Unsubscribe Link</Label>
            <p className="text-xs text-muted-foreground">
              Show an unsubscribe link in the email footer
            </p>
          </div>
          <Switch
            checked={footer.showUnsubscribeLink}
            onCheckedChange={(checked) => onUpdate({ showUnsubscribeLink: checked })}
          />
        </div>

        {footer.showUnsubscribeLink && (
          <div className="space-y-2">
            <Label>Unsubscribe Text</Label>
            <Input
              value={footer.unsubscribeText}
              onChange={(e) => onUpdate({ unsubscribeText: e.target.value })}
              placeholder="Unsubscribe from these emails"
            />
          </div>
        )}
      </CollapsibleContent>
    </Collapsible>
  );
}

export default FooterSection;