import React from 'react';
import Image from 'next/image';
import Link from 'next/link';

// ── Types ─────────────────────────────────────────────────────────────────────

export interface AuthorProps {
  id: string;
  full_name: string;
  slug: string;
  bio?: string | null;
  profile_image?: string | null;
  website?: string | null;
  social_facebook?: string | null;
  social_twitter?: string | null;
  social_instagram?: string | null;
  social_linkedin?: string | null;
}

// ── Social icon SVGs (inline, no extra dep) ───────────────────────────────────

function FacebookIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" className="w-4 h-4" aria-hidden="true">
      <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
    </svg>
  );
}

function TwitterIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" className="w-4 h-4" aria-hidden="true">
      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
    </svg>
  );
}

function InstagramIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-4 h-4" aria-hidden="true">
      <rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
      <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
      <line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
    </svg>
  );
}

function LinkedinIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" className="w-4 h-4" aria-hidden="true">
      <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" />
      <rect x="2" y="9" width="4" height="12" />
      <circle cx="4" cy="4" r="2" />
    </svg>
  );
}

function WebsiteIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-4 h-4" aria-hidden="true">
      <circle cx="12" cy="12" r="10" />
      <line x1="2" y1="12" x2="22" y2="12" />
      <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
    </svg>
  );
}

// ── Social link config ────────────────────────────────────────────────────────

type SocialLink = {
  href: string;
  label: string;
  icon: React.ReactNode;
};

function buildSocialLinks(author: AuthorProps): SocialLink[] {
  const links: SocialLink[] = [];
  if (author.social_facebook)
    links.push({ href: author.social_facebook,  label: 'Facebook',  icon: <FacebookIcon /> });
  if (author.social_twitter)
    links.push({ href: author.social_twitter,   label: 'Twitter/X', icon: <TwitterIcon /> });
  if (author.social_instagram)
    links.push({ href: author.social_instagram, label: 'Instagram', icon: <InstagramIcon /> });
  if (author.social_linkedin)
    links.push({ href: author.social_linkedin,  label: 'LinkedIn',  icon: <LinkedinIcon /> });
  if (author.website)
    links.push({ href: author.website,          label: 'Website',   icon: <WebsiteIcon /> });
  return links;
}

// ── Fallback avatar initials ──────────────────────────────────────────────────

function getInitials(name: string): string {
  return name
    .split(' ')
    .filter(Boolean)
    .slice(0, 2)
    .map(n => n[0].toUpperCase())
    .join('');
}

// ── Component ─────────────────────────────────────────────────────────────────

export default function AuthorCard({ author }: { author: AuthorProps }) {
  const socialLinks = buildSocialLinks(author);

  return (
    <div className="mt-12 border-t border-gray-200 pt-10">
      <div className="flex flex-col sm:flex-row gap-6 items-start">

        {/* Avatar */}
        <Link
          href={`/author/${author.slug}`}
          className="shrink-0 block rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-gray-400"
          aria-label={`View all posts by ${author.full_name}`}
        >
          {author.profile_image ? (
            <Image
              src={author.profile_image}
              alt={author.full_name}
              width={80}
              height={80}
              className="w-20 h-20 rounded-full object-cover ring-2 ring-gray-100"
            />
          ) : (
            <span
              className="flex items-center justify-center w-20 h-20 rounded-full bg-gray-800 text-white text-xl font-semibold select-none ring-2 ring-gray-100"
              aria-hidden="true"
            >
              {getInitials(author.full_name)}
            </span>
          )}
        </Link>

        {/* Info */}
        <div className="flex-1 min-w-0">

          {/* Label + name */}
          <p className="text-xs font-semibold uppercase tracking-widest text-gray-400 mb-1">
            Written by
          </p>
          <Link
            href={`/author/${author.slug}`}
            className="text-lg font-bold text-gray-900 hover:text-gray-600 transition-colors duration-150"
          >
            {author.full_name}
          </Link>

          {/* Bio */}
          {author.bio && (
            <p className="mt-2 text-sm text-gray-600 leading-relaxed line-clamp-3">
              {author.bio}
            </p>
          )}

          {/* Social links */}
          {socialLinks.length > 0 && (
            <div className="mt-3 flex flex-wrap gap-2">
              {socialLinks.map(link => (
                <a
                  key={link.label}
                  href={link.href}
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label={link.label}
                  className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium bg-gray-100 text-gray-600 hover:bg-gray-200 hover:text-gray-900 transition-colors duration-150"
                >
                  {link.icon}
                  <span>{link.label}</span>
                </a>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}