import React, { useState, useRef } from 'react';
import { 
  Instagram, 
  Youtube, 
  Github, 
  Twitter, 
  Facebook, 
  Link as LinkIcon, 
  Plus, 
  Trash2, 
  User, 
  ExternalLink,
  Settings,
  Image as ImageIcon,
  Smartphone,
  Eye,
  Upload,
  RefreshCw
} from 'lucide-react';

const App = () => {
  // --- Refs ---
  const fileInputRef = useRef(null);

  // --- State ---
  const [profile, setProfile] = useState({
    name: "김철수",
    bio: "프론트엔드 개발자 | 일상의 기록을 공유합니다.",
    avatar: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=200&h=200&fit=crop"
  });

  const [socialLinks, setSocialLinks] = useState([
    { id: '1', platform: 'instagram', url: 'https://instagram.com' },
    { id: '2', platform: 'youtube', url: 'https://youtube.com' },
    { id: '3', platform: 'github', url: 'https://github.com' }
  ]);

  const [links, setLinks] = useState([
    { 
      id: '1', 
      title: '나의 포트폴리오', 
      description: '최신 프로젝트와 기술 스택 확인하기', 
      url: 'https://portfolio.com',
      icon: 'Link'
    },
    { 
      id: '2', 
      title: '최신 블로그 포스트', 
      description: 'React와 Tailwind CSS에 관한 기술 블로그', 
      url: 'https://blog.com',
      icon: 'Link'
    }
  ]);

  const [viewMode, setViewMode] = useState('editor');

  // --- Handlers ---
  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 triggerFileInput = () => {
    fileInputRef.current.click();
  };

  const addSocialLink = () => {
    const newId = Date.now().toString();
    setSocialLinks([...socialLinks, { id: newId, platform: 'instagram', url: '' }]);
  };

  const removeSocialLink = (id) => {
    setSocialLinks(socialLinks.filter(link => link.id !== id));
  };

  const updateSocialLink = (id, field, value) => {
    setSocialLinks(socialLinks.map(link => link.id === id ? { ...link, [field]: value } : link));
  };

  const addLink = () => {
    const newId = Date.now().toString();
    setLinks([...links, { id: newId, title: '새 링크', description: '', url: '', icon: 'Link' }]);
  };

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

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

  // --- Icons Mapping ---
  const getSocialIcon = (platform) => {
    switch (platform) {
      case 'instagram': return <Instagram size={20} />;
      case 'youtube': return <Youtube size={20} />;
      case 'github': return <Github size={20} />;
      case 'twitter': return <Twitter size={20} />;
      case 'facebook': return <Facebook size={20} />;
      default: return <LinkIcon size={20} />;
    }
  };

  // --- Render Preview ---
  const PreviewContent = () => (
    <div className="flex flex-col items-center w-full max-w-md mx-auto p-6 min-h-[600px]">
      <div className="flex flex-col items-center mb-8 w-full text-center">
        <div className="w-24 h-24 rounded-full overflow-hidden border-4 border-white shadow-lg mb-4 bg-gray-100 ring-1 ring-gray-100">
          <img 
            src={profile.avatar || "https://via.placeholder.com/150"} 
            alt="avatar" 
            className="w-full h-full object-cover"
          />
        </div>
        <h1 className="text-xl font-bold text-gray-800">{profile.name}</h1>
        <p className="text-sm text-gray-500 mt-2 whitespace-pre-wrap">{profile.bio}</p>
      </div>

      <div className="flex gap-4 mb-8">
        {socialLinks.map(link => (
          <a 
            key={link.id} 
            href={link.url} 
            target="_blank" 
            rel="noopener noreferrer"
            className="p-2 bg-white rounded-full shadow-sm hover:scale-110 transition-transform text-indigo-600 border border-gray-100"
          >
            {getSocialIcon(link.platform)}
          </a>
        ))}
      </div>

      <div className="w-full space-y-4">
        {links.map(link => (
          <a
            key={link.id}
            href={link.url}
            target="_blank"
            rel="noopener noreferrer"
            className="block w-full p-4 bg-white border border-gray-200 rounded-2xl shadow-sm hover:shadow-md hover:border-indigo-200 transition-all group"
          >
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-4">
                <div className="p-2 bg-indigo-50 text-indigo-600 rounded-lg group-hover:bg-indigo-600 group-hover:text-white transition-colors">
                  <LinkIcon size={20} />
                </div>
                <div className="text-left">
                  <h3 className="font-semibold text-gray-800">{link.title}</h3>
                  {link.description && <p className="text-xs text-gray-500">{link.description}</p>}
                </div>
              </div>
              <ExternalLink size={16} className="text-gray-300 group-hover:text-indigo-600" />
            </div>
          </a>
        ))}
      </div>

      <div className="mt-auto pt-10 text-xs text-gray-400">
        Created by Linktree Clone
      </div>
    </div>
  );

  return (
    <div className="min-h-screen bg-gray-50 flex flex-col md:flex-row font-sans text-gray-900">
      
      {/* Mobile Toggle Bar */}
      <div className="md:hidden flex bg-white border-b sticky top-0 z-50">
        <button 
          onClick={() => setViewMode('editor')}
          className={`flex-1 p-4 flex items-center justify-center gap-2 font-medium ${viewMode === 'editor' ? 'text-indigo-600 border-b-2 border-indigo-600' : 'text-gray-500'}`}
        >
          <Settings size={20} /> 편집
        </button>
        <button 
          onClick={() => setViewMode('preview')}
          className={`flex-1 p-4 flex items-center justify-center gap-2 font-medium ${viewMode === 'preview' ? 'text-indigo-600 border-b-2 border-indigo-600' : 'text-gray-500'}`}
        >
          <Eye size={20} /> 미리보기
        </button>
      </div>

      {/* Editor Section */}
      <div className={`flex-1 p-6 md:p-12 overflow-y-auto ${viewMode === 'preview' ? 'hidden md:block' : 'block'}`}>
        <div className="max-w-2xl mx-auto space-y-10">
          
          <header className="mb-8">
            <h2 className="text-3xl font-black text-gray-900 flex items-center gap-3">
              <div className="p-2 bg-indigo-600 text-white rounded-xl shadow-lg shadow-indigo-200">
                <Smartphone size={24} />
              </div>
              Linktree Clone
            </h2>
            <p className="mt-2 text-gray-500">강사님만의 특별한 페이지를 만들어보세요.</p>
          </header>

          {/* Profile Editor */}
          <section className="bg-white p-6 rounded-3xl border border-gray-100 shadow-sm">
            <h3 className="text-lg font-bold mb-6 flex items-center gap-2">
              <User size={18} className="text-indigo-600" /> 프로필 편집
            </h3>
            <div className="space-y-6">
              <div className="flex flex-col sm:flex-row items-center gap-6 pb-4 border-b border-gray-50">
                <div className="relative group">
                  <div className="w-24 h-24 rounded-2xl overflow-hidden bg-gray-100 border-2 border-dashed border-gray-300 flex items-center justify-center relative">
                    {profile.avatar ? (
                      <img src={profile.avatar} alt="Avatar" className="w-full h-full object-cover" />
                    ) : (
                      <ImageIcon className="text-gray-400" size={32} />
                    )}
                  </div>
                  <button 
                    onClick={triggerFileInput}
                    className="absolute -bottom-2 -right-2 p-2 bg-indigo-600 text-white rounded-lg shadow-lg hover:bg-indigo-700 transition-colors"
                    title="사진 업로드"
                  >
                    <Upload size={16} />
                  </button>
                </div>

                <div className="flex-1 space-y-3 w-full">
                  <label className="text-sm font-semibold text-gray-600 block">프로필 사진 업로드</label>
                  <p className="text-xs text-gray-400">PC에서 사진을 선택하여 실제 강사님의 모습을 보여주세요.</p>
                  <div className="flex gap-2">
                    <button 
                      onClick={triggerFileInput}
                      className="flex-1 px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-xl text-sm font-medium transition-colors flex items-center justify-center gap-2"
                    >
                      <ImageIcon size={16} /> 파일 선택하기
                    </button>
                    <input 
                      type="file" 
                      ref={fileInputRef} 
                      onChange={handleImageUpload} 
                      accept="image/*" 
                      className="hidden" 
                    />
                  </div>
                </div>
              </div>

              <div className="grid grid-cols-1 gap-4">
                <div>
                  <label className="text-sm font-semibold text-gray-600 mb-1 block">이름</label>
                  <input 
                    type="text" 
                    value={profile.name}
                    onChange={(e) => setProfile({...profile, name: e.target.value})}
                    className="w-full p-3 bg-gray-50 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 text-sm"
                    placeholder="이름 또는 닉네임을 입력하세요"
                  />
                </div>
                <div>
                  <label className="text-sm font-semibold text-gray-600 mb-1 block">소개글</label>
                  <textarea 
                    value={profile.bio}
                    onChange={(e) => setProfile({...profile, bio: e.target.value})}
                    rows="2"
                    className="w-full p-3 bg-gray-50 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 text-sm"
                    placeholder="강사님의 활동이나 경력을 짧게 적어주세요"
                  />
                </div>
              </div>
            </div>
          </section>

          {/* Social Links Editor */}
          <section className="bg-white p-6 rounded-3xl border border-gray-100 shadow-sm">
            <div className="flex justify-between items-center mb-6">
              <h3 className="text-lg font-bold flex items-center gap-2">
                <Instagram size={18} className="text-indigo-600" /> SNS 링크
              </h3>
              <button 
                onClick={addSocialLink}
                className="text-indigo-600 flex items-center gap-1 text-sm font-bold hover:bg-indigo-50 px-3 py-1 rounded-full transition-colors"
              >
                <Plus size={16} /> 추가
              </button>
            </div>
            <div className="space-y-4">
              {socialLinks.map((link) => (
                <div key={link.id} className="flex gap-3 items-center bg-gray-50 p-3 rounded-2xl border border-gray-100 group">
                  <select 
                    value={link.platform}
                    onChange={(e) => updateSocialLink(link.id, 'platform', e.target.value)}
                    className="bg-white border p-2 rounded-lg text-sm focus:outline-none"
                  >
                    <option value="instagram">Instagram</option>
                    <option value="youtube">Youtube</option>
                    <option value="github">Github</option>
                    <option value="twitter">Twitter</option>
                    <option value="facebook">Facebook</option>
                  </select>
                  <input 
                    type="text" 
                    placeholder="URL을 입력하세요"
                    value={link.url}
                    onChange={(e) => updateSocialLink(link.id, 'url', e.target.value)}
                    className="flex-1 p-2 rounded-lg border text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
                  />
                  <button 
                    onClick={() => removeSocialLink(link.id)}
                    className="text-gray-400 hover:text-red-500 p-2 transition-colors"
                  >
                    <Trash2 size={18} />
                  </button>
                </div>
              ))}
            </div>
          </section>

          {/* General Links Editor */}
          <section className="bg-white p-6 rounded-3xl border border-gray-100 shadow-sm">
            <div className="flex justify-between items-center mb-6">
              <h3 className="text-lg font-bold flex items-center gap-2">
                <LinkIcon size={18} className="text-indigo-600" /> 커스텀 링크
              </h3>
              <button 
                onClick={addLink}
                className="bg-indigo-600 text-white flex items-center gap-1 text-sm font-bold hover:bg-indigo-700 px-4 py-2 rounded-xl transition-all shadow-md shadow-indigo-100"
              >
                <Plus size={16} /> 링크 추가
              </button>
            </div>
            <div className="space-y-6">
              {links.map((link) => (
                <div key={link.id} className="relative bg-gray-50 p-5 rounded-2xl border border-gray-100 group">
                  <button 
                    onClick={() => removeLink(link.id)}
                    className="absolute top-4 right-4 text-gray-400 hover:text-red-500 transition-colors"
                  >
                    <Trash2 size={18} />
                  </button>
                  <div className="space-y-3">
                    <input 
                      type="text" 
                      placeholder="제목 (예: 블로그)"
                      value={link.title}
                      onChange={(e) => updateLink(link.id, 'title', e.target.value)}
                      className="w-full p-2 font-bold bg-transparent border-b border-gray-300 focus:outline-none focus:border-indigo-600"
                    />
                    <input 
                      type="text" 
                      placeholder="간단한 설명"
                      value={link.description}
                      onChange={(e) => updateLink(link.id, 'description', e.target.value)}
                      className="w-full text-sm p-2 bg-transparent border-b border-gray-200 focus:outline-none focus:border-indigo-600"
                    />
                    <div className="flex items-center gap-2 text-xs text-gray-500 pt-2">
                      <LinkIcon size={14} />
                      <input 
                        type="text" 
                        placeholder="https://..."
                        value={link.url}
                        onChange={(e) => updateLink(link.id, 'url', e.target.value)}
                        className="flex-1 bg-transparent focus:outline-none"
                      />
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </section>
        </div>
      </div>

      {/* Preview Section */}
      <div className={`flex-1 bg-indigo-50/30 flex items-center justify-center p-6 md:p-12 ${viewMode === 'editor' ? 'hidden md:flex' : 'flex'}`}>
        <div className="w-full max-w-[375px] h-[750px] bg-white rounded-[3rem] shadow-2xl border-[8px] border-gray-900 relative overflow-hidden flex flex-col">
          <div className="absolute top-0 left-1/2 -translate-x-1/2 w-40 h-6 bg-gray-900 rounded-b-2xl z-20"></div>
          <div className="flex-1 overflow-y-auto bg-gradient-to-b from-indigo-50 to-white pt-10 pb-4 scrollbar-hide">
            <PreviewContent />
          </div>
          <div className="h-1.5 w-32 bg-gray-300 mx-auto mb-2 rounded-full flex-shrink-0"></div>
        </div>
      </div>

    </div>
  );
};

export default App;