import React from 'react';
import { Users, Twitter, Instagram, Youtube, Globe, Linkedin } from 'lucide-react';
import { useEditorData } from '@/hooks/useEditorData';

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

export function AuthorBoxEditor({ showBio = true, authorSlug }: AuthorBoxEditorProps) {
  const { data: authorData, loading } = useEditorData<any>({
    type: 'latest-author',
  });

  const displayAuthor = authorSlug || authorData?.authorName || '編集部';
  const displayBio = authorData?.authorBio || '私たちはお金の知識を通じて皆さまの賢い意思決定力向上をサポートします。';
  const displayAvatar = authorData?.authorAvatar || '';
  const displayRole = authorData?.authorRole || '編集部';

  const socials = [
    { url: authorData?.socialTwitter, icon: Twitter, label: 'Twitter' },
    { url: authorData?.socialInstagram, icon: Instagram, label: 'Instagram' },
    { url: authorData?.socialYoutube, icon: Youtube, label: 'YouTube' },
    { url: authorData?.socialLinkedin, icon: Linkedin, label: 'LinkedIn' },
    { url: authorData?.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">
        {loading ? (
          <div className="bg-brand-card border border-border/20 rounded-xl p-6 shadow-sm animate-pulse flex flex-col items-center">
            <div className="w-24 h-24 rounded-full bg-slate-200" />
            <div className="h-5 bg-slate-200 rounded w-1/3 mt-4" />
            <div className="h-4 bg-slate-100 rounded w-2/3 mt-2" />
          </div>
        ) : (
          <div className="bg-brand-card border border-border/20 rounded-xl p-6 shadow-sm">
            <h3 className="font-bold text-center border-b border-border/20 pb-4 mb-4 text-text-primary">
              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 overflow-hidden">
                {displayAvatar ? (
                  <img src={displayAvatar} alt={displayAuthor} 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">{displayAuthor}</p>
                {displayRole && <p className="text-xs text-text-secondary mt-1">{displayRole}</p>}
              </div>
              {showBio && (
                <p className="text-sm text-text-secondary leading-relaxed max-w-lg">
                  {displayBio}
                </p>
              )}
              {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-text-secondary hover:text-brand-primary hover:bg-brand-accent/20 transition-all"
                    >
                      <Icon className="w-3.5 h-3.5" />
                    </a>
                  ))}
                </div>
              )}
            </div>
            <p className="text-center text-text-secondary text-[10px] mt-4 italic">
              ※ 自動プレビューモード — DBの著者データを表示中
            </p>
          </div>
        )}
      </div>
    </section>
  );
}
