```react
import React, { useState, useRef, useEffect } from 'react';
import { Send, User, Trash2, Plus, Signal, Wifi, Battery, Moon, Sun, Smartphone, Download, Camera } from 'lucide-react';

// Importation de html2canvas via CDN pour la capture d'écran
const loadHtml2Canvas = () => {
  return new Promise((resolve) => {
    if (window.html2canvas) return resolve(window.html2canvas);
    const script = document.createElement('script');
    script.src = 'https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js';
    script.onload = () => resolve(window.html2canvas);
    document.head.appendChild(script);
  });
};

const App = () => {
  const [appType, setAppType] = useState('imessage');
  const [theme, setTheme] = useState('dark');
  const [contactName, setContactName] = useState('Mon Contact');
  const [status, setStatus] = useState('En ligne');
  const [messages, setMessages] = useState([
    { id: 1, text: "Salut Lenzo ! Tu as fini le code ?", sender: 'other', time: '14:02' },
    { id: 2, text: "Ouais, l'exportation d'image marche enfin ! 📸", sender: 'me', time: '14:03' }
  ]);
  const [inputText, setInputText] = useState('');
  const [currentTime, setCurrentTime] = useState('14:05');
  const [isDownloading, setIsDownloading] = useState(false);
  
  const phoneRef = useRef(null);

  const addMessage = (sender) => {
    if (!inputText.trim()) return;
    const newMessage = {
      id: Date.now(),
      text: inputText,
      sender: sender,
      time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
    };
    setMessages([...messages, newMessage]);
    setInputText('');
  };

  const deleteMessage = (id) => {
    setMessages(messages.filter(m => m.id !== id));
  };

  const downloadImage = async () => {
    if (!phoneRef.current) return;
    setIsDownloading(true);
    
    try {
      const html2canvas = await loadHtml2Canvas();
      const canvas = await html2canvas(phoneRef.current, {
        backgroundColor: theme === 'dark' ? '#000000' : '#ffffff',
        scale: 2, // Haute qualité pour TikTok
        useCORS: true,
        logging: false,
        borderRadius: 40
      });
      
      const link = document.createElement('a');
      link.download = `fake-sms-${contactName.toLowerCase().replace(/\s+/g, '-')}.png`;
      link.href = canvas.toDataURL('image/png');
      link.click();
    } catch (err) {
      console.error("Erreur lors du téléchargement :", err);
    } finally {
      setIsDownloading(false);
    }
  };

  const getAppStyles = () => {
    const isDark = theme === 'dark';
    switch (appType) {
      case 'whatsapp':
        return {
          bg: isDark ? 'bg-[#0b141a]' : 'bg-[#e5ddd5]',
          header: isDark ? 'bg-[#202c33]' : 'bg-[#075e54]',
          bubbleMe: isDark ? 'bg-[#005c4b] text-[#e9edef]' : 'bg-[#dcf8c6] text-[#303030]',
          bubbleOther: isDark ? 'bg-[#202c33] text-[#e9edef]' : 'bg-white text-[#303030]',
          input: isDark ? 'bg-[#2a3942]' : 'bg-white',
          accent: 'text-[#00a884]'
        };
      case 'messenger':
        return {
          bg: isDark ? 'bg-black' : 'bg-white',
          header: isDark ? 'bg-black/80' : 'bg-white/80',
          bubbleMe: 'bg-[#0084ff] text-white',
          bubbleOther: isDark ? 'bg-[#3e4042] text-white' : 'bg-[#e4e6eb] text-black',
          input: isDark ? 'bg-[#3e4042]' : 'bg-[#f0f2f5]',
          accent: 'text-[#0084ff]'
        };
      default:
        return {
          bg: isDark ? 'bg-black' : 'bg-white',
          header: isDark ? 'bg-black/50' : 'bg-white/50',
          bubbleMe: 'bg-[#34b7f1] text-white',
          bubbleOther: isDark ? 'bg-[#262628] text-white' : 'bg-[#e9e9eb] text-black',
          input: isDark ? 'bg-[#1c1c1e]' : 'bg-[#f2f2f7]',
          accent: 'text-[#34b7f1]'
        };
    }
  };

  const styles = getAppStyles();

  return (
    <div className={`flex flex-col md:flex-row min-h-screen ${theme === 'dark' ? 'bg-slate-950 text-white' : 'bg-slate-50 text-slate-900'} font-sans`}>
      
      {/* Configuration Sidebar */}
      <div className={`w-full md:w-80 p-6 ${theme === 'dark' ? 'bg-slate-900' : 'bg-white'} border-r border-slate-800 overflow-y-auto z-20`}>
        <div className="flex items-center gap-2 mb-8">
          <Smartphone className="text-blue-500" />
          <h1 className="text-xl font-bold tracking-tight">TikTok SMS Studio</h1>
        </div>
        
        <div className="space-y-6">
          <div className="flex flex-col gap-2">
            <label className="text-xs font-bold uppercase text-slate-500">Apparence</label>
            <div className="grid grid-cols-2 gap-2">
              <button 
                onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
                className={`flex items-center justify-center gap-2 p-2 rounded-lg border text-sm transition-all ${theme === 'dark' ? 'border-slate-700 bg-slate-800' : 'border-slate-200 bg-slate-100'}`}
              >
                {theme === 'dark' ? <Sun size={14} /> : <Moon size={14} />} {theme === 'dark' ? 'Clair' : 'Sombre'}
              </button>
              <select 
                value={appType} 
                onChange={(e) => setAppType(e.target.value)}
                className={`p-2 rounded-lg border text-sm ${theme === 'dark' ? 'bg-slate-800 border-slate-700' : 'bg-white border-slate-200'}`}
              >
                <option value="imessage">iMessage</option>
                <option value="whatsapp">WhatsApp</option>
                <option value="messenger">Messenger</option>
              </select>
            </div>
          </div>

          <div className="flex flex-col gap-3">
            <label className="text-xs font-bold uppercase text-slate-500">Contact</label>
            <input 
              type="text" 
              value={contactName}
              onChange={(e) => setContactName(e.target.value)}
              className={`w-full p-2 rounded border text-sm outline-none ${theme === 'dark' ? 'bg-slate-800 border-slate-700' : 'bg-slate-100 border-slate-200'}`}
            />
            <input 
              type="text" 
              value={status}
              onChange={(e) => setStatus(e.target.value)}
              className={`w-full p-2 rounded border text-sm outline-none ${theme === 'dark' ? 'bg-slate-800 border-slate-700' : 'bg-slate-100 border-slate-200'}`}
            />
          </div>

          <div className="pt-4 border-t border-slate-800">
            <label className="text-xs font-bold uppercase text-slate-500 block mb-3">Messages</label>
            <textarea 
              value={inputText}
              onChange={(e) => setInputText(e.target.value)}
              placeholder="Écris ton message..."
              className={`w-full p-3 rounded border h-20 mb-3 resize-none text-sm outline-none ${theme === 'dark' ? 'bg-slate-800 border-slate-700' : 'bg-slate-100 border-slate-200'}`}
            />
            <div className="grid grid-cols-2 gap-3">
              <button onClick={() => addMessage('other')} className="bg-slate-600 hover:bg-slate-700 text-white p-2 rounded-lg text-sm font-medium transition-colors">Reçu</button>
              <button onClick={() => addMessage('me')} className="bg-blue-600 hover:bg-blue-700 text-white p-2 rounded-lg text-sm font-medium transition-colors">Envoyé</button>
            </div>
          </div>

          <button 
            onClick={downloadImage}
            disabled={isDownloading}
            className={`w-full mt-6 flex items-center justify-center gap-2 p-4 rounded-xl font-bold transition-all ${isDownloading ? 'bg-slate-700' : 'bg-green-600 hover:bg-green-500 hover:scale-105'} text-white shadow-lg shadow-green-900/20`}
          >
            {isDownloading ? 'Génération...' : <><Download size={18} /> Télécharger Image</>}
          </button>
        </div>
      </div>

      {/* Preview Area */}
      <div className="flex-1 flex items-center justify-center p-8 bg-black/20 overflow-hidden">
        <div 
          ref={phoneRef}
          className={`relative w-[340px] h-[680px] rounded-[48px] border-[10px] border-slate-900 shadow-2xl overflow-hidden flex flex-col ${styles.bg}`}
        >
          {/* Top Notch Area */}
          <div className="absolute top-0 left-1/2 -translate-x-1/2 w-32 h-6 bg-slate-900 rounded-b-2xl z-30"></div>

          {/* Status Bar */}
          <div className={`h-12 px-8 pt-5 flex justify-between items-center text-[11px] z-10 ${theme === 'dark' ? 'text-white' : 'text-black'}`}>
            <span className="font-bold">{currentTime}</span>
            <div className="flex gap-1 items-center">
              <Signal size={10} /> <Wifi size={10} /> <Battery size={12} />
            </div>
          </div>

          {/* App Header */}
          <div className={`p-4 flex items-center gap-3 backdrop-blur-md z-10 border-b ${theme === 'dark' ? 'border-white/5' : 'border-black/5'} ${styles.header}`}>
            <div className={`w-9 h-9 rounded-full flex items-center justify-center ${theme === 'dark' ? 'bg-slate-800 text-slate-500' : 'bg-slate-200 text-slate-400'}`}>
              <User size={20} />
            </div>
            <div className="flex-1">
              <div className={`font-bold text-sm leading-tight ${theme === 'dark' ? 'text-white' : 'text-black'}`}>{contactName}</div>
              <div className={`text-[10px] font-medium ${styles.accent}`}>{status}</div>
            </div>
            <Camera size={18} className={styles.accent + " opacity-50"} />
          </div>

          {/* Chat Area */}
          <div className="flex-1 overflow-y-auto p-4 space-y-3 relative">
            {appType === 'whatsapp' && (
              <div className="absolute inset-0 opacity-5 pointer-events-none bg-[url('https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png')] bg-repeat"></div>
            )}
            
            {messages.map((msg) => (
              <div key={msg.id} className={`group relative flex ${msg.sender === 'me' ? 'justify-end' : 'justify-start'}`}>
                <div className={`max-w-[80%] px-3.5 py-2 rounded-2xl text-[13px] relative shadow-sm ${msg.sender === 'me' ? styles.bubbleMe : styles.bubbleOther}`}>
                  <p className="whitespace-pre-wrap">{msg.text}</p>
                  <div className={`text-[9px] mt-1 text-right opacity-50 font-medium`}>{msg.time}</div>
                </div>
                <button 
                  onClick={() => deleteMessage(msg.id)}
                  className="absolute -top-1 -right-1 bg-red-500 text-white p-1 rounded-full opacity-0 group-hover:opacity-100 transition-opacity z-20"
                >
                  <Trash2 size={10} />
                </button>
              </div>
            ))}
          </div>

          {/* Bottom Bar */}
          <div className={`p-4 flex items-center gap-3 ${styles.bg} border-t ${theme === 'dark' ? 'border-white/5' : 'border-black/5'}`}>
            <Plus size={20} className={styles.accent} />
            <div className={`flex-1 rounded-full px-4 py-2 text-[12px] border ${styles.input} ${theme === 'dark' ? 'border-white/10 text-gray-500' : 'border-slate-200 text-gray-400'}`}>
              iMessage
            </div>
            <div className={`w-8 h-8 rounded-full flex items-center justify-center text-white ${appType === 'imessage' ? 'bg-blue-500' : styles.accent.replace('text-', 'bg-')}`}>
              <Send size={14} />
            </div>
          </div>

          {/* Home Indicator */}
          <div className="h-5 flex justify-center items-center pb-2">
            <div className={`w-28 h-1 rounded-full ${theme === 'dark' ? 'bg-white/20' : 'bg-black/10'}`}></div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default App;

```