"use client";

import { FormEvent, useState } from "react";
import { Send, X } from "lucide-react";

export function CookieAndChat() {
  const [visible, setVisible] = useState(true);
  const [chatOpen, setChatOpen] = useState(false);
  const [message, setMessage] = useState("");
  const [sent, setSent] = useState(false);

  function sendMessage(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (!message.trim()) return;
    setMessage("");
    setSent(true);
  }

  return (
    <>
      {visible && (
        <aside className="cookie-banner">
          <p>Bu Sitede, kullanıcı deneyimini geliştirmek ve internet sitesinin verimli çalışmasını sağlamak amacıyla çerezler kullanılmaktadır. <a href="/gizlilik-ve-cerez-politikasi">Daha fazla.</a></p>
          <button type="button" onClick={() => setVisible(false)}>Anladım</button>
        </aside>
      )}
      {chatOpen && (
        <aside className="chat-panel">
          <div><strong>Yapaylisans.com Destek</strong><button type="button" aria-label="Mesaj penceresini kapat" onClick={() => setChatOpen(false)}><X /></button></div>
          <p>{sent ? "Mesajınız demo olarak alındı." : "Size nasıl yardımcı olabiliriz?"}</p>
          <form onSubmit={sendMessage}>
            <input value={message} onChange={(event) => { setMessage(event.target.value); setSent(false); }} placeholder="Mesajınızı yazın" aria-label="Destek mesajı" />
            <button type="submit" aria-label="Mesajı gönder"><Send /></button>
          </form>
        </aside>
      )}
      <button className="chat-pill" type="button" onClick={() => setChatOpen((value) => !value)}>Mesaj gönder</button>
    </>
  );
}