import React from 'react';
import { Users, AtSign, Camera, Play, Globe, Briefcase } 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: AtSign, label: 'AtSign' },
    { url: authorData?.socialInstagram, icon: Camera, label: 'Camera' },
    { url: authorData?.socialYoutube, icon: Play, label: 'YouTube' },
    { url: authorData?.socialLinkedin, icon: Briefcase, label: 'LinkedIn' },
    { url: authorData?.socialWebsite, icon: Globe, label: 'Website' },
  ].filter(s => s.url);

  return (
    <section className="w-full py-8 bg-[#0F0F12]">
      <div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {loading ? (
          <div className="bg-[#202026] border border-[#2A2A33] rounded-xl p-6 shadow-sm animate-pulse flex flex-col items-center">
            <div className="w-24 h-24 rounded-full bg-[#1A1A1F]" />
            <div className="h-5 bg-[#1A1A1F] rounded w-1/3 mt-4" />
            <div className="h-4 bg-[#1A1A1F] rounded w-2/3 mt-2" />
          </div>
        ) : (
          <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">
              <div className="w-24 h-24 rounded-full bg-[#1A1A1F] 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-[#E60023]" />
                )}
              </div>
              <div>
                <p className="font-bold text-white text-lg">{displayAuthor}</p>
                {displayRole && <p className="text-xs text-[#B8B8C0] mt-1">{displayRole}</p>}
              </div>
              {showBio && (
                <p className="text-sm text-[#B8B8C0] 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-[#B8B8C0] hover:text-[#E60023] hover:bg-[#1A1A1F] transition-all"
                    >
                      <Icon className="w-3.5 h-3.5" />
                    </a>
                  ))}
                </div>
              )}
            </div>
            <p className="text-center text-[#B8B8C0] text-[10px] mt-4 italic">
              ※ 自動プレビューモード — DBの著者データを表示中
            </p>
          </div>
        )}
      </div>
    </section>
  );
}
