"use client";

import { useState } from "react";
import Link from "next/link";
import { api } from "@/lib/api";
import { useI18n } from "@/lib/i18n";

export default function AiAssistantClient() {
  const { t } = useI18n();
  const [message, setMessage] = useState("");
  const [reply, setReply] = useState("");
  const [cities, setCities] = useState<{ slug: string; name: string; emoji: string }[]>([]);
  const [loading, setLoading] = useState(false);

  const ask = async () => {
    if (!message.trim()) return;
    setLoading(true);
    try {
      const res = await api.askAssistant(message.trim());
      setReply(res.reply);
      setCities(res.cities || []);
    } catch {
      setReply(t.ai.fail);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="community-page">
      <div className="container">
        <nav className="detail-nav"><Link href="/">{t.common.backHome}</Link></nav>
        <div className="section-header reveal">
          <span className="section-tag">{t.ai.tag}</span>
          <h1>{t.ai.title}</h1>
          <p>{t.ai.subtitle}</p>
        </div>
        <div className="community-compose reveal">
          <textarea rows={4} placeholder={t.ai.placeholder} value={message} onChange={(e) => setMessage(e.target.value)} />
          <button type="button" className="btn btn-primary" disabled={loading} onClick={ask}>{t.ai.ask}</button>
        </div>
        {reply && (
          <div className="ai-reply reveal">
            <p>{reply}</p>
            <div className="ai-cities">
              {cities.map((c) => (
                <Link key={c.slug} href={`/destinations/${c.slug}`} className="btn btn-sm">{c.emoji} {c.name}</Link>
              ))}
              <Link href="/next-stop" className="btn btn-sm">{t.ai.nextStop}</Link>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}