"use client"

import { useState } from "react"
import { useLocale } from "@/lib/i18n/context"
import { mockCategories } from "@/lib/mock-data"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Send } from "lucide-react"

export function NewThreadForm() {
  const { locale, t } = useLocale()
  const [title, setTitle] = useState("")
  const [content, setContent] = useState("")
  const [categoryId, setCategoryId] = useState("")

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    // Mock: do nothing for now
  }

  return (
    <form onSubmit={handleSubmit} className="flex flex-col gap-5">
      <div className="flex flex-col gap-2">
        <Label htmlFor="category">{t.thread.category}</Label>
        <Select value={categoryId} onValueChange={setCategoryId}>
          <SelectTrigger id="category">
            <SelectValue placeholder={t.thread.selectCategory} />
          </SelectTrigger>
          <SelectContent>
            {mockCategories.map((cat) => (
              <SelectItem key={cat.id} value={cat.id}>
                {locale === "tr" ? cat.name_tr : cat.name_en}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>

      <div className="flex flex-col gap-2">
        <Label htmlFor="title">{t.thread.title}</Label>
        <Input
          id="title"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          placeholder={t.thread.titlePlaceholder}
        />
      </div>

      <div className="flex flex-col gap-2">
        <Label htmlFor="content">{t.thread.content}</Label>
        <Textarea
          id="content"
          value={content}
          onChange={(e) => setContent(e.target.value)}
          placeholder={t.thread.contentPlaceholder}
          rows={8}
          className="resize-none"
        />
      </div>

      <div className="flex justify-end">
        <Button
          type="submit"
          disabled={!title.trim() || !content.trim() || !categoryId}
          className="gap-1.5"
        >
          <Send className="h-4 w-4" />
          {t.thread.create}
        </Button>
      </div>
    </form>
  )
}