<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ربات هوش مصنوعی من ❤️</title>

<style>
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Tahoma, Arial, sans-serif;
    background: #0f1020;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.chat-app {
    width: 100%;
    max-width: 600px;
    height: 95vh;
    max-height: 850px;
    display: flex;
    flex-direction: column;
    background: #191a30;
    border: 1px solid #343550;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 50px #0005;
}

.header {
    padding: 18px;
    background: linear-gradient(135deg, #7c3aed, #ec4899);
    display: flex;
    align-items: center;
    gap: 12px;
}

.avatar {
    width: 48px;
    height: 48px;
    background: #ffffff30;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 27px;
}

.header h2 {
    font-size: 17px;
    margin: 0 0 6px;
}

.header p {
    font-size: 12px;
    margin: 0;
    opacity: .9;
}

.messages {
    flex: 1;
    overflow-y: auto;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.message {
    max-width: 85%;
    padding: 13px 15px;
    border-radius: 15px;
    font-size: 14px;
    line-height: 2;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.bot {
    background: #292a45;
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}

.user {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

.copy-btn {
    display: block;
    margin-top: 8px;
    border: 0;
    border-radius: 7px;
    padding: 5px 10px;
    background: #ffffff18;
    color: white;
    cursor: pointer;
    font-size: 11px;
}

.typing {
    color: #c4b5fd;
    font-size: 12px;
    padding: 0 18px 10px;
    display: none;
}

.input-area {
    padding: 15px;
    background: #20213a;
    border-top: 1px solid #343550;
}

.input-row {
    display: flex;
    gap: 9px;
    align-items: flex-end;
}

textarea {
    flex: 1;
    min-width: 0;
    resize: none;
    max-height: 120px;
    height: 48px;
    padding: 13px;
    border: 1px solid #414264;
    border-radius: 13px;
    background: #141527;
    color: white;
    outline: none;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.6;
}

textarea:focus {
    border-color: #a78bfa;
}

button {
    font-family: inherit;
}

.send-btn {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border: 0;
    border-radius: 13px;
    background: #8b5cf6;
    color: white;
    font-size: 20px;
    cursor: pointer;
}

.send-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.note {
    text-align: center;
    font-size: 10px;
    color: #8889a8;
    margin-top: 10px;
}

@media (max-width: 600px) {
    body {
        align-items: stretch;
    }

    .chat-app {
        height: 100dvh;
        max-height: none;
        border-radius: 0;
        border: none;
    }
}
</style>
</head>

<body>

<div class="chat-app">

    <header class="header">
        <div class="avatar">🤖</div>
        <div>
            <h2>دوست هوشمند ❤️</h2>
            <p>همیشه آماده گفت‌وگو</p>
        </div>
    </header>

    <main class="messages" id="messages" aria-live="polite">
        <div class="message bot">
            سلام دوست خوبم! ❤️😊

            من دوست هوشمند تو هستم.
            می‌تونی با من صحبت کنی، سؤال بپرسی، داستان بخوای یا درباره ایده‌هات حرف بزنی.

            امروز چطور می‌تونم کمکت کنم؟ 🌷
        </div>
    </main>

    <div class="typing" id="typing">
        ربات در حال پاسخ دادن است... 💭
    </div>

    <form class="input-area" id="chatForm">
        <div class="input-row">
            <textarea
                id="userInput"
                placeholder="پیامت رو اینجا بنویس... ❤️"
                aria-label="پیام شما"
                required
            ></textarea>

            <button class="send-btn" id="sendBtn" type="submit">
                ➤
            </button>
        </div>

        <div class="note">
            با مهربانی صحبت کنیم ❤️
        </div>
    </form>

</div>

<script>
/*
برای فعال شدن هوش مصنوعی واقعی:
1. یک سرور بساز.
2. سرور را به API یک مدل هوش مصنوعی متصل کن.
3. آدرس سرور خودت را در API_URL قرار بده.

کلید API را هرگز داخل این فایل قرار نده.
*/

const API_URL = ""; 
// نمونه: https://your-server.example.com/api/chat

const messages = document.getElementById("messages");
const form = document.getElementById("chatForm");
const input = document.getElementById("userInput");
const typing = document.getElementById("typing");
const sendBtn = document.getElementById("sendBtn");

let history = [];

function addMessage(text, role) {
    const box = document.createElement("div");
    box.className = "message " + role;

    const content = document.createElement("div");
    content.textContent = text;
    box.appendChild(content);

    if (role === "bot") {
        const copy = document.createElement("button");
        copy.className = "copy-btn";
        copy.textContent = "📋 کپی پیام";

        copy.onclick = async () => {
            try {
                await navigator.clipboard.writeText(text);
                copy.textContent = "✅ کپی شد";
            } catch {
                copy.textContent = "کپی در این مرورگر ممکن نیست";
            }
        };

        box.appendChild(copy);
    }

    messages.appendChild(box);
    messages.scrollTop = messages.scrollHeight;
}

function localReply(text) {
    const t = text.toLowerCase();

    if (/سلام|درود|hi\b|hello/.test(t)) {
        return "سلام دوست خوبم! ❤️😊 خوشحالم که اومدی. چه خبر؟ چطور می‌تونم کمکت کنم؟";
    }

    if (/خوبی|حالت چطوره/.test(t)) {
        return "ممنون که پرسیدی! ❤️ من آماده‌ام باهات گفت‌وگو کنم. تو چطوری؟";
    }

    if (/اسمت چیه|اسم تو/.test(t)) {
        return "من دوست هوشمند تو هستم! 🤖❤️ دوست داری درباره چی صحبت کنیم؟";
    }

    if (/دوستت دارم/.test(t)) {
        return "چه حرف قشنگی! ❤️ من یک هوش مصنوعی هستم، اما اینجام تا با احترام و مهربانی بهت کمک کنم. 🌷";
    }

    if (/خداحافظ|فعلا|بای\b/.test(t)) {
        return "فعلاً دوست خوبم! ❤️ امیدوارم روز قشنگی داشته باشی. هر وقت خواستی می‌تونی برگردی. 🌷";
    }

    return "ممنون که پیامت رو نوشتی! ❤️ برای اینکه بتونم به سؤال‌های مختلفت پاسخ بدم، باید API هوش مصنوعی به برنامه متصل بشه. در حال حاضر فقط پاسخ‌های ساده و از پیش تعیین‌شده فعاله.";
}

async function getReply(text) {
    if (!API_URL) {
        return localReply(text);
    }

    const response = await fetch(API_URL, {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            message: text,
            history: history,
            system: "تو یک دستیار هوش مصنوعی فارسی‌زبان، مهربان، محترم و مفید هستی. با لحنی دوستانه پاسخ بده. به پرسش‌های مجاز کاربر کمک کن و اگر چیزی را نمی‌دانی صادقانه بگو."
        })
    });

    if (!response.ok) {
        throw new Error("خطا در ارتباط با سرور");
    }

    const data = await response.json();

    if (typeof data.reply !== "string") {
        throw new Error("پاسخ سرور معتبر نیست");
    }

    return data.reply;
}

form.addEventListener("submit", async function(event) {
    event.preventDefault();

    const text = input.value.trim();

    if (!text || sendBtn.disabled) return;

    addMessage(text, "user");

    input.value = "";
    input.style.height = "48px";

    history.push({
        role: "user",
        content: text
    });

    typing.style.display = "block";
    sendBtn.disabled = true;

    try {
        const reply = await getReply(text);

        addMessage(reply, "bot");

        history.push({
            role: "assistant",
            content: reply
        });

        // نگهداری تاریخچه در یک اندازه محدود
        if (history.length > 20) {
            history = history.slice(-20);
        }

    } catch (error) {
        addMessage(
            "متأسفم دوست خوبم ❤️ ارتباط با هوش مصنوعی برقرار نشد. لطفاً تنظیمات سرور را بررسی کن و دوباره تلاش کن.",
            "bot"
        );
    } finally {
        typing.style.display = "none";
        sendBtn.disabled = false;
        input.focus();
    }
});

input.addEventListener("input", function() {
    this.style.height = "48px";
    this.style.height = Math.min(this.scrollHeight, 120) + "px";
});

input.addEventListener("keydown", function(event) {
    if (event.key === "Enter" && !event.shiftKey) {
        event.preventDefault();
        form.requestSubmit();
    }
});
</script>

</body>
</html>