import React from 'react';
import Link from 'next/link';
import { Users, AtSign, Camera, Play, Globe, Briefcase } from 'lucide-react';
import { getPrimaryAuthor, getAuthorInfo } from '@/lib/utils/db';

interface AuthorBoxProps {
  showBio?: boolean;
  authorSlug?: string;
}

export async function AuthorBox({ showBio = true, authorSlug }: AuthorBoxProps) {
  const primaryAuthor = authorSlug || await getPrimaryAuthor();
  const authorInfo = await getAuthorInfo(primaryAuthor) as Record<string, any> | null;

  // Social links — only shown if the DB returns them (optional fields)
  const socials = [
    { url: authorInfo?.socialTwitter, icon: AtSign, label: 'AtSign' },
    { url: authorInfo?.socialInstagram, icon: Camera, label: 'Camera' },
    { url: authorInfo?.socialYoutube, icon: Play, label: 'YouTube' },
    { url: authorInfo?.socialLinkedin, icon: Briefcase, label: 'LinkedIn' },
    { url: authorInfo?.socialWebsite, icon: Globe, label: 'Website' },
  ].filter(s => s.url);

  const authorUrl = `/author/${encodeURIComponent(primaryAuthor || '編集部')}`;

  return (
    <section className="w-full py-8">
      <div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="bg-[#202026] border border-[#2A2A33] rounded-xl p-6 shadow-sm">
          <h3 className="font-bold text-center border-b border-[#2A2A33] pb-4 mb-4 text-white">
            PROFILE
          </h3>
          <div className="flex flex-col items-center gap-4 text-center">
            {/* Avatar */}
            <div className="w-24 h-24 rounded-full bg-[#1A1A1F] flex items-center justify-center overflow-hidden">
              {authorInfo?.authorAvatar ? (
                <img src={authorInfo.authorAvatar} alt={primaryAuthor || ''} className="w-full h-full object-cover" />
              ) : (
                <Users className="w-10 h-10 text-[#E60023]" />
              )}
            </div>

            {/* Info */}
            <div>
              <p className="font-bold text-white">
                {primaryAuthor || '編集部'}
              </p>
              {authorInfo?.authorRole && (
                <p className="text-xs text-[#B8B8C0] mt-1">{authorInfo.authorRole}</p>
              )}
            </div>

            {showBio && (
              <p className="text-sm text-[#B8B8C0] leading-relaxed max-w-lg">
                {authorInfo?.authorBio || '転スラゲームの攻略情報を皆様にお届けします。'}
              </p>
            )}

            {/* Social links */}
            {socials.length > 0 && (
              <div className="flex items-center gap-2 mt-1">
                {socials.map(({ url, icon: Icon, label }) => (
                  <a
                    key={label}
                    href={url!}
                    target="_blank"
                    rel="noopener noreferrer"
                    title={label}
                    className="w-8 h-8 rounded-full flex items-center justify-center text-[#B8B8C0] hover:text-[#E60023] hover:bg-[#1A1A1F] transition-all"
                  >
                    <Icon className="w-3.5 h-3.5" />
                  </a>
                ))}
              </div>
            )}

            {/* Author page link */}
            <Link
              href={authorUrl}
              className="inline-flex items-center gap-1 mt-2 text-sm font-semibold text-[#E60023] hover:text-[#FF2A3D] transition-colors"
            >
              記事一覧を見る
              <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M7 17l9.2-9.2M17 17V7H7" />
              </svg>
            </Link>
          </div>
        </div>
      </div>
    </section>
  );
}
