import { useState, useEffect } from "react";
import { useVideoGen } from "../stores/videoGenStore";
import track from "../lib/track";
import { useDirty } from "../stores/dirtyStore";
import { IcVideo } from "../components/Icons";
import { jget, jpost, request } from "../api";

export default function CreateVideo() {
  const { connected, url, connect, disconnect } = useVideoGen();
  const { makeDirty, makeClean } = useDirty();
  const [connectUrl, setConnectUrl] = useState(url || "");
  const [busy, setBusy] = useState(false);

  useEffect(() => {
    jget("/api/video/status")
      .then(data => {
        if (data.connected && data.url) {
          setConnectUrl(data.url);
          connect(data.url, data);
        }
      })
      .catch(() => {});
  }, []);

  const handleConnect = async () => {
    makeDirty("Bạn đang kết nối tạo video. Mất tiến trình nếu rời đi.");
    if (!connectUrl.trim()) return;
    setBusy(true);
    // Tool này chỉ bàn giao sang app ngoài: đo được tới đây là hết, KHÔNG có
    // output nội bộ để đo (spec §4.8).
    const t0 = Date.now();
    track.runClick({ phase: "connect" });
    try {
      const data = await jpost("/api/video/connect", { url: connectUrl });
      connect(connectUrl, data);
      track.step("connect_success", "output", { latency_ms_client: Date.now() - t0 });
    } catch (e) {
      track.abandon("connect_failed", "run");
      alert("Lỗi kết nối: " + e.message);
    } finally {
      setBusy(false);
    }
  };

  const handleDisconnect = async () => {
    makeClean();
    setBusy(true);
    try {
      await request("/api/video/disconnect", { method: "POST" });
      disconnect();
    } catch (e) {
      alert("Lỗi: " + e.message);
    } finally {
      setBusy(false);
    }
  };

  return (
    <>
      <div style={{
        display: "flex", alignItems: "center", gap: 12,
        padding: "10px 36px", background: "var(--white)",
        borderBottom: "1px solid var(--line)",
        flex: "0 0 auto",
      }}>
        <IcVideo size={18} style={{ color: "var(--orange)" }} />
        <span style={{
          display: "inline-flex", alignItems: "center", gap: 5,
          fontSize: 12, fontWeight: 600, padding: "4px 10px", borderRadius: 20,
          background: connected ? "var(--green-soft)" : "var(--red-soft)",
          color: connected ? "var(--green)" : "var(--red)",
        }}>
          <span style={{ width: 6, height: 6, borderRadius: "50%", background: "currentColor" }} />
          {connected ? "Đã kết nối" : "Chưa kết nối"}
        </span>

        {!connected ? (
          <>
            <input type="text" value={connectUrl}
              onChange={e => setConnectUrl(e.target.value)}
              placeholder="https://xxxx.gradio.live/"
              style={{ flex: 1, maxWidth: 400, padding: "7px 12px", fontSize: 13, border: "2px solid var(--line)", borderRadius: "var(--radius-sm)", background: "#fff" }} />
            <button className="btn primary sm" disabled={busy || !connectUrl.trim()}
              onClick={handleConnect}>
              {busy ? "⏳" : "🔌 Kết nối"}
            </button>
          </>
        ) : (
          <>
            <span className="small muted" style={{ flex: 1 }}>{url}</span>
            <button className="btn sm" disabled={busy} onClick={handleDisconnect}>
              🔌 Ngắt kết nối
            </button>
          </>
        )}
      </div>

      {/* Hướng dẫn khi chưa kết nối */}
      {!connected && (
        <div style={{
          flex: 1, display: "flex", alignItems: "center", justifyContent: "center",
          background: "var(--cream)",
        }}>
          <div style={{ textAlign: "center", maxWidth: 480 }}>
            <div style={{
              width: 64, height: 64, borderRadius: "50%",
              background: "var(--orange-soft)", color: "var(--orange)",
              display: "grid", placeItems: "center", margin: "0 auto 16px",
            }}>
              <IcVideo size={28} />
            </div>
            <h2 style={{ margin: "0 0 8px", fontSize: 20 }}>Tạo video với AI</h2>
            <p style={{ color: "var(--ink-2)", fontSize: 14, lineHeight: 1.6, margin: "0 0 20px" }}>
              Kết nối tới server WanGP đang chạy để dùng giao diện tạo video gốc ngay trong trang.
            </p>
            <ol style={{
              textAlign: "left", margin: "0 auto", padding: 0, listStyle: "none",
              display: "flex", flexDirection: "column", gap: 12,
            }}>
              {[
                ["Chạy WanGP", "Khởi động công cụ sinh video WanGP và lấy link Gradio công khai của nó (dạng https://xxxx.gradio.live/)."],
                ["Dán link & Kết nối", "Dán link vào ô phía trên rồi bấm “🔌 Kết nối”. Trạng thái sẽ chuyển sang “Đã kết nối”."],
                ["Tạo video", "Giao diện WanGP gốc hiện ngay trong trang — nhập prompt và tạo video như bình thường."],
                ["Ngắt kết nối", "Xong việc bấm “🔌 Ngắt kết nối”. Link được ghi nhớ để lần sau vào lại nhanh."],
              ].map(([t, d], i) => (
                <li key={i} style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
                  <span style={{
                    flex: "0 0 24px", width: 24, height: 24, borderRadius: "50%",
                    background: "var(--orange)", color: "#fff", fontSize: 12, fontWeight: 700,
                    display: "grid", placeItems: "center", marginTop: 1,
                  }}>{i + 1}</span>
                  <span style={{ fontSize: 13, lineHeight: 1.5 }}>
                    <b>{t}.</b> <span style={{ color: "var(--ink-2)" }}>{d}</span>
                  </span>
                </li>
              ))}
            </ol>
          </div>
        </div>
      )}
    </>
  );
}