src/components/mode-selection/ModeSelectionScreen.tsx

"use client";

/**
 * Mode Selection Screen
 * First-run experience after login with mode cards and natural input
 */

import { useRouter } from "next/navigation";
import { ModeCard } from "./ModeCard";
import { ModeNaturalInput } from "./ModeNaturalInput";
import { ModeSwitcher } from "./ModeSwitcher";
import { MODE_CARDS, type Mode } from "./modeSelectionTypes";
import { useDocDoeMode } from "./useDocDoeMode";

export function ModeSelectionScreen() {
  const router = useRouter();
  const { setMode, setLastQuery } = useDocDoeMode();

  const handleModeSelect = (mode: string) => {
    // Persist mode selection
    setMode(mode as Mode);

    const card = MODE_CARDS.find((item) => item.id === mode);
    router.push(card?.href ?? "/tuition");
  };

  const handleNaturalInput = (query: string, detectedMode: Mode) => {
    // Persist the query
    setLastQuery(query);
    
    // Persist the detected mode
    setMode(detectedMode);
    
    // Route to appropriate mode with query parameter
    const card = MODE_CARDS.find((item) => item.id === detectedMode);
    const href = card?.href ?? "/tuition";
    router.push(`${href}?q=${encodeURIComponent(query)}`);
  };

  return (
    <div className="min-h-screen bg-[#030303] flex flex-col">
      {/* Header with Mode Switcher */}
      <div className="border-b border-white/10 p-4">
        <div className="max-w-6xl mx-auto flex items-center justify-between">
          <h1 className="text-lg font-semibold text-white">DocDoe</h1>
          <ModeSwitcher />
        </div>
      </div>
      
      {/* Main Content */}
      <div className="flex-1 flex flex-col items-center justify-center p-6">
        <div className="w-full max-w-4xl mb-12">
          <h2 className="text-3xl md:text-4xl font-semibold text-white text-center mb-2">
            Choose how DocDoe should help you study.
          </h2>
        </div>

        {/* Mode Cards */}
        <div className="w-full max-w-6xl grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
          {MODE_CARDS.map((card) => (
            <ModeCard key={card.id} card={card} onSelect={handleModeSelect} />
          ))}
        </div>

        {/* Natural Input */}
        <ModeNaturalInput onSubmit={handleNaturalInput} />

        {/* Skip Option */}
        <div className="mt-8">
          <button
            type="button"
            onClick={() => router.push("/study-chat")}
            aria-label="Skip mode selection and open Study Chat"
            className="text-sm text-white/40 hover:text-white/60 transition-colors"
          >
            Skip for now
          </button>
        </div>
      </div>
    </div>
  );
}