import type { ContactSetting } from "@prisma/client";

const DEFAULT_SOCIAL_URL = "https://justchillnepal.com";

const socialItems = [
  { key: "github", label: "GitHub", icon: "github" },
  { key: "linkedin", label: "LinkedIn", icon: "linkedin" },
  { key: "facebook", label: "Facebook", icon: "facebook" },
  { key: "instagram", label: "Instagram", icon: "instagram" },
  { key: "youtube", label: "YouTube", icon: "youtube" },
  { key: "tiktok", label: "TikTok", icon: "tiktok" },
  { key: "portfolio", label: "Portfolio", icon: "portfolio" },
  { key: "whatsapp", label: "WhatsApp", icon: "whatsapp" },
  { key: "xUrl", label: "X", icon: "x" }
] as const;

function ContactIcon({ name }: { name: "mail" | "phone" | "location" }) {
  const paths = {
    mail: "M4 6h16v12H4z M4 7l8 6 8-6",
    phone: "M6.6 4h3l1.4 4-2 1.2a11 11 0 0 0 5.8 5.8l1.2-2 4 1.4v3a2 2 0 0 1-2.2 2A16 16 0 0 1 4.6 6.2 2 2 0 0 1 6.6 4z",
    location: "M12 21s7-5.2 7-11a7 7 0 1 0-14 0c0 5.8 7 11 7 11z M12 12.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"
  };

  return (
    <svg aria-hidden="true" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.8" viewBox="0 0 24 24">
      <path d={paths[name]} />
    </svg>
  );
}

function SocialIcon({ name }: { name: (typeof socialItems)[number]["icon"] }) {
  if (name === "portfolio") {
    return (
      <svg aria-hidden="true" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.8" viewBox="0 0 24 24">
        <path d="M3.8 12h16.4" />
        <path d="M12 3.2c2.4 2.5 3.6 5.4 3.6 8.8s-1.2 6.3-3.6 8.8c-2.4-2.5-3.6-5.4-3.6-8.8s1.2-6.3 3.6-8.8Z" />
        <path d="M12 3.2a8.8 8.8 0 1 1 0 17.6 8.8 8.8 0 0 1 0-17.6Z" />
      </svg>
    );
  }

  if (name === "instagram") {
    return (
      <svg aria-hidden="true" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.8" viewBox="0 0 24 24">
        <rect height="16" rx="4.2" width="16" x="4" y="4" />
        <circle cx="12" cy="12" r="3.4" />
        <path d="M16.7 7.3h.01" />
      </svg>
    );
  }

  if (name === "whatsapp") {
    return (
      <svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
        <path d="M20.1 3.9A11.4 11.4 0 0 0 2.2 17.6L1 22l4.5-1.2A11.4 11.4 0 0 0 20.1 3.9Zm-8.1 16a9 9 0 0 1-4.6-1.3l-.3-.2-2.7.7.7-2.6-.2-.3A9 9 0 1 1 12 19.9Zm5-6.7c-.3-.2-1.8-.9-2.1-1-.3-.1-.5-.2-.8.2-.2.3-.8 1-.9 1.2-.2.2-.4.2-.7.1-.3-.2-1.3-.5-2.5-1.6-.9-.8-1.6-1.9-1.7-2.2-.2-.3 0-.5.1-.7l.5-.6c.2-.2.2-.4.3-.6.1-.2 0-.5 0-.6L8.2 7c-.2-.5-.5-.5-.7-.5H7c-.2 0-.6.1-.9.4-.3.3-1.2 1.2-1.2 2.9s1.2 3.3 1.4 3.6c.2.2 2.4 3.7 5.8 5.1.8.4 1.5.6 2 .7.8.3 1.6.2 2.2.1.7-.1 2.1-.9 2.4-1.7.3-.8.3-1.5.2-1.7-.1-.1-.3-.2-.6-.4Z" />
      </svg>
    );
  }

  const paths: Record<Exclude<(typeof socialItems)[number]["icon"], "instagram" | "portfolio" | "whatsapp">, string> = {
    facebook: "M15.1 8.2h2.2V4.5a28 28 0 0 0-3.2-.2c-3.2 0-5.4 2-5.4 5.7v3.2H5.2v4.1h3.5V24H13v-6.7h3.4l.5-4.1H13v-2.8c0-1.2.3-2.2 2.1-2.2Z",
    github: "M12 .5A11.5 11.5 0 0 0 8.4 23c.6.1.8-.3.8-.6v-2.2c-3.4.7-4.1-1.4-4.1-1.4-.5-1.4-1.3-1.8-1.3-1.8-1.1-.8.1-.8.1-.8 1.2.1 1.9 1.3 1.9 1.3 1.1 1.9 2.9 1.3 3.5 1 .1-.8.4-1.3.8-1.6-2.7-.3-5.6-1.4-5.6-6.1 0-1.3.5-2.4 1.2-3.3-.1-.3-.5-1.6.1-3.3 0 0 1-.3 3.4 1.3a11.5 11.5 0 0 1 6.2 0c2.4-1.6 3.4-1.3 3.4-1.3.7 1.7.3 3 .1 3.3.8.9 1.2 2 1.2 3.3 0 4.7-2.9 5.8-5.6 6.1.5.4.9 1.2.9 2.4v3.6c0 .3.2.7.9.6A11.5 11.5 0 0 0 12 .5Z",
    linkedin: "M4.9 7.9H1.4V22h3.5V7.9ZM3.2 1A2 2 0 1 0 3.1 5a2 2 0 0 0 .1-4Zm19.4 13c0-4.2-2.2-6.2-5.2-6.2-2.4 0-3.5 1.3-4.1 2.2V7.9H9.9V22h3.5v-7c0-1.8.3-3.6 2.6-3.6 2.2 0 2.2 2.1 2.2 3.7V22h3.5v-8Z",
    tiktok: "M17.6 6.2a5.7 5.7 0 0 1-3.3-1.1V15a5 5 0 1 1-5-5c.4 0 .8 0 1.2.1v3.5a1.8 1.8 0 1 0 .1 1.4V1.7h3.5a5.7 5.7 0 0 0 3.5 4.5Z",
    x: "M18.9 2.7h3.3l-7.2 8.2 8.5 10.4h-6.6l-5.2-6.4-5.9 6.4H2.5l7.7-8.8L2.1 2.7h6.8l4.7 5.8 5.3-5.8Zm-1.2 16.8h1.8L7.9 4.4H6l11.7 15.1Z",
    youtube: "M23.5 7.2a3 3 0 0 0-2.1-2.1C19.5 4.6 12 4.6 12 4.6s-7.5 0-9.4.5A3 3 0 0 0 .5 7.2 31 31 0 0 0 0 12a31 31 0 0 0 .5 4.8 3 3 0 0 0 2.1 2.1c1.9.5 9.4.5 9.4.5s7.5 0 9.4-.5a3 3 0 0 0 2.1-2.1A31 31 0 0 0 24 12a31 31 0 0 0-.5-4.8ZM9.7 15.6V8.4L16 12l-6.3 3.6Z"
  };

  if (name === "facebook") {
    return (
      <svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
        <path d={paths.facebook} />
      </svg>
    );
  }

  return (
    <svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
      <path d={paths[name]} />
    </svg>
  );
}

export function ContactDetails({ contact }: { contact: ContactSetting | null }) {
  const socials = socialItems.map((item) => ({
    ...item,
    href: contact?.[item.key] || DEFAULT_SOCIAL_URL
  }));

  return (
    <div className="contact-details-card">
      <h2 className="contact-small-title">Get In Touch</h2>
      <p className="muted">
        I&apos;m always open to discussing new projects, creative ideas,
        collaborations, or opportunities to be part of your vision.
      </p>

      <div className="contact-list">
        {contact?.email ? (
          <a href={`mailto:${contact.email}`}>
            <span className="contact-icon"><ContactIcon name="mail" /></span>
            <span><strong>Email</strong>{contact.email}</span>
          </a>
        ) : null}
        {contact?.phone ? (
          <a href={`tel:${contact.phone}`}>
            <span className="contact-icon"><ContactIcon name="phone" /></span>
            <span><strong>Phone</strong>{contact.phone}</span>
          </a>
        ) : null}
        {contact?.address ? (
          <a href={contact.mapUrl || "#"} rel="noreferrer" target={contact.mapUrl ? "_blank" : undefined}>
            <span className="contact-icon"><ContactIcon name="location" /></span>
            <span><strong>Location</strong>{contact.address}</span>
          </a>
        ) : null}
        {contact?.fullName ? (
          <div className="contact-row-static">
            <span className="contact-icon">ID</span>
            <span><strong>Full Name</strong>{contact.fullName}</span>
          </div>
        ) : null}
      </div>

      <div className="social-icon-grid compact-socials">
        {socials.map((social) => (
          <a aria-label={social.label} data-social={social.icon} href={social.href} key={social.key} rel="noreferrer" target="_blank" title={social.label}>
            <span><SocialIcon name={social.icon} /></span>
          </a>
        ))}
      </div>
    </div>
  );
}