import { useEffect } from "react";
import { STATUS_COLORS, STATUS_LABELS } from "@/lib/constants";
import { generateAppearance } from "@/lib/appearance";
import { useOfficeStore } from "@/store/office-store";
import { ChatConversation } from "./ChatConversation";
import { Pawn } from "./Pawn";

/** Full-screen chat overlay for the selected project agent. */
export function ChatFullscreen() {
  const agent = useOfficeStore((s) => (s.selectedAgentId ? s.agents.get(s.selectedAgentId) : undefined));
  const setChatFullscreen = useOfficeStore((s) => s.setChatFullscreen);

  // Esc returns to the office.
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") setChatFullscreen(false);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [setChatFullscreen]);

  if (!agent) return null;

  return (
    <div className="chat-full-overlay">
      <div className="chat-full-card">
        <div className="chat-full-topbar">
          <div className="chat-full-who">
            <svg viewBox="-30 -42 60 68" width="42" height="48">
              <Pawn appearance={generateAppearance(agent.id)} pose="stand" motion="none" />
            </svg>
            <div>
              <h2>{agent.name}</h2>
              <span
                className="status-chip"
                style={{
                  backgroundColor: `${STATUS_COLORS[agent.status]}22`,
                  color: STATUS_COLORS[agent.status],
                }}
              >
                ● {STATUS_LABELS[agent.status]}
              </span>
              <code className="model-tag">{agent.model}</code>
            </div>
          </div>
          <button className="btn" onClick={() => setChatFullscreen(false)} title="縮回辦公室 (Esc)">
            ⊟ 回到辦公室
          </button>
        </div>
        <ChatConversation agentId={agent.id} variant="full" />
      </div>
    </div>
  );
}
