"use client";

import { useEchoStore } from "@/stores/echo-store";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { Separator } from "@/components/ui/separator";
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetDescription,
} from "@/components/ui/sheet";
import { Settings2, Volume2, Mic, MessageSquare } from "lucide-react";

export function SettingsPanel() {
  const {
    settingsOpen,
    setSettingsOpen,
    voiceEnabled,
    setVoiceEnabled,
    autoSpeak,
    setAutoSpeak,
    sidebarOpen,
    setSidebarOpen,
  } = useEchoStore();

  return (
    <Sheet open={settingsOpen} onOpenChange={setSettingsOpen}>
      <SheetContent className="w-[340px] sm:w-[400px] overflow-y-auto">
        <SheetHeader className="mb-6">
          <SheetTitle className="flex items-center gap-2">
            <Settings2 className="h-5 w-5" />
            Settings
          </SheetTitle>
          <SheetDescription>
            Configure Echo voice assistant behavior
          </SheetDescription>
        </SheetHeader>

        {/* Voice Settings */}
        <div className="space-y-4">
          <div className="flex items-center gap-3">
            <Volume2 className="h-4 w-4 text-muted-foreground" />
            <h3 className="text-sm font-medium">Voice</h3>
          </div>
          <Separator />

          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label className="text-sm">Voice Input</Label>
              <p className="text-xs text-muted-foreground">
                Enable microphone for speech recognition
              </p>
            </div>
            <Switch checked={voiceEnabled} onCheckedChange={setVoiceEnabled} />
          </div>

          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label className="text-sm">Auto-Speak Responses</Label>
              <p className="text-xs text-muted-foreground">
                Automatically read assistant responses aloud
              </p>
            </div>
            <Switch checked={autoSpeak} onCheckedChange={setAutoSpeak} />
          </div>
        </div>

        <Separator className="my-6" />

        {/* Interface Settings */}
        <div className="space-y-4">
          <div className="flex items-center gap-3">
            <MessageSquare className="h-4 w-4 text-muted-foreground" />
            <h3 className="text-sm font-medium">Interface</h3>
          </div>
          <Separator />

          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label className="text-sm">Show Sidebar</Label>
              <p className="text-xs text-muted-foreground">
                Display the conversation list
              </p>
            </div>
            <Switch checked={sidebarOpen} onCheckedChange={setSidebarOpen} />
          </div>
        </div>

        <Separator className="my-6" />

        {/* About */}
        <div className="space-y-2">
          <h3 className="text-sm font-medium">About</h3>
          <p className="text-xs text-muted-foreground leading-relaxed">
            Echo is a modular, private-first voice assistant. It uses local
            speech recognition, cloud-based reasoning, and controllable
            text-to-speech to provide a natural conversational experience.
          </p>
          <p className="text-xs text-muted-foreground">
            Stack: Vosk + OpenRouter (Qwen3) + Qwen3-TTS
          </p>
        </div>
      </SheetContent>
    </Sheet>
  );
}
