'use client';
import React from 'react';
import { User, AtSign, Camera, Play, Globe, Briefcase, ExternalLink } from 'lucide-react';
import { useEditorData } from '@/hooks/useEditorData';

interface AuthorProfileEditorProps {
  authorName?: string;
  authorBio?: string;
  authorAvatar?: string;
  authorRole?: string;
  authorProfileUrl?: string;
  socialTwitter?: string;
  socialInstagram?: string;
  socialYoutube?: string;
  socialLinkedin?: string;
  socialWebsite?: string;
  theme?: string;
}

export function AuthorProfileEditor({
  authorName,
  authorBio,
  authorAvatar,
  authorRole,
  authorProfileUrl,
  socialTwitter,
  socialInstagram,
  socialYoutube,
  socialLinkedin,
  socialWebsite,
  theme = 'default',
}: AuthorProfileEditorProps) {
  const { data: authorData, loading } = useEditorData<any>({
    type: 'latest-author',
  });

  const themeClasses: Record<
    string,
    { card: string; text: string; sub: string; avatarBg: string; border: string; socialHover: string; bg: string }
  > = {
    default: { bg: '', card: 'bg-[#202026]', text: 'text-white', sub: 'text-[#B8B8C0]', avatarBg: 'bg-[#1A1A1F]', border: 'border-[#2A2A33]', socialHover: 'hover:text-[#E60023] hover:bg-[#1A1A1F]' },
    warm: { bg: '', card: 'bg-orange-50', text: 'text-slate-800', sub: 'text-slate-500', avatarBg: 'bg-orange-100', border: 'border-orange-200', socialHover: 'hover:text-orange-600' },
    professional: { bg: 'bg-slate-900', card: 'bg-slate-800', text: 'text-white', sub: 'text-slate-300', avatarBg: 'bg-slate-700', border: 'border-slate-600', socialHover: 'hover:text-blue-400' },
    ocean: { bg: '', card: 'bg-blue-50', text: 'text-slate-800', sub: 'text-slate-500', avatarBg: 'bg-blue-100', border: 'border-blue-200', socialHover: 'hover:text-blue-600' },
    forest: { bg: '', card: 'bg-emerald-50', text: 'text-slate-800', sub: 'text-slate-500', avatarBg: 'bg-emerald-100', border: 'border-emerald-200', socialHover: 'hover:text-emerald-600' },
  };
  const t = themeClasses[theme] ?? themeClasses.default;

  // Prefer manually entered props over DB data if provided
  const displayAuthorName = authorName || authorData?.authorName || '著者';
  const displayAuthorBio = authorBio || authorData?.authorBio || '著者の紹介文がここに入ります。';
  const displayAuthorAvatar = authorAvatar || authorData?.authorAvatar || '';
  const displayAuthorRole = authorRole || authorData?.authorRole || '';
  const displayProfileUrl = authorProfileUrl || (displayAuthorName ? `/author/${encodeURIComponent(displayAuthorName)}` : '');

  const socials = [
    { url: socialTwitter || authorData?.socialTwitter, icon: AtSign, label: 'AtSign' },
    { url: socialInstagram || authorData?.socialInstagram, icon: Camera, label: 'Camera' },
    { url: socialYoutube || authorData?.socialYoutube, icon: Play, label: 'YouTube' },
    { url: socialLinkedin || authorData?.socialLinkedin, icon: Briefcase, label: 'LinkedIn' },
    { url: socialWebsite || authorData?.socialWebsite, icon: Globe, label: 'Website' },
  ].filter((s) => s.url);

  return (
    <section className={`w-full py-10 ${t.bg}`}>
      <div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {loading ? (
          <div className="bg-dark-gray border border-soft-gray-border/20 rounded-xl p-8 shadow-sm animate-pulse flex flex-col items-center">
            <div className="w-24 h-24 rounded-full bg-slate-200" />
            <div className="h-6 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={`${t.card} border ${t.border} rounded-2xl p-8 shadow-sm`}>
            <div className="flex flex-col sm:flex-row items-center sm:items-start gap-6">
              {/* Avatar */}
              <div className={`w-24 h-24 rounded-full ${t.avatarBg} flex items-center justify-center overflow-hidden shrink-0`}>
                {displayAuthorAvatar ? (
                  <img src={displayAuthorAvatar} alt={displayAuthorName} className="w-full h-full object-cover" />
                ) : (
                  <User className={`w-10 h-10 ${theme === 'professional' ? 'text-slate-400' : 'text-blue-500'}`} />
                )}
              </div>

              {/* Info */}
              <div className="flex-1 text-center sm:text-left">
                <h3 className={`text-xl font-bold mb-1 ${t.text}`}>{displayAuthorName}</h3>
                {displayAuthorRole && (
                  <span className={`text-xs font-medium uppercase tracking-wider ${t.sub} block mb-3`}>
                    {displayAuthorRole}
                  </span>
                )}
                {displayAuthorBio && (
                  <p className={`text-sm leading-relaxed ${t.sub}`}>{displayAuthorBio}</p>
                )}

                {displayProfileUrl && (
                  <a
                    href={displayProfileUrl}
                    target="_blank"
                    rel="noopener noreferrer"
                    className={`inline-flex items-center gap-1.5 text-sm font-medium mt-4 ${theme === 'professional'
                        ? 'text-blue-400 hover:text-blue-300'
                        : 'text-blue-600 hover:underline'
                      } transition-colors`}
                  >
                    記事一覧を見る <ExternalLink className="w-3.5 h-3.5" />
                  </a>
                )}

                {socials.length > 0 && (
                  <div className="flex items-center justify-center sm:justify-start gap-2 mt-4">
                    {socials.map(({ url, icon: Icon, label }) => (
                      <a
                        key={label}
                        href={url}
                        target="_blank"
                        rel="noopener noreferrer"
                        title={label}
                        className={`w-9 h-9 rounded-full flex items-center justify-center ${t.sub} ${t.socialHover} transition-all duration-200`}
                      >
                        <Icon className="w-4 h-4" />
                      </a>
                    ))}
                  </div>
                )}
              </div>
            </div>
            <p className="text-center text-text-light-gray text-[10px] mt-4 italic">
              ※ 自動プレビューモード — DBの著者データを表示中
            </p>
          </div>
        )}
      </div>
    </section>
  );
}
