import { useState } from "react";
import html2canvas from "html2canvas";

const voiceIdMap = {
  Rachel: "21m00Tcm4TlvDq8ikWAM",
  Adam: "pNInz6obpgDQGcFmaJgB",
  Bella: "EXAVITQu4vr4xnSDxMaL"
};

const apiKey = "sk_4e67c39c0e9cbc87462cd2643e1f4d1d9959d7d81203adc2";

export default function App() {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState("");
  const [style, setStyle] = useState("whatsapp");
  const [voice, setVoice] = useState("Rachel");

  const generateVoice = async (text) => {
    const voiceId = voiceIdMap[voice];
    const response = await fetch(`https://api.elevenlabs.io/v1/text-to-speech/${voiceId}`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "xi-api-key": apiKey
      },
      body: JSON.stringify({
        text,
        model_id: "eleven_monolingual_v1",
        voice_settings: {
          stability: 0.5,
          similarity_boost: 0.75
        }
      })
    });
    const blob = await response.blob();
    const audioUrl = URL.createObjectURL(blob);
    const audio = new Audio(audioUrl);
    audio.play();
  };

  const addMessage = (sender) => {
    if (!input.trim()) return;
    const newMsg = { sender, text: input.trim() };
    setMessages([...messages, newMsg]);
    setInput("");
    generateVoice(newMsg.text);
  };

  const updateMessage = (index, newText) => {
    const newMsgs = [...messages];
    newMsgs[index].text = newText;
    setMessages(newMsgs);
  };

  const exportChatAsImage = () => {
    const chat = document.getElementById("chat-container");
    html2canvas(chat).then((canvas) => {
      const link = document.createElement("a");
      link.download = "chat_export.png";
      link.href = canvas.toDataURL();
      link.click();
    });
  };

  return (
    <div style={{ padding: 20, fontFamily: "sans-serif", background: "#f0f2f5", minHeight: "100vh" }}>
      <select value={style} onChange={(e) => setStyle(e.target.value)} style={{ margin: "0 auto", display: "block" }}>
        <option value="whatsapp">WhatsApp</option>
        <option value="imessage">iMessage</option>
        <option value="instagram">Instagram</option>
      </select>
      <select value={voice} onChange={(e) => setVoice(e.target.value)} style={{ margin: "10px auto", display: "block" }}>
        <option value="Rachel">Rachel</option>
        <option value="Adam">Adam</option>
        <option value="Bella">Bella</option>
      </select>

      <div id="chat-container" style={{
        margin: "10px auto",
        width: 360,
        background: style === "whatsapp" ? "#e5ddd5" : style === "imessage" ? "#d1e7ff" : "#fff0f5",
        padding: 16,
        borderRadius: 16,
        boxShadow: "0 0 10px rgba(0,0,0,0.1)",
        height: 520,
        overflowY: "auto"
      }}>
        {messages.map((msg, i) => (
          <div key={i} style={{
            display: "flex",
            justifyContent: msg.sender === "user" ? "flex-end" : "flex-start",
            marginBottom: 10
          }}>
            {msg.sender === "bot" && <img src="https://i.pravatar.cc/30?img=7" style={{ borderRadius: "50%", marginRight: 8 }} />}
            <input
              value={msg.text}
              onChange={(e) => updateMessage(i, e.target.value)}
              style={{
                padding: "8px 12px",
                borderRadius: 20,
                backgroundColor: msg.sender === "user" ? "#dcf8c6" : "#fff",
                maxWidth: "70%"
              }}
            />
            {msg.sender === "user" && <img src="https://i.pravatar.cc/30?img=3" style={{ borderRadius: "50%", marginLeft: 8 }} />}
          </div>
        ))}
      </div>

      <div style={{ width: 360, margin: "10px auto", display: "flex", gap: 8 }}>
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Type message..."
          style={{ flex: 1, padding: 8, borderRadius: 8, border: "1px solid #ccc" }}
        />
        <button onClick={() => addMessage("user")} style={{ padding: "8px 12px" }}>User</button>
        <button onClick={() => addMessage("bot")} style={{ padding: "8px 12px" }}>Bot</button>
      </div>

      <button onClick={exportChatAsImage} style={{ display: "block", margin: "10px auto", padding: "8px 14px", background: "#25d366", color: "#fff", border: "none", borderRadius: 8 }}>
        Export Chat as Image
      </button>
    </div>
  );
}