"use client"

import { use } from "react"
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 { Textarea } from "@/components/ui/textarea"

const schema = z.object({
  name: z.string().min(2, "Name is required."),
  theme: z.string().optional(),
  homePageContent: z.string().optional(),
  footerContent: z.string().optional(),
  metaTitle: z.string().optional(),
})

export default function Page({ params }: { params: Promise<{ id: string }> }) {
  const { id } = use(params)
  const t = useTranslations("Channels.Edit")
  const tc = useTranslations("Common")

  const form = useForm<z.infer<typeof schema>>({
    resolver: zodResolver(schema),
    defaultValues: {
      name: `Channel ${id}`,
      theme: "default",
      homePageContent: "",
      footerContent: "",
      metaTitle: "",
    },
  })

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

      <Form {...form}>
        <form className="gap-6 grid" onSubmit={form.handleSubmit(() => {})}>
          <FormSection title={t("sections.general")}>
            <div className="gap-4 grid md:grid-cols-2">
              <FormField
                control={form.control}
                name="name"
                render={({ field }) => (
                  <FormItem className="md:col-span-2">
                    <FormLabel>{t("labels.name")}</FormLabel>
                    <FormControl>
                      <Input {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="theme"
                render={({ field }) => (
                  <FormItem className="md:col-span-2">
                    <FormLabel>{t("labels.theme")}</FormLabel>
                    <FormControl>
                      <Input placeholder={t("placeholders.theme")} {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>
          </FormSection>

          <FormSection title={t("sections.homeFooter")}>
            <div className="gap-4 grid">
              <FormField
                control={form.control}
                name="homePageContent"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>{t("labels.homePageContent")}</FormLabel>
                    <FormControl>
                      <Textarea rows={8} placeholder={t("placeholders.htmlOnly")} {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="footerContent"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>{t("labels.footerContent")}</FormLabel>
                    <FormControl>
                      <Textarea rows={6} placeholder={t("placeholders.htmlOnly")} {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>
          </FormSection>

          <FormSection title={t("sections.seo")}>
            <div className="gap-4 grid md:grid-cols-2">
              <FormField
                control={form.control}
                name="metaTitle"
                render={({ field }) => (
                  <FormItem className="md:col-span-2">
                    <FormLabel>{t("labels.metaTitle")}</FormLabel>
                    <FormControl>
                      <Input {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>
          </FormSection>

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