import { useState } from "react";
import { Button } from "@/shared/common/ui/button";
import { Input } from "@/shared/common/ui/input";
import { Label } from "@/shared/common/ui/label";
import { useToast } from "@/shared/common/ui/use-toast";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/shared/common/ui/select";
import i18n from "@/i18n";
import { t } from "i18next";

interface AddUserFormProps {
  unitId: string;
  onSuccess: () => void;
  onCancel: () => void;
}

export function AddUserForm({ unitId, onSuccess, onCancel }: AddUserFormProps) {
  const [formData, setFormData] = useState({
    firstName: "",
    lastName: "",
    email: "",
    role: "member",
  });
  const [isSubmitting, setIsSubmitting] = useState(false);
  const { toast } = useToast();
  const lang = i18n.language;
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setFormData((prev) => ({ ...prev, [name]: value }));
  };

  const handleRoleChange = (value: string) => {
    setFormData((prev) => ({ ...prev, role: value }));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    if (
      !formData.firstName.trim() ||
      !formData.lastName.trim() ||
      !formData.email.trim()
    ) {
      toast({
        title: "Error",
        description: "All fields are required",
        variant: "destructive",
      });
      return;
    }

    setIsSubmitting(true);

    try {
      // In a real application, this would be an API call
      // For now, simulate API call with a timeout
      await new Promise((resolve) => setTimeout(resolve, 500));

      toast({
        title: t("contentManagement.success"),
        description: `${t("contentManagement.user")} ${formData.firstName} ${
          formData.lastName
        }${t("contentManagement.msg")}`,
      });

      onSuccess();
    } catch (error) {
      toast({
        title: "Error",
        description: "Failed to add user. Please try again.",
        variant: "destructive",
      });
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div className="grid grid-cols-2 gap-4">
        <div className="space-y-2">
          <Label htmlFor="firstName">{t("contentManagement.firstName")}</Label>
          <Input
            id="firstName"
            name="firstName"
            placeholder={t("contentManagement.firstName")}
            value={formData.firstName}
            onChange={handleChange}
            required
          />
        </div>
        <div className="space-y-2">
          <Label htmlFor="lastName">{t("contentManagement.lastName")}</Label>
          <Input
            id="lastName"
            name="lastName"
            placeholder={t("contentManagement.lastName")}
            value={formData.lastName}
            onChange={handleChange}
            required
          />
        </div>
      </div>

      <div className="space-y-2">
        <Label htmlFor="email">{t("organization.email")}</Label>
        <Input
          id="email"
          name="email"
          type="email"
          placeholder={t("organization.email")}
          value={formData.email}
          onChange={handleChange}
          required
        />
      </div>

      <div className="space-y-2">
        <Label htmlFor="role">Role</Label>
        <Select value={formData.role} onValueChange={handleRoleChange}>
          <SelectTrigger>
            <SelectValue placeholder="Select a role" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="Director">Director</SelectItem>
            <SelectItem value="Teamleader">Teamleader</SelectItem>
            <SelectItem value="deputy">deputy</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <div className="flex justify-end gap-2">
        <Button
          type="button"
          variant="outline"
          onClick={onCancel}
          disabled={isSubmitting}
        >
          {t("common.Cancel")}
        </Button>
        <Button type="submit" disabled={isSubmitting}>
          {isSubmitting ? t("organization.adding") : t("organization.addUser")}
        </Button>
      </div>
    </form>
  );
}
