/**
 * Settings dialog with sidebar-style nav (Appearance, AI). Reference: shadcn sidebar-13.
 */

import React, { useCallback, useState } from 'react'
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog'
import { Button } from '@/components/ui/button'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import { Switch } from '@/components/ui/switch'
import { Input } from '@/components/ui/input'
import { useTheme } from '@/lib/themeContext'
import type { Theme } from '@/lib/themeContext'
import { usePlatform } from './KosmosContext'
import type { AiConnection, AiConnectionProvider } from './KosmosContext'
import { Sun, Sparkles } from 'lucide-react'

type SettingsSection = 'appearance' | 'ai'

export function SettingsDialog({
  trigger,
}: {
  trigger: React.ReactNode
}) {
  const [open, setOpen] = useState(false)
  const [section, setSection] = useState<SettingsSection>('appearance')
  const { theme, setTheme } = useTheme()
  const { showMinimap, setShowMinimap, aiConnection, setAiConnection } = usePlatform()

  const updateAiConnection = useCallback(
    (partial: Partial<AiConnection>) => {
      setAiConnection({ ...aiConnection, ...partial })
    },
    [aiConnection, setAiConnection]
  )

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>{trigger}</DialogTrigger>
      <DialogContent
        className="flex h-[min(85vh,28rem)] max-w-2xl p-0 gap-0 overflow-hidden"
        aria-describedby={undefined}
      >
        <DialogHeader className="sr-only">
          <DialogTitle>Settings</DialogTitle>
        </DialogHeader>
        <div className="flex flex-1 min-h-0 w-full">
          <nav
            className="flex w-44 shrink-0 flex-col gap-1 border-r bg-muted/30 p-2"
            aria-label="Settings sections"
          >
            <div className="px-2 py-1.5 text-xs font-medium text-muted-foreground">
              Settings
            </div>
            <Button
              variant={section === 'appearance' ? 'secondary' : 'ghost'}
              size="sm"
              className="justify-start gap-2"
              onClick={() => setSection('appearance')}
            >
              <Sun className="size-4 shrink-0 opacity-70" />
              Appearance
            </Button>
            <Button
              variant={section === 'ai' ? 'secondary' : 'ghost'}
              size="sm"
              className="justify-start gap-2"
              onClick={() => setSection('ai')}
            >
              <Sparkles className="size-4 shrink-0 opacity-70" />
              AI
            </Button>
          </nav>
          <div className="flex-1 min-h-0 overflow-auto p-4">
            {section === 'appearance' && (
              <div className="space-y-6">
                <h3 className="text-sm font-medium text-muted-foreground">Appearance</h3>
                <div className="grid grid-cols-1 gap-4 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center">
                  <label htmlFor="settings-theme" className="text-sm font-medium">
                    Theme
                  </label>
                  <Select value={theme} onValueChange={(v) => setTheme(v as Theme)}>
                    <SelectTrigger id="settings-theme" className="w-full min-w-[8rem] sm:w-40">
                      <SelectValue placeholder="Theme" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="light">Light</SelectItem>
                      <SelectItem value="dark">Dark</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-3 pt-2 border-t">
                  <h4 className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
                    Canvas
                  </h4>
                  <div className="grid grid-cols-1 gap-4 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center">
                    <label htmlFor="settings-minimap" className="text-sm font-medium">
                      Minimap
                    </label>
                    <Switch
                      id="settings-minimap"
                      checked={showMinimap}
                      onCheckedChange={setShowMinimap}
                    />
                  </div>
                </div>
              </div>
            )}
            {section === 'ai' && (
              <div className="space-y-6">
                <h3 className="text-sm font-medium text-muted-foreground">AI connection</h3>
                <p className="text-xs text-muted-foreground">
                  Used by the Agent node. Choose OpenAI or a local server (e.g. LM Studio).
                </p>
                <div className="space-y-4">
                  <div className="grid grid-cols-1 gap-2 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center">
                    <label htmlFor="settings-ai-provider" className="text-sm font-medium">
                      Provider
                    </label>
                    <Select
                      value={aiConnection.provider}
                      onValueChange={(v) => updateAiConnection({ provider: v as AiConnectionProvider })}
                    >
                      <SelectTrigger id="settings-ai-provider" className="w-full min-w-[10rem] sm:w-48">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="local">Local (LM Studio, Ollama, etc.)</SelectItem>
                        <SelectItem value="openai">OpenAI</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  {aiConnection.provider === 'local' && (
                    <div className="grid grid-cols-1 gap-2 sm:grid-cols-[minmax(0,1fr)_1fr] sm:items-center">
                      <label htmlFor="settings-ai-baseurl" className="text-sm font-medium">
                        Base URL
                      </label>
                      <Input
                        id="settings-ai-baseurl"
                        type="url"
                        placeholder="http://localhost:1234/v1"
                        value={aiConnection.baseURL}
                        onChange={(e) => updateAiConnection({ baseURL: e.target.value })}
                        className="font-mono text-xs"
                      />
                    </div>
                  )}
                  <div className="grid grid-cols-1 gap-2 sm:grid-cols-[minmax(0,1fr)_1fr] sm:items-center">
                    <label htmlFor="settings-ai-model" className="text-sm font-medium">
                      Model
                    </label>
                    <Input
                      id="settings-ai-model"
                      type="text"
                      placeholder={aiConnection.provider === 'local' ? 'local-model' : 'gpt-4o-mini'}
                      value={aiConnection.model}
                      onChange={(e) => updateAiConnection({ model: e.target.value })}
                      className="font-mono text-xs"
                    />
                  </div>
                  <div className="grid grid-cols-1 gap-2 sm:grid-cols-[minmax(0,1fr)_1fr] sm:items-center">
                    <label htmlFor="settings-ai-apikey" className="text-sm font-medium">
                      API key
                    </label>
                    <Input
                      id="settings-ai-apikey"
                      type="password"
                      autoComplete="off"
                      placeholder={aiConnection.provider === 'openai' ? 'sk-...' : 'Optional for local'}
                      value={aiConnection.apiKey}
                      onChange={(e) => updateAiConnection({ apiKey: e.target.value })}
                      className="font-mono text-xs"
                    />
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}