import React, { useState, useEffect, useRef } from 'react';
import { 
  Instagram, 
  Youtube, 
  Twitter, 
  Github, 
  Facebook, 
  Link as LinkIcon, 
  User, 
  Edit3, 
  Plus, 
  Trash2, 
  Image as ImageIcon, 
  ExternalLink,
  ChevronRight,
  Settings,
  Eye,
  Save,
  MoreVertical,
  Upload,
  Camera
} from 'lucide-react';

// SNS Icons Map
const SNS_ICONS = {
  instagram: Instagram,
  youtube: Youtube,
  twitter: Twitter,
  github: Github,
  facebook: Facebook,
};

const App = () => {
  // --- State ---
  const [isAdmin, setIsAdmin] = useState(true);
  const [profile, setProfile] = useState({
    name: '김테크',
    bio: '프론트엔드 개발자 | 일상의 기록을 공유합니다.',
    avatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=200&h=200&auto=format&fit=crop'
  });

  const [snsLinks, setSnsLinks] = useState([
    { platform: 'instagram', url: 'https://instagram.com', active: true },
    { platform: 'youtube', url: 'https://youtube.com', active: true },
    { platform: 'github', url: 'https://github.com', active: true },
  ]);

  const [links, setLinks] = useState([
    {
      id: 1,
      title: '나의 포트폴리오',
      description: '그동안 진행했던 프로젝트들을 확인해보세요.',
      url: 'https://portfolio.com',
      image: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?q=80&w=100&h=100&auto=format&fit=crop'
    },
    {
      id: 2,
      title: '최신 블로그 포스트',
      description: 'React와 Tailwind CSS를 활용한 UI 디자인 방법',
      url: 'https://blog.com',
      image: 'https://images.unsplash.com/photo-1498050108023-c5249f4df085?q=80&w=100&h=100&auto=format&fit=crop'
    }
  ]);

  const fileInputRef = useRef(null);

  // --- Actions ---
  const handleImageUpload = (e) => {
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => {
        setProfile({ ...profile, avatar: reader.result });
      };
      reader.readAsDataURL(file);
    }
  };

  const addLink = () => {
    const newLink = {
      id: Date.now(),
      title: '새로운 링크',
      description: '설명을 입력해주세요.',
      url: 'https://',
      image: ''
    };
    setLinks([newLink, ...links]);
  };

  const updateLink = (id, field, value) => {
    setLinks(links.map(link => link.id === id ? { ...link, [field]: value } : link));
  };

  const deleteLink = (id) => {
    setLinks(links.filter(link => link.id !== id));
  };

  const updateSns = (platform, url) => {
    setSnsLinks(snsLinks.map(s => s.platform === platform ? { ...s, url } : s));
  };

  return (
    <div className="min-h-screen bg-white font-sans text-slate-900">
      {/* Header */}
      <header className="fixed top-0 left-0 right-0 h-16 bg-white/80 backdrop-blur-md border-b border-slate-100 z-50 flex items-center justify-between px-6 shadow-sm">
        <div className="flex items-center gap-2">
          <div className="w-8 h-8 bg-indigo-600 rounded-lg flex items-center justify-center">
            <LinkIcon className="w-5 h-5 text-white" />
          </div>
          <span className="font-black text-xl tracking-tight text-indigo-600">MyLink</span>
        </div>
        
        <div className="flex bg-slate-100 p-1 rounded-full">
          <button 
            onClick={() => setIsAdmin(true)}
            className={`flex items-center gap-2 px-4 py-1.5 rounded-full text-sm font-semibold transition-all ${isAdmin ? 'bg-white text-indigo-600 shadow-sm' : 'text-slate-500'}`}
          >
            <Edit3 className="w-4 h-4" /> 편집하기
          </button>
          <button 
            onClick={() => setIsAdmin(false)}
            className={`flex items-center gap-2 px-4 py-1.5 rounded-full text-sm font-semibold transition-all ${!isAdmin ? 'bg-white text-indigo-600 shadow-sm' : 'text-slate-500'}`}
          >
            <Eye className="w-4 h-4" /> 미리보기
          </button>
        </div>
      </header>

      {/* Main Content */}
      <main className="pt-16">
        {isAdmin ? (
          /* Admin Panel */
          <div className="w-full max-w-2xl mx-auto p-4 md:p-8 space-y-10 bg-white min-h-screen pb-24">
            <section className="space-y-4">
              <h2 className="text-xl font-bold flex items-center gap-2 text-slate-800">
                <User className="w-5 h-5" /> 프로필 설정
              </h2>
              <div className="bg-slate-50 p-6 rounded-2xl border border-slate-200 space-y-4">
                <div className="flex flex-col sm:flex-row items-center gap-6">
                  {/* Avatar Upload UI */}
                  <div className="relative group cursor-pointer" onClick={() => fileInputRef.current?.click()}>
                    <div className="w-24 h-24 rounded-full overflow-hidden border-4 border-white shadow-md relative">
                      <img 
                        src={profile.avatar} 
                        alt="avatar" 
                        className="w-full h-full object-cover transition-opacity group-hover:opacity-70"
                        onError={(e) => { e.currentTarget.src = 'https://via.placeholder.com/150'; }}
                      />
                      <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity bg-black/20">
                        <Camera className="w-8 h-8 text-white" />
                      </div>
                    </div>
                    <button className="absolute -bottom-1 -right-1 bg-indigo-600 text-white p-1.5 rounded-full shadow-lg">
                      <Upload className="w-3.5 h-3.5" />
                    </button>
                    <input 
                      type="file" 
                      ref={fileInputRef} 
                      className="hidden" 
                      accept="image/*"
                      onChange={handleImageUpload} 
                    />
                  </div>

                  <div className="flex-1 space-y-2 w-full">
                    <button 
                      onClick={() => fileInputRef.current?.click()}
                      className="w-full sm:w-auto px-4 py-2 bg-white border border-slate-300 rounded-lg text-sm font-medium text-slate-700 hover:bg-slate-50 transition-colors flex items-center justify-center gap-2"
                    >
                      <ImageIcon className="w-4 h-4" /> 이미지 업로드
                    </button>
                    <p className="text-xs text-slate-500 text-center sm:text-left">사진 파일을 선택하여 프로필 이미지를 변경하세요.</p>
                  </div>
                </div>

                <div className="space-y-2">
                  <label className="text-sm font-medium text-slate-700">이름</label>
                  <input 
                    className="w-full p-3 bg-white border border-slate-300 rounded-xl focus:ring-2 focus:ring-indigo-500 outline-none"
                    value={profile.name}
                    onChange={(e) => setProfile({...profile, name: e.target.value})}
                  />
                </div>
                <div className="space-y-2">
                  <label className="text-sm font-medium text-slate-700">한 줄 설명</label>
                  <textarea 
                    className="w-full p-3 bg-white border border-slate-300 rounded-xl focus:ring-2 focus:ring-indigo-500 outline-none resize-none"
                    rows="2"
                    value={profile.bio}
                    onChange={(e) => setProfile({...profile, bio: e.target.value})}
                  />
                </div>
              </div>
            </section>

            <section className="space-y-4">
              <h2 className="text-xl font-bold flex items-center gap-2 text-slate-800">
                <Settings className="w-5 h-5" /> SNS 링크
              </h2>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
                {snsLinks.map((sns) => {
                  const Icon = SNS_ICONS[sns.platform];
                  return (
                    <div key={sns.platform} className="bg-slate-50 p-4 rounded-xl border border-slate-200 flex items-center gap-3">
                      <Icon className="w-5 h-5 text-slate-600" />
                      <input 
                        className="bg-transparent border-none text-sm w-full outline-none focus:ring-0"
                        placeholder={`${sns.platform} URL`}
                        value={sns.url}
                        onChange={(e) => updateSns(sns.platform, e.target.value)}
                      />
                    </div>
                  );
                })}
              </div>
            </section>

            <section className="space-y-4">
              <div className="flex justify-between items-center">
                <h2 className="text-xl font-bold flex items-center gap-2 text-slate-800">
                  <LinkIcon className="w-5 h-5" /> 링크 목록
                </h2>
                <button 
                  onClick={addLink}
                  className="flex items-center gap-1 px-4 py-2 bg-indigo-600 text-white rounded-full text-sm font-medium hover:bg-indigo-700 transition-colors shadow-lg shadow-indigo-100"
                >
                  <Plus className="w-4 h-4" /> 링크 추가
                </button>
              </div>
              
              <div className="space-y-4">
                {links.map((link) => (
                  <div key={link.id} className="bg-white p-5 rounded-2xl border-2 border-slate-100 shadow-sm hover:border-indigo-200 transition-all space-y-4 relative group">
                    <button 
                      onClick={() => deleteLink(link.id)}
                      className="absolute top-4 right-4 text-slate-400 hover:text-red-500 p-1"
                    >
                      <Trash2 className="w-4 h-4" />
                    </button>
                    
                    <div className="flex gap-4">
                      <div className="w-20 h-20 bg-slate-100 rounded-xl flex items-center justify-center overflow-hidden border border-slate-200 shrink-0">
                        {link.image ? (
                          <img 
                            src={link.image} 
                            alt="link preview" 
                            className="w-full h-full object-cover" 
                            onError={(e) => { e.currentTarget.src = 'https://via.placeholder.com/150'; }}
                          />
                        ) : (
                          <ImageIcon className="w-6 h-6 text-slate-400" />
                        )}
                      </div>
                      <div className="flex-1 space-y-3">
                        <input 
                          className="w-full font-bold text-slate-800 border-none p-0 focus:ring-0 placeholder:text-slate-300"
                          placeholder="링크 제목"
                          value={link.title}
                          onChange={(e) => updateLink(link.id, 'title', e.target.value)}
                        />
                        <input 
                          className="w-full text-sm text-slate-500 border-none p-0 focus:ring-0 placeholder:text-slate-300"
                          placeholder="링크 설명"
                          value={link.description}
                          onChange={(e) => updateLink(link.id, 'description', e.target.value)}
                        />
                      </div>
                    </div>
                    <div className="flex items-center gap-2 bg-slate-50 px-3 py-2 rounded-lg border border-slate-200">
                      <LinkIcon className="w-3.5 h-3.5 text-slate-400" />
                      <input 
                        className="w-full text-xs text-indigo-600 bg-transparent border-none p-0 focus:ring-0"
                        placeholder="https://example.com"
                        value={link.url}
                        onChange={(e) => updateLink(link.id, 'url', e.target.value)}
                      />
                    </div>
                    <input 
                      className="w-full text-[10px] text-slate-400 border-none p-0 focus:ring-0"
                      placeholder="이미지 URL (선택사항)"
                      value={link.image}
                      onChange={(e) => updateLink(link.id, 'image', e.target.value)}
                    />
                  </div>
                ))}
              </div>
            </section>
          </div>
        ) : (
          /* Preview Panel */
          <div className="w-full min-h-screen bg-slate-50 flex justify-center py-10 px-4 overflow-y-auto">
            <div className="w-full max-w-[400px] bg-white rounded-[3rem] border-[8px] border-slate-900 shadow-2xl overflow-hidden relative aspect-[9/19]">
              <div className="h-10 bg-white flex items-center justify-center">
                <div className="w-16 h-5 bg-slate-900 rounded-b-2xl absolute top-0"></div>
              </div>
              <div className="p-8 h-full overflow-y-auto custom-scrollbar">
                <div className="flex flex-col items-center text-center space-y-4 mb-8">
                  <div className="relative">
                    <div className="absolute inset-0 bg-indigo-500 rounded-full blur-md opacity-20 transform scale-110"></div>
                    <img 
                      src={profile.avatar} 
                      alt="Profile" 
                      className="w-24 h-24 rounded-full object-cover border-4 border-white shadow-lg relative z-10"
                      onError={(e) => { e.currentTarget.src = 'https://via.placeholder.com/150'; }}
                    />
                  </div>
                  <div className="space-y-1">
                    <h1 className="text-xl font-bold text-slate-800">{profile.name}</h1>
                    <p className="text-sm text-slate-500 leading-relaxed">{profile.bio}</p>
                  </div>
                </div>
                <div className="flex justify-center gap-5 mb-8">
                  {snsLinks.filter(s => s.url && s.url !== 'https://').map((sns) => {
                    const Icon = SNS_ICONS[sns.platform];
                    return (
                      <a 
                        key={sns.platform} 
                        href={sns.url} 
                        target="_blank" 
                        rel="noopener noreferrer"
                        className="text-slate-600 hover:text-indigo-600 transition-colors p-1"
                      >
                        <Icon className="w-6 h-6" />
                      </a>
                    );
                  })}
                </div>
                <div className="space-y-3">
                  {links.map((link) => (
                    <a 
                      key={link.id}
                      href={link.url}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="group flex items-center gap-4 bg-white border border-slate-100 p-3 rounded-2xl shadow-sm hover:shadow-md hover:-translate-y-0.5 transition-all"
                    >
                      <div className="w-12 h-12 bg-slate-50 rounded-xl flex-shrink-0 overflow-hidden border border-slate-50">
                        {link.image ? (
                          <img 
                            src={link.image} 
                            alt={link.title} 
                            className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" 
                            onError={(e) => { e.currentTarget.src = 'https://via.placeholder.com/150'; }}
                          />
                        ) : (
                          <div className="w-full h-full flex items-center justify-center bg-indigo-50">
                            <LinkIcon className="w-5 h-5 text-indigo-400" />
                          </div>
                        )}
                      </div>
                      <div className="flex-1 min-w-0">
                        <h3 className="text-sm font-bold text-slate-800 truncate group-hover:text-indigo-600 transition-colors">{link.title}</h3>
                        <p className="text-xs text-slate-400 truncate">{link.description}</p>
                      </div>
                      <ChevronRight className="w-4 h-4 text-slate-300 group-hover:text-indigo-400 group-hover:translate-x-1 transition-all" />
                    </a>
                  ))}
                </div>
                <div className="mt-12 text-center pb-8">
                  <div className="inline-flex items-center gap-1.5 px-3 py-1 bg-slate-100 rounded-full">
                    <span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Powered by MyLink</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}
      </main>

      {/* Floating Action Bar (Admin only) */}
      {isAdmin && (
        <div className="fixed bottom-6 left-1/2 -translate-x-1/2 bg-slate-900 text-white px-6 py-3 rounded-full flex items-center gap-6 shadow-2xl z-50">
          <button onClick={addLink} className="flex items-center gap-2 hover:text-indigo-400 transition-colors">
            <Plus className="w-5 h-5" /> <span className="text-sm font-medium">추가</span>
          </button>
          <div className="w-px h-4 bg-slate-700"></div>
          <button onClick={() => setIsAdmin(false)} className="flex items-center gap-2 hover:text-indigo-400 transition-colors">
            <Eye className="w-5 h-5" /> <span className="text-sm font-medium">미리보기</span>
          </button>
        </div>
      )}

      <style>{`
        .custom-scrollbar::-webkit-scrollbar {
          width: 0px;
        }
      `}</style>
    </div>
  );
};

export default App;