"use client";

import { Button } from "../../commons/Button";
import Header from "../../commons/Header";
import { Input } from "../../commons/Input";
import { Typography } from "../../commons/Typography";
import { TableAllUsers } from "./components/TableAllUsers";
import { useAdminPage } from "./hooks/useAdminPage";
import { useLanguage } from "@/src/hooks/useLanguage";

export function AdminPage() {
  const { t } = useLanguage();
  const {
    data,
    name,
    setName,
    email,
    setEmail,
    error,
    isLoading,
    isSubmitting,
    deletingId,
    handleSubmit,
    handleDelete,
  } = useAdminPage();

  return (
    <div>
      <Header />
      <div className="flex flex-col mt-10 items-center justify-center gap-10">
        <TableAllUsers users={data} isLoading={isLoading} onDelete={handleDelete} deletingId={deletingId} />
        <div className="min-w-[20%] border-2 border-zinc-100 shadow-[0_10px_15px_rgba(0,0,0,0.1)] rounded-2xl p-6">
          <div className="text-center space-y-3 mb-6">
            <Typography variant="h3" color="#006f36ff">
              {t("admin.register_title")}
            </Typography>
          </div>

          <form onSubmit={handleSubmit}>
            <Input
              id="name"
              type="text"
              label={t("admin.name_label")}
              placeholder={t("admin.name_placeholder")}
              value={name}
              onChange={(e) => setName(e.target.value)}
              required
            />

            <Input
              id="email"
              type="email"
              label={t("admin.email_label")}
              placeholder={t("admin.email_placeholder")}
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
            />

            {error && (
              <Typography variant="b2" color="#dc2626" className="text-center">
                {error}
              </Typography>
            )}

            <Button type="submit" isLoading={isSubmitting} className="mt-8">
              {t("admin.submit")}
            </Button>
          </form>
        </div>
      </div>
    </div>
  );
}