"use client";

import { useState, type Dispatch, type SetStateAction } from "react";
import ChatPane, { type Message } from "./components/ChatPane";
import ComparePane from "./components/ComparePane";
import PersonaPicker, { type PersonaInfo } from "./components/PersonaPicker";
import VoicePane from "./components/VoicePane";

const API_BASE =
  process.env.NEXT_PUBLIC_API_BASE ?? "http://localhost:8000";

type Mode = "text" | "voice" | "compare";
type Conversation = { messages: Message[]; sessionId: string | null };

export default function Home() {
  const [selected, setSelected] = useState<PersonaInfo | null>(null);
  const [mode, setMode] = useState<Mode>("text");
  const [conversations, setConversations] = useState<Record<string, Conversation>>({});

  const conversation = selected
    ? (conversations[selected.slug] ?? { messages: [], sessionId: null })
    : { messages: [], sessionId: null };

  const setMessages: Dispatch<SetStateAction<Message[]>> = (next) => {
    if (!selected) return;
    setConversations((previous) => {
      const current = previous[selected.slug] ?? { messages: [], sessionId: null };
      const messages = typeof next === "function" ? next(current.messages) : next;
      return { ...previous, [selected.slug]: { ...current, messages } };
    });
  };

  const setSessionId = (sessionId: string) => {
    if (!selected) return;
    setConversations((previous) => {
      const current = previous[selected.slug] ?? { messages: [], sessionId: null };
      return { ...previous, [selected.slug]: { ...current, sessionId } };
    });
  };

  return (
    <div style={styles.layout}>
      <aside style={styles.sidebar}>
        <div style={styles.sidebarHeader}>
          <h1 style={styles.title}>MentorCore</h1>
          <p style={styles.subtitle}>Converse with great thinkers</p>
        </div>
        <PersonaPicker
          selected={selected}
          onSelect={(p) => { setSelected(p); setMode("text"); }}
          apiBase={API_BASE}
        />
      </aside>

      <main style={styles.main}>
        {selected ? (
          <>
            <div style={styles.tabBar}>
              <button
                style={{ ...styles.tab, ...(mode === "text" ? styles.tabActive : {}) }}
                onClick={() => setMode("text")}
              >
                Text
              </button>
              <button
                style={{ ...styles.tab, ...(mode === "voice" ? styles.tabActive : {}) }}
                onClick={() => setMode("voice")}
              >
                Voice
              </button>
              <button
                style={{ ...styles.tab, ...(mode === "compare" ? styles.tabActive : {}) }}
                onClick={() => setMode("compare")}
              >
                Compare
              </button>
              <span style={styles.personaLabel}>{selected.display_name}</span>
            </div>
            <div style={styles.paneWrap}>
              {mode === "text" && (
                <ChatPane
                  persona={selected}
                  apiBase={API_BASE}
                  messages={conversation.messages}
                  setMessages={setMessages}
                  sessionId={conversation.sessionId}
                  onSessionIdChange={setSessionId}
                />
              )}
              {mode === "voice" && (
                <VoicePane
                  slug={selected.slug}
                  messages={conversation.messages}
                  setMessages={setMessages}
                  sessionId={conversation.sessionId}
                  onSessionIdChange={setSessionId}
                />
              )}
              {mode === "compare" && (
                <ComparePane key={selected.slug} persona={selected} apiBase={API_BASE} />
              )}
            </div>
          </>
        ) : (
          <div style={styles.welcome}>
            <p style={styles.welcomeText}>
              Select a persona from the sidebar to begin.
            </p>
          </div>
        )}
      </main>
    </div>
  );
}

const styles: Record<string, React.CSSProperties> = {
  layout: {
    display: "flex",
    height: "100vh",
    overflow: "hidden",
  },
  sidebar: {
    width: "260px",
    flexShrink: 0,
    borderRight: "1px solid var(--border)",
    background: "var(--surface)",
    display: "flex",
    flexDirection: "column",
    overflowY: "auto",
  },
  sidebarHeader: {
    padding: "20px 16px 12px",
    borderBottom: "1px solid var(--border)",
  },
  title: {
    fontSize: "18px",
    fontWeight: 700,
    color: "var(--accent)",
    letterSpacing: "-0.02em",
  },
  subtitle: {
    fontSize: "12px",
    color: "var(--fg-muted)",
    marginTop: "2px",
  },
  main: {
    flex: 1,
    overflow: "hidden",
    display: "flex",
    flexDirection: "column",
  },
  tabBar: {
    display: "flex",
    alignItems: "center",
    gap: 4,
    padding: "8px 16px",
    borderBottom: "1px solid var(--border)",
    flexShrink: 0,
  },
  tab: {
    background: "none",
    border: "1px solid transparent",
    borderRadius: 6,
    color: "var(--fg-muted)",
    cursor: "pointer",
    fontSize: 13,
    padding: "4px 12px",
  },
  tabActive: {
    borderColor: "var(--accent)",
    color: "var(--accent)",
  },
  personaLabel: {
    marginLeft: "auto",
    fontSize: 12,
    color: "var(--fg-muted)",
    fontStyle: "italic",
  },
  paneWrap: {
    flex: 1,
    overflow: "hidden",
    padding: "16px",
    display: "flex",
    flexDirection: "column",
  },
  welcome: {
    flex: 1,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
  },
  welcomeText: {
    color: "var(--fg-muted)",
    fontSize: "15px",
    fontStyle: "italic",
  },
};