"use client";
// src/app/users/[id]/edit/page.tsx
import { useEffect, useMemo, useState } from "react";
import { useParams, useRouter } from "next/navigation";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { AppShell } from "@/components/layout/AppShell";
import { Input, Select, Button, Card, CardHeader, CardTitle, CardContent, Badge } from "@/components/ui/index";
import { createUserSchema, UserInput } from "@/lib/validations";
import { getInitials } from "@/lib/utils";
import { toast } from "sonner";
import { Loader2 } from "lucide-react";
import { useAuth } from "@/hooks/useAuth";
import { useLanguage } from "@/i18n/LanguageContext";

export default function EditUserPage() {
  const { id } = useParams() as { id: string };
  const router = useRouter();
  const { t } = useLanguage();
  const { user: currentUser } = useAuth();
  const [userData, setUserData] = useState<any>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [isSaving, setIsSaving] = useState(false);

  const userSchemaResolved = useMemo(() => createUserSchema(t), [t]);

  const ROLE_OPTIONS = useMemo(
    () => [
      { value: "SUPER_ADMIN", label: t("role.SUPER_ADMIN") },
      { value: "ADMIN", label: t("role.ADMIN") },
      { value: "MANAGER", label: t("role.MANAGER") },
      { value: "SALES_REP", label: t("role.SALES_REP") },
      { value: "SUPPORT_SUPERVISOR", label: t("role.SUPPORT_SUPERVISOR") },
      { value: "SUPPORT_AGENT", label: t("role.SUPPORT_AGENT") },
      { value: "MARKETING_MANAGER", label: t("role.MARKETING_MANAGER") },
      { value: "VIEWER", label: t("role.VIEWER") },
    ],
    [t]
  );

  const { register, handleSubmit, reset, formState: { errors } } = useForm<UserInput>({
    resolver: zodResolver(userSchemaResolved),
  });

  const isSelf = currentUser?.id === id;

  useEffect(() => {
    fetch(`/api/users/${id}`).then(r => r.json()).then(d => {
      setUserData(d.data);
      reset({
        name: d.data.name,
        email: d.data.email,
        role: d.data.role,
        phone: d.data.phone ?? "",
        isActive: d.data.isActive,
        password: "",
      });
    }).catch(() => toast.error(t("toast.loadFailed"))).finally(() => setIsLoading(false));
  }, [id, reset, t]);

  const onSubmit = async (data: UserInput) => {
    setIsSaving(true);
    try {
      const payload: Record<string, unknown> = { name: data.name, phone: data.phone, role: data.role, isActive: data.isActive };
      if (data.password) payload.password = data.password;

      const res = await fetch(`/api/users/${id}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });
      if (!res.ok) throw new Error((await res.json()).error ?? t("toast.failed"));
      toast.success(t("toast.userUpdated"));
      router.push("/users");
    } catch (e: any) { toast.error(e.message); }
    finally { setIsSaving(false); }
  };

  if (isLoading) return (
    <AppShell breadcrumbs={[{ label: t("nav.users"), href: "/users" }, { label: t("common.breadcrumbEdit") }]}>
      <div className="flex justify-center h-64 items-center"><Loader2 className="w-8 h-8 animate-spin text-primary" /></div>
    </AppShell>
  );

  return (
    <AppShell breadcrumbs={[{ label: t("nav.users"), href: "/users" }, { label: userData?.name ?? t("users.title") }, { label: t("common.breadcrumbEdit") }]}>
      <div className="w-full min-w-0">
        {userData && (
          <div className="flex items-center gap-4 mb-6 p-4 bg-card border border-border rounded-xl">
            <div className="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center text-primary font-bold text-xl">
              {getInitials(userData.name)}
            </div>
            <div>
              <h1 className="text-lg font-bold text-foreground">{userData.name}</h1>
              <p className="text-sm text-muted-foreground">{userData.email}</p>
            </div>
            <div className="ml-auto flex flex-col items-end gap-1">
              <Badge variant={userData.isActive ? "success" : "secondary"}>
                {userData.isActive ? t("common.active") : t("common.inactive")}
              </Badge>
              {isSelf && (
                <span className="text-xs text-muted-foreground">{t("users.thisIsYou")}</span>
              )}
            </div>
          </div>
        )}

        <form noValidate onSubmit={handleSubmit(onSubmit)} className="space-y-6">
          <Card>
            <CardHeader><CardTitle>{t("users.formUserInfo")}</CardTitle></CardHeader>
            <CardContent className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <Input label={t("users.fullName")} required error={errors.name?.message} {...register("name")} />
              <Input label={t("common.phone")} type="tel" {...register("phone")} />
              <Input label={t("common.email")} type="email" value={userData?.email ?? ""} disabled hint={t("users.emailCannotChange")} />
              <Select
                label={t("users.role")}
                disabled={isSelf}
                hint={isSelf ? t("users.roleSelfHint") : undefined}
                options={ROLE_OPTIONS}
                error={errors.role?.message}
                {...register("role")}
              />
            </CardContent>
          </Card>

          <Card>
            <CardHeader><CardTitle>{t("users.changePasswordCard")}</CardTitle></CardHeader>
            <CardContent>
              <Input
                label={t("users.newPassword")}
                type="password"
                hint={t("users.newPasswordHint")}
                error={errors.password?.message}
                {...register("password")}
              />
            </CardContent>
          </Card>

          {!isSelf && (
            <Card>
              <CardHeader><CardTitle>{t("users.accountStatus")}</CardTitle></CardHeader>
              <CardContent>
                <label className="flex items-center gap-3 cursor-pointer">
                  <input
                    type="checkbox"
                    className="w-4 h-4 accent-primary rounded"
                    {...register("isActive")}
                  />
                  <div>
                    <p className="text-sm font-medium">{t("users.activeAccountLabel")}</p>
                    <p className="text-xs text-muted-foreground">{t("users.activeAccountHint")}</p>
                  </div>
                </label>
              </CardContent>
            </Card>
          )}

          <div className="flex justify-end gap-3">
            <Button type="button" variant="outline" onClick={() => router.push("/users")} disabled={isSaving}>{t("common.cancel")}</Button>
            <Button type="submit" loading={isSaving}>{t("common.save")}</Button>
          </div>
        </form>
      </div>
    </AppShell>
  );
}