import { getContacts } from "@/lib/api";
import { IconBrandTelegram, IconBrandTiktok } from "@tabler/icons-react";
import { motion } from "framer-motion";
import {
  Clock,
  Facebook,
  Instagram,
  Linkedin,
  Mail,
  MapPin,
  Phone,
  Twitter,
} from "lucide-react";
import React, { useEffect, useState } from "react";

interface ContactInfoItemProps {
  Icon: React.ElementType;
  title: string;
  content: string;
}

const ContactInfoItem = ({ Icon, title, content }: ContactInfoItemProps) => (
  <motion.div
    initial={{ y: 20, opacity: 0 }}
    whileInView={{ y: 0, opacity: 1 }}
    viewport={{ once: true }}
    transition={{ duration: 0.5 }}
    className="flex items-center space-x-4 bg-white/10 p-4 rounded-xl backdrop-blur-sm border border-white/20"
  >
    <div className="w-12 h-12 rounded-full bg-red-600/20 flex items-center justify-center">
      <Icon className="w-6 h-6 text-orange-400" />
    </div>
    <div>
      <h3 className="text-white text-sm font-medium">{title}</h3>
      <p className="text-white/80">{content}</p>
    </div>
  </motion.div>
);

interface Contacts {
  phone1: string | null;
  phone2: string | null;
  email: string | null;
  email2: string | null;
  address: string | null;
  telegramLink: string | null;
  facebookLink: string | null;
  instagramLink: string | null;
  linkedInLink: string | null;
  twitterLink: string | null;
  tiktokLink: string | null;
}

interface Contacts {
  phone1: string | null;
  phone2: string | null;
  phone3: string | null;
  phone4: string | null;
  email: string | null;
  email2: string | null;
  address: string | null;
  gmapUrl: string | null;
  business_hours: string | null;
}

export const ContactInfo = () => {
  const [contacts, setContacts] = useState<Contacts>();
  useEffect(() => {
    const fetchContacts = async () => {
      const resp = await getContacts();
      setContacts(resp);
    };
    fetchContacts();
  }, []);
  const socialLinks = [
    {
      name: "Facebook",
      Icon: Facebook,
      href: contacts?.facebookLink,
      color: "hover:text-blue-400",
    },
    {
      name: "Telegram",
      Icon: IconBrandTelegram,
      href: contacts?.telegramLink,
      color: "hover:text-blue-400",
    },
    {
      name: "Instagram",
      Icon: Instagram,
      href: contacts?.instagramLink,
      color: "hover:text-pink-400",
    },
    {
      name: "LinkedIn",
      Icon: Linkedin,
      href: contacts?.linkedInLink,
      color: "hover:text-blue-400",
    },
    {
      name: "Twitter",
      Icon: Twitter,
      href: contacts?.twitterLink,
      color: "hover:text-sky-400",
    },
    {
      name: "YouTube",
      Icon: IconBrandTiktok,
      href: contacts?.tiktokLink,
      color: "hover:text-red-400",
    },
  ];
  const activeLinks = socialLinks.filter((link) => link.href);

  return (
    <motion.div
      initial={{ x: -50, opacity: 0 }}
      whileInView={{ x: 0, opacity: 1 }}
      viewport={{ once: true }}
      transition={{ duration: 0.5 }}
      className="space-y-8"
    >
      <div>
        <h2 className="text-4xl font-bold text-white mb-4">Get in Touch</h2>
        <p className="text-white/80 mb-8">
          Have questions? We&apos;d love to hear from you. Send us a message and
          we&apos;ll respond as soon as possible.
        </p>
      </div>

      <div className="space-y-4">
        {contacts?.phone1 && (
          <ContactInfoItem
            Icon={Phone}
            title="Phone-1"
            content={contacts.phone1}
          />
        )}

        {contacts?.phone2 && (
          <ContactInfoItem
            Icon={Phone}
            title="Phone-2"
            content={contacts.phone2}
          />
        )}

        {contacts?.phone3 && (
          <ContactInfoItem
            Icon={Phone}
            title="Phone-3"
            content={contacts.phone3}
          />
        )}
        {contacts?.phone4 && (
          <ContactInfoItem
            Icon={Phone}
            title="Phone-4"
            content={contacts.phone4}
          />
        )}

        {contacts?.email && (
          <ContactInfoItem
            Icon={Mail}
            title="Email-1"
            content={contacts.email}
          />
        )}

        {contacts?.email2 && (
          <ContactInfoItem
            Icon={Mail}
            title="Email-2"
            content={contacts.email2}
          />
        )}

        {contacts?.address && (
          <ContactInfoItem
            Icon={MapPin}
            title="Address"
            content={contacts.address}
          />
        )}
        {contacts?.business_hours && (
          <ContactInfoItem
            Icon={Clock}
            title="Business Hours"
            content={contacts.business_hours}
          />
        )}
      </div>

      {activeLinks.length > 0 && (
        <div>
          <h3 className="text-white text-xl font-semibold mb-4">Follow Us</h3>
          <div className="flex space-x-4">
            {activeLinks.map(({ Icon, href }, index) => (
              <motion.a
                key={index}
                href={href}
                whileHover={{ scale: 1.1 }}
                whileTap={{ scale: 0.9 }}
                className="w-12 h-12 rounded-full bg-red-600/20 flex items-center justify-center hover:bg-red-600/40 transition-colors"
              >
                <Icon className="w-6 h-6 text-orange-400" />
              </motion.a>
            ))}
          </div>
        </div>
      )}
    </motion.div>
  );
};