"use client"

import { Link } from "@/i18n/navigation"
import { z } from "zod"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import {useTranslations} from "next-intl"

import { FormSection } from "@/components/form-section"
import { PageHeader } from "@/components/page-header"
import { Button } from "@/components/ui/button"
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

const schema = z.object({
  base: z.string().min(3, "Base currency is required."),
  target: z.string().min(3, "Target currency is required."),
  rate: z.number().positive("Rate must be > 0."),
})

export default function Page() {
  const t = useTranslations("ExchangeRates")
  const tCreate = useTranslations("ExchangeRates.Create")
  const tc = useTranslations("Common")

  const form = useForm<z.infer<typeof schema>>({
    resolver: zodResolver(schema),
    defaultValues: { base: "USD", target: "EUR", rate: 0.92 },
  })

  return (
    <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
      <PageHeader
        title={tCreate("title")}
        actions={
          <Button variant="outline" asChild>
            <Link href="/exchange-rates">{tc("actions.back")}</Link>
          </Button>
        }
      />

      <Form {...form}>
        <form className="grid gap-6" onSubmit={form.handleSubmit(() => {})}>
          <FormSection title={tCreate("sections.rate")}>
            <div className="grid gap-4 md:grid-cols-3">
              <FormField
                control={form.control}
                name="base"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>{t("columns.base")}</FormLabel>
                    <Select value={field.value} onValueChange={field.onChange}>
                      <FormControl>
                        <SelectTrigger className="w-full">
                          <SelectValue />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        <SelectItem value="USD">USD</SelectItem>
                        <SelectItem value="EUR">EUR</SelectItem>
                        <SelectItem value="GBP">GBP</SelectItem>
                      </SelectContent>
                    </Select>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="target"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>{t("columns.target")}</FormLabel>
                    <Select value={field.value} onValueChange={field.onChange}>
                      <FormControl>
                        <SelectTrigger className="w-full">
                          <SelectValue />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        <SelectItem value="USD">USD</SelectItem>
                        <SelectItem value="EUR">EUR</SelectItem>
                        <SelectItem value="GBP">GBP</SelectItem>
                      </SelectContent>
                    </Select>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="rate"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>{t("columns.rate")}</FormLabel>
                    <FormControl>
                      <Input
                        type="number"
                        step="0.0001"
                        value={Number.isFinite(field.value) ? field.value : 0}
                        onChange={(e) => field.onChange(e.target.valueAsNumber)}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>
          </FormSection>

          <div className="px-4 lg:px-6">
            <div className="flex items-center justify-end gap-2">
              <Button variant="outline" type="button" asChild>
                <Link href="/exchange-rates">{tc("actions.cancel")}</Link>
              </Button>
              <Button type="submit">{tc("actions.create")} (UI)</Button>
            </div>
          </div>
        </form>
      </Form>
    </div>
  )
}