"use client";

import type { UserUpsertFormValues } from "./users-types";
import {
  DASHBOARD_USER_GENDER_VALUES,
  DASHBOARD_USER_LANGUAGE_VALUES,
  DASHBOARD_USER_ROLE_VALUES,
} from "./users-types";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Checkbox } from "@/components/ui/checkbox";
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";
import { useLocale, useTranslations } from "next-intl";
import type { SubmitHandler, UseFormReturn } from "react-hook-form";

interface UserUpsertFormViewProps {
  form: UseFormReturn<UserUpsertFormValues>;
  formId: string;
  mode: "create" | "edit";
  onSubmit: SubmitHandler<UserUpsertFormValues>;
  isSubmitting?: boolean;
}

export function UserUpsertFormView({
  form,
  formId,
  mode,
  onSubmit,
  isSubmitting = false,
}: UserUpsertFormViewProps) {
  const t = useTranslations("dashboard.users.form");
  const locale = useLocale();
  const isRtl = locale === "ar";

  return (
    <Form {...form}>
      <form id={formId} dir={isRtl ? "rtl" : "ltr"} onSubmit={form.handleSubmit(onSubmit)}>
        <Card className="rounded-2xl border border-border bg-card shadow-none">
          <CardContent className="space-y-6 p-6">
            <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
              <FormField
                control={form.control}
                name="first_name"
                render={({ field }) => (
                  <FormItem className="space-y-2">
                    <FormLabel className="text-sm text-foreground">
                      {t("fields.firstName")} <span className="text-destructive">*</span>
                    </FormLabel>
                    <FormControl>
                      <Input {...field} placeholder={t("placeholders.firstName")} className="h-12 rounded-xl border-border" />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="last_name"
                render={({ field }) => (
                  <FormItem className="space-y-2">
                    <FormLabel className="text-sm text-foreground">
                      {t("fields.lastName")} <span className="text-destructive">*</span>
                    </FormLabel>
                    <FormControl>
                      <Input {...field} placeholder={t("placeholders.lastName")} className="h-12 rounded-xl border-border" />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>

            <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
              <FormField
                control={form.control}
                name="username"
                render={({ field }) => (
                  <FormItem className="space-y-2">
                    <FormLabel className="text-sm text-foreground">
                      {t("fields.username")} <span className="text-destructive">*</span>
                    </FormLabel>
                    <FormControl>
                      <Input {...field} placeholder={t("placeholders.username")} className="h-12 rounded-xl border-border" />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="email"
                render={({ field }) => (
                  <FormItem className="space-y-2">
                    <FormLabel className="text-sm text-foreground">
                      {t("fields.email")} <span className="text-destructive">*</span>
                    </FormLabel>
                    <FormControl>
                      <Input {...field} type="email" placeholder={t("placeholders.email")} className="h-12 rounded-xl border-border" />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>

            <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
              <FormField
                control={form.control}
                name="mobile_country_code"
                render={({ field }) => (
                  <FormItem className="space-y-2">
                    <FormLabel className="text-sm text-foreground">
                      {t("fields.mobileCountryCode")} <span className="text-destructive">*</span>
                    </FormLabel>
                    <FormControl>
                      <Input {...field} placeholder="+966" className="h-12 rounded-xl border-border" />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="mobile_number"
                render={({ field }) => (
                  <FormItem className="space-y-2">
                    <FormLabel className="text-sm text-foreground">
                      {t("fields.mobileNumber")} <span className="text-destructive">*</span>
                    </FormLabel>
                    <FormControl>
                      <Input {...field} placeholder={t("placeholders.mobileNumber")} className="h-12 rounded-xl border-border" />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>

            <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
              <FormField
                control={form.control}
                name="gender"
                render={({ field }) => (
                  <FormItem className="space-y-2">
                    <FormLabel className="text-sm text-foreground">
                      {t("fields.gender")} <span className="text-destructive">*</span>
                    </FormLabel>
                    <Select value={field.value} onValueChange={field.onChange}>
                      <FormControl>
                        <SelectTrigger className="h-12 rounded-xl border-border">
                          <SelectValue placeholder={t("placeholders.gender")} />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        {DASHBOARD_USER_GENDER_VALUES.map((gender) => (
                          <SelectItem key={gender} value={gender}>
                            {t(`genders.${gender}`)}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="role"
                render={({ field }) => (
                  <FormItem className="space-y-2">
                    <FormLabel className="text-sm text-foreground">
                      {t("fields.role")} <span className="text-destructive">*</span>
                    </FormLabel>
                    <Select value={field.value} onValueChange={field.onChange}>
                      <FormControl>
                        <SelectTrigger className="h-12 rounded-xl border-border">
                          <SelectValue placeholder={t("placeholders.role")} />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        {DASHBOARD_USER_ROLE_VALUES.map((role) => (
                          <SelectItem key={role} value={role}>
                            {t(`roles.${role}`)}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="language"
                render={({ field }) => (
                  <FormItem className="space-y-2">
                    <FormLabel className="text-sm text-foreground">
                      {t("fields.language")} <span className="text-destructive">*</span>
                    </FormLabel>
                    <Select value={field.value} onValueChange={field.onChange}>
                      <FormControl>
                        <SelectTrigger className="h-12 rounded-xl border-border">
                          <SelectValue placeholder={t("placeholders.language")} />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        {DASHBOARD_USER_LANGUAGE_VALUES.map((language) => (
                          <SelectItem key={language} value={language}>
                            {t(`languages.${language}`)}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>

            <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
              <FormField
                control={form.control}
                name="date_of_birth"
                render={({ field }) => (
                  <FormItem className="space-y-2">
                    <FormLabel className="text-sm text-foreground">
                      {t("fields.dateOfBirth")} <span className="text-destructive">*</span>
                    </FormLabel>
                    <FormControl>
                      <Input {...field} type="date" placeholder={t("placeholders.dateOfBirth")} className="h-12 rounded-xl border-border" />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="is_active"
                render={({ field }) => (
                  <FormItem className="flex items-center justify-between gap-4 rounded-xl border border-border p-4">
                    <FormLabel className="text-sm text-foreground">{t("fields.status")}</FormLabel>
                    <FormControl>
                      <Checkbox
                        checked={Boolean(field.value)}
                        onCheckedChange={(value) => field.onChange(Boolean(value))}
                        disabled={isSubmitting}
                      />
                    </FormControl>
                  </FormItem>
                )}
              />
            </div>
          </CardContent>
        </Card>

        <Card className="rounded-2xl border border-border bg-card shadow-none mt-6">
          <CardHeader className="border-b border-border py-4">
            <CardTitle className="text-base font-bold text-foreground">{t("fields.password")}</CardTitle>
          </CardHeader>

          <CardContent className="grid grid-cols-1 gap-6 p-6 lg:grid-cols-2">
            <FormField
              control={form.control}
              name="password"
              render={({ field }) => (
                <FormItem className="space-y-2">
                  <FormLabel className="text-sm text-foreground">
                    {t("fields.password")}
                    {mode === "create" && <span className="text-destructive"> *</span>}
                  </FormLabel>
                  <FormControl>
                    <Input {...field} type="password" placeholder={t("placeholders.password")} className="h-12 rounded-xl border-border" />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={form.control}
              name="confirmPassword"
              render={({ field }) => (
                <FormItem className="space-y-2">
                  <FormLabel className="text-sm text-foreground">
                    {t("fields.confirmPassword")}
                    {mode === "create" && <span className="text-destructive"> *</span>}
                  </FormLabel>
                  <FormControl>
                    <Input {...field} type="password" placeholder={t("placeholders.confirmPassword")} className="h-12 rounded-xl border-border" />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
          </CardContent>
        </Card>
      </form>
    </Form>
  );
}