"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { Slider } from "@/components/ui/slider"
import { Textarea } from "@/components/ui/textarea"
import { OLLAMA_MODELS } from "@/lib/ollama"
import { Badge } from "@/components/ui/badge"

interface AIModelSettingsProps {
  user: any
}

export function AIModelSettings({ user }: AIModelSettingsProps) {
  const [settings, setSettings] = useState({
    defaultModel: "deepseek-r1:8b",
    temperature: [0.7],
    maxTokens: [2048],
    showThinking: true,
    autoSave: true,
    contextLength: [4096],
    systemPrompt: "",
    responseStyle: "balanced",
  })

  const handleSave = async () => {
    // TODO: Implement save functionality
    console.log("Saving AI settings:", settings)
  }

  return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle>Default AI Model</CardTitle>
          <CardDescription>Choose your preferred AI model for new conversations</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label>Default Model</Label>
            <Select
              value={settings.defaultModel}
              onValueChange={(value) => setSettings({ ...settings, defaultModel: value })}
            >
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {OLLAMA_MODELS.map((model) => (
                  <SelectItem key={model.id} value={model.id}>
                    <div className="flex flex-col">
                      <span>{model.name}</span>
                      <span className="text-xs text-muted-foreground">{model.description}</span>
                    </div>
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>Response Configuration</CardTitle>
          <CardDescription>Fine-tune how the AI responds to your messages</CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="space-y-2">
            <Label>Response Style</Label>
            <Select
              value={settings.responseStyle}
              onValueChange={(value) => setSettings({ ...settings, responseStyle: value })}
            >
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="concise">Concise - Short and direct responses</SelectItem>
                <SelectItem value="balanced">Balanced - Moderate detail level</SelectItem>
                <SelectItem value="detailed">Detailed - Comprehensive explanations</SelectItem>
                <SelectItem value="creative">Creative - More expressive and creative</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div className="space-y-3">
            <div className="flex items-center justify-between">
              <Label>Temperature: {settings.temperature[0]}</Label>
              <Badge variant="outline">Creativity</Badge>
            </div>
            <Slider
              value={settings.temperature}
              onValueChange={(value) => setSettings({ ...settings, temperature: value })}
              max={1}
              min={0}
              step={0.1}
              className="w-full"
            />
            <p className="text-xs text-muted-foreground">
              Lower values make responses more focused, higher values more creative
            </p>
          </div>

          <div className="space-y-3">
            <div className="flex items-center justify-between">
              <Label>Max Response Length: {settings.maxTokens[0]} tokens</Label>
              <Badge variant="outline">Length</Badge>
            </div>
            <Slider
              value={settings.maxTokens}
              onValueChange={(value) => setSettings({ ...settings, maxTokens: value })}
              max={4096}
              min={256}
              step={256}
              className="w-full"
            />
          </div>

          <div className="space-y-3">
            <div className="flex items-center justify-between">
              <Label>Context Length: {settings.contextLength[0]} tokens</Label>
              <Badge variant="outline">Memory</Badge>
            </div>
            <Slider
              value={settings.contextLength}
              onValueChange={(value) => setSettings({ ...settings, contextLength: value })}
              max={8192}
              min={1024}
              step={1024}
              className="w-full"
            />
            <p className="text-xs text-muted-foreground">How much conversation history to remember</p>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>Behavior Settings</CardTitle>
          <CardDescription>Customize AI behavior and interface preferences</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label>Show Thinking Process</Label>
              <p className="text-sm text-muted-foreground">Display AI reasoning steps when available</p>
            </div>
            <Switch
              checked={settings.showThinking}
              onCheckedChange={(checked) => setSettings({ ...settings, showThinking: checked })}
            />
          </div>

          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label>Auto-save Conversations</Label>
              <p className="text-sm text-muted-foreground">Automatically save chat history</p>
            </div>
            <Switch
              checked={settings.autoSave}
              onCheckedChange={(checked) => setSettings({ ...settings, autoSave: checked })}
            />
          </div>

          <div className="space-y-2">
            <Label>Custom System Prompt</Label>
            <Textarea
              value={settings.systemPrompt}
              onChange={(e) => setSettings({ ...settings, systemPrompt: e.target.value })}
              placeholder="Enter a custom system prompt to influence AI behavior..."
              rows={3}
            />
            <p className="text-xs text-muted-foreground">
              This will be added to every conversation to guide the AI's responses
            </p>
          </div>

          <div className="flex justify-end">
            <Button onClick={handleSave}>Save AI Settings</Button>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}