import React from 'react';
import Link from 'next/link';
import { Users, Twitter, Instagram, Youtube, Globe, Linkedin } 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: Twitter, label: 'Twitter' },
    { url: authorInfo?.socialInstagram, icon: Instagram, label: 'Instagram' },
    { url: authorInfo?.socialYoutube, icon: Youtube, label: 'YouTube' },
    { url: authorInfo?.socialLinkedin, icon: Linkedin, label: 'LinkedIn' },
    { url: authorInfo?.socialWebsite, icon: Globe, label: 'Website' },
  ].filter(s => s.url);

  return (
    <section className="w-full py-8">
    <div className="container max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
    <Link
      href={`/author/${encodeURIComponent(primaryAuthor || '編集部')}`}
      className="bg-brand-card border border-border/20 rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow group block no-underline text-inherit"
    >
      <h3 className="font-bold text-center border-b border-border/20 pb-4 mb-4 text-text-primary group-hover:text-brand-primary transition-colors">
        PROFILE
      </h3>
      <div className="flex flex-col items-center gap-4 text-center">
        <div className="w-24 h-24 rounded-full bg-brand-accent/30 flex items-center justify-center group-hover:bg-brand-highlight transition-colors overflow-hidden">
          {authorInfo?.authorAvatar ? (
            <img src={authorInfo.authorAvatar} alt={primaryAuthor || ''} className="w-full h-full object-cover" />
          ) : (
            <Users className="w-10 h-10 text-brand-primary" />
          )}
        </div>
        <div>
          <p className="font-bold text-text-primary group-hover:text-brand-primary transition-colors">
            {primaryAuthor || '編集部'}
          </p>
          {authorInfo?.authorRole && (
            <p className="text-xs text-text-secondary mt-1">{authorInfo.authorRole}</p>
          )}
        </div>
        {showBio && (
          <p className="text-sm text-text-secondary leading-relaxed line-clamp-3">
            {authorInfo?.authorBio || '私たちはお金の知識を通じて皆さまの賢い意思決定力向上をサポートします。最新の金融トレンドや教育情報をご提供します。'}
          </p>
        )}
        {socials.length > 0 && (
          <div className="flex items-center gap-2 mt-1" onClick={(e) => e.stopPropagation()}>
            {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-text-secondary hover:text-brand-primary hover:bg-brand-accent/20 transition-all"
                onClick={(e) => e.stopPropagation()}
              >
                <Icon className="w-3.5 h-3.5" />
              </a>
            ))}
          </div>
        )}
      </div>
    </Link>
    </div>
    </section>
  );
}
