import { createSignal, For } from "solid-js";
import { useKeyboard } from "@opentui/solid";
import { SourceManager } from "./SourceManager";
import { useTheme } from "@/context/ThemeContext";
import { PreferencesPanel } from "./PreferencesPanel";
import { SyncPanel } from "./SyncPanel";
import { VisualizerSettings } from "./VisualizerSettings";

type SettingsScreenProps = {
  accountLabel: string;
  accountStatus: "signed-in" | "signed-out";
  onOpenAccount?: () => void;
  onExit?: () => void;
};

type SectionId = "sync" | "sources" | "preferences" | "visualizer" | "account";

const SECTIONS: Array<{ id: SectionId; label: string }> = [
  { id: "sync", label: "Sync" },
  { id: "sources", label: "Sources" },
  { id: "preferences", label: "Preferences" },
  { id: "visualizer", label: "Visualizer" },
  { id: "account", label: "Account" },
];

export function SettingsPage(props: SettingsScreenProps) {
  const { theme } = useTheme();
  const [activeSection, setActiveSection] = createSignal<SectionId>("sync");

  useKeyboard((key) => {
    if (key.name === "escape") {
      props.onExit?.();
      return;
    }

    if (key.name === "tab") {
      const idx = SECTIONS.findIndex((s) => s.id === activeSection());
      const next = key.shift
        ? (idx - 1 + SECTIONS.length) % SECTIONS.length
        : (idx + 1) % SECTIONS.length;
      setActiveSection(SECTIONS[next].id);
      return;
    }

    if (key.name === "1") setActiveSection("sync");
    if (key.name === "2") setActiveSection("sources");
    if (key.name === "3") setActiveSection("preferences");
    if (key.name === "4") setActiveSection("visualizer");
    if (key.name === "5") setActiveSection("account");
  });

  return (
    <box flexDirection="column" gap={1} height="100%">
      <box
        flexDirection="row"
        justifyContent="space-between"
        alignItems="center"
      >
        <text>
          <strong>Settings</strong>
        </text>
        <text fg={theme.textMuted}>
          [Tab] Switch section | 1-5 jump | Esc up
        </text>
      </box>

      <box flexDirection="row" gap={1}>
        <For each={SECTIONS}>
          {(section, index) => (
            <box
              border
              padding={0}
              backgroundColor={
                activeSection() === section.id ? theme.primary : undefined
              }
              onMouseDown={() => setActiveSection(section.id)}
            >
              <text
                fg={
                  activeSection() === section.id ? theme.text : theme.textMuted
                }
              >
                [{index() + 1}] {section.label}
              </text>
            </box>
          )}
        </For>
      </box>

      <box border flexGrow={1} padding={1} flexDirection="column" gap={1}>
        {activeSection() === "sync" && <SyncPanel />}
        {activeSection() === "sources" && <SourceManager focused />}
        {activeSection() === "preferences" && <PreferencesPanel />}
        {activeSection() === "visualizer" && <VisualizerSettings />}
        {activeSection() === "account" && (
          <box flexDirection="column" gap={1}>
            <text fg={theme.textMuted}>Account</text>
            <box flexDirection="row" gap={2} alignItems="center">
              <text fg={theme.textMuted}>Status:</text>
              <text
                fg={
                  props.accountStatus === "signed-in"
                    ? theme.success
                    : theme.warning
                }
              >
                {props.accountLabel}
              </text>
            </box>
            <box border padding={0} onMouseDown={() => props.onOpenAccount?.()}>
              <text fg={theme.primary}>[A] Manage Account</text>
            </box>
          </box>
        )}
      </box>

      <text fg={theme.textMuted}>Enter to dive | Esc up</text>
    </box>
  );
}