"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  ArrowLeft,
  ArrowRight,
  CheckCircle2,
  Users,
  Mail,
  Building2,
} from "lucide-react";
import { useInviteEmployee } from "../hooks/employee.hook";
import { useGetDepartments } from "@/modules/admin/departments/hooks/department.hook";
import { EmployeeRole } from "../types/employee.type";
import { capitalizeFirstLetter } from "@/lib/capitalize";

const ROLES: { value: EmployeeRole; label: string }[] = [
  { value: "EMPLOYEE", label: "Employee" },
  { value: "MANAGER", label: "Manager" },
];

const GENDERS = [
  { value: "MALE", label: "Male" },
  { value: "FEMALE", label: "Female" },
  { value: "OTHER", label: "Other" },
];

const FieldError = ({ msg }: { msg?: string }) =>
  msg ? <p className="mt-1 text-xs text-destructive">{msg}</p> : null;

export function CreateEmployeePage() {
  const router = useRouter();
  const [step, setStep] = useState<1 | 2>(1);

  // Step 1 fields
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [phone, setPhone] = useState("");
  const [gender, setGender] = useState("");
  const [errors, setErrors] = useState<Record<string, string>>({});

  // Step 2 fields
  const [role, setRole] = useState<EmployeeRole>("EMPLOYEE");
  const [departmentId, setDepartmentId] = useState("");

  const { mutate, isPending } = useInviteEmployee(() =>
    router.push("/admin/employees")
  );
  const { data: deptData } = useGetDepartments({ page: 1, limit: 100 });
  const departments = deptData?.data ?? [];

  const validateStep1 = () => {
    const e: Record<string, string> = {};
    if (!name.trim()) e.name = "Full name is required";
    if (!email.trim()) e.email = "Email is required";
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email))
      e.email = "Enter a valid email";
    if (phone && !/^\+?[0-9]{7,15}$/.test(phone.replace(/\s/g, "")))
      e.phone = "Enter a valid phone number";
    return e;
  };

  const handleNext = () => {
    const e = validateStep1();
    if (Object.keys(e).length) {
      setErrors(e);
      return;
    }
    setErrors({});
    setStep(2);
  };

  const handleSubmit = () => {
    mutate({
      name: capitalizeFirstLetter(name.trim()),
      email: email.trim(),
      role,
      ...(phone.trim() ? { phone: phone.trim() } : {}),
      ...(gender ? { gender } : {}),
      ...(departmentId ? { departmentId } : {}),
    });
  };

  const clearError = (key: string) =>
    setErrors((prev) => {
      const n = { ...prev };
      delete n[key];
      return n;
    });

  const initials = name
    .split(" ")
    .map((n) => n[0])
    .join("")
    .slice(0, 2)
    .toUpperCase();

  return (
    <div className="space-y-4">
      <button
        onClick={() => (step === 2 ? setStep(1) : router.back())}
        className="text-muted-foreground hover:text-foreground flex items-center gap-1 text-sm"
      >
        <ArrowLeft className="h-4 w-4" /> Back
      </button>

      <div>
        <h2 className="text-2xl font-bold tracking-tight">Add Employee</h2>
        <p className="text-muted-foreground text-sm mt-0.5">
          {step === 1
            ? "Step 1 of 2 — Personal Information"
            : "Step 2 of 2 — Role & Department"}
        </p>
      </div>

      {/* Step Indicator */}
      <div className="flex items-center">
        <div className="flex items-center gap-2">
          <div
            className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold shrink-0 transition-colors ${
              step === 1
                ? "bg-primary text-primary-foreground"
                : "bg-green-500 text-white"
            }`}
          >
            {step > 1 ? <CheckCircle2 className="w-4 h-4" /> : "1"}
          </div>
          <span
            className={`text-sm font-medium whitespace-nowrap ${
              step === 1 ? "text-foreground" : "text-muted-foreground"
            }`}
          >
            Personal Information
          </span>
        </div>
        <div
          className={`flex-1 h-px mx-3 transition-colors ${
            step > 1 ? "bg-green-500" : "bg-border"
          }`}
        />
        <div className="flex items-center gap-2">
          <div
            className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold shrink-0 transition-colors ${
              step === 2
                ? "bg-primary text-primary-foreground"
                : "bg-muted text-muted-foreground"
            }`}
          >
            2
          </div>
          <span
            className={`text-sm font-medium whitespace-nowrap ${
              step === 2 ? "text-foreground" : "text-muted-foreground"
            }`}
          >
            Role & Department
          </span>
        </div>
      </div>

      {step === 1 && (
        <div className="flex flex-col md:flex-row gap-5 items-start w-full">
          {/* LEFT */}
          <div className="flex flex-col gap-4">
            <Card>
              <CardContent className="p-6 flex flex-col items-center gap-3">
                <div className="w-20 h-20 rounded-xl bg-muted flex items-center justify-center">
                  {initials ? (
                    <span className="text-2xl font-bold text-primary">
                      {initials}
                    </span>
                  ) : (
                    <Users className="h-8 w-8 text-muted-foreground" />
                  )}
                </div>
                <div className="text-center">
                  <p className="text-sm font-semibold">
                    {name || "New Employee"}
                  </p>
                  <p className="text-xs text-muted-foreground">
                    {email || "email@example.com"}
                  </p>
                </div>
              </CardContent>
            </Card>
            <Card>
              <CardContent className="p-4 flex gap-3">
                <Mail className="h-4 w-4 text-muted-foreground mt-0.5 shrink-0" />
                <p className="text-xs text-muted-foreground leading-relaxed">
                  An invitation email will be sent. They can set their password
                  via the link.
                </p>
              </CardContent>
            </Card>
          </div>

          {/* RIGHT */}
          <Card className="w-full">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Users className="h-4 w-4 text-primary" /> Personal Information
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div className="space-y-1.5">
                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                    Full Name <span className="text-destructive">*</span>
                  </Label>
                  <Input
                    placeholder="e.g. Rahul Sharma"
                    value={name}
                    onChange={(e) => {
                      setName(e.target.value);
                      clearError("name");
                    }}
                    className={errors.name ? "border-destructive" : ""}
                  />
                  <FieldError msg={errors.name} />
                </div>

                <div className="space-y-1.5">
                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                    Email Address <span className="text-destructive">*</span>
                  </Label>
                  <Input
                    type="email"
                    placeholder="e.g. rahul@example.com"
                    value={email}
                    onChange={(e) => {
                      setEmail(e.target.value);
                      clearError("email");
                    }}
                    className={errors.email ? "border-destructive" : ""}
                  />
                  <FieldError msg={errors.email} />
                </div>

                <div className="space-y-1.5">
                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                    Phone Number
                  </Label>
                  <Input
                    type="tel"
                    placeholder="e.g. +91 9876543210"
                    value={phone}
                    onChange={(e) => {
                      setPhone(e.target.value);
                      clearError("phone");
                    }}
                    className={errors.phone ? "border-destructive" : ""}
                  />
                  <FieldError msg={errors.phone} />
                </div>

                <div className="space-y-1.5">
                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                    Gender
                  </Label>
                  <Select value={gender} onValueChange={setGender}>
                    <SelectTrigger className="h-9 text-sm w-full">
                      <SelectValue placeholder="Select gender" />
                    </SelectTrigger>
                    <SelectContent>
                      {GENDERS.map((g) => (
                        <SelectItem key={g.value} value={g.value}>
                          {g.label}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>

              <div className="flex items-center justify-end gap-3 mt-8 pt-4 border-t border-border">
                <Button
                  variant="ghost"
                  className="border border-border hover:bg-muted hover:text-foreground"
                  onClick={() => router.back()}
                >
                  Cancel
                </Button>
                <Button type="button" onClick={handleNext}>
                  Next <ArrowRight className="h-4 w-4 ml-1.5" />
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>
      )}

      {step === 2 && (
        <div className="flex flex-col md:flex-row gap-5 items-start w-full">
          {/* LEFT */}
          <div className="flex flex-col gap-4">
            <Card>
              <CardContent className="p-6 flex flex-col items-center gap-3">
                <div className="w-20 h-20 rounded-xl bg-muted flex items-center justify-center">
                  <span className="text-2xl font-bold text-primary">
                    {initials || (
                      <Users className="h-8 w-8 text-muted-foreground" />
                    )}
                  </span>
                </div>
                <div className="text-center">
                  <p className="text-sm font-semibold">{name}</p>
                  <p className="text-xs text-muted-foreground">{email}</p>
                  {phone && (
                    <p className="text-xs text-muted-foreground">{phone}</p>
                  )}
                </div>
              </CardContent>
            </Card>
            <Card>
              <CardContent className="p-4 flex gap-3">
                <Mail className="h-4 w-4 text-muted-foreground mt-0.5 shrink-0" />
                <p className="text-xs text-muted-foreground leading-relaxed">
                  Assign a role and department. The employee will receive an
                  invitation email.
                </p>
              </CardContent>
            </Card>
          </div>

          {/* RIGHT */}
          <Card className="w-full">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Building2 className="h-4 w-4 text-primary" /> Role & Department
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div className="space-y-1.5">
                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                    Role <span className="text-destructive">*</span>
                  </Label>
                  <Select
                    value={role}
                    onValueChange={(v) => setRole(v as EmployeeRole)}
                  >
                    <SelectTrigger className="h-9 text-sm w-full">
                      <SelectValue placeholder="Select role" />
                    </SelectTrigger>
                    <SelectContent>
                      {ROLES.map((r) => (
                        <SelectItem key={r.value} value={r.value}>
                          {r.label}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>

                <div className="space-y-1.5">
                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                    Department
                  </Label>
                  <Select value={departmentId} onValueChange={setDepartmentId}>
                    <SelectTrigger className="h-9 text-sm w-full">
                      <SelectValue placeholder="Select department" />
                    </SelectTrigger>
                    <SelectContent>
                      {departments.map((d) => (
                        <SelectItem key={d.id} value={d.id}>
                          {d.name}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>

              <div className="flex items-center justify-end gap-3 mt-8 pt-4 border-t border-border">
                <Button
                  variant="ghost"
                  className="border border-border hover:bg-muted hover:text-foreground"
                  onClick={() => router.back()}
                >
                  Cancel
                </Button>
                <Button
                  type="button"
                  onClick={handleSubmit}
                  disabled={isPending}
                >
                  {isPending && (
                    <div className="w-4 h-4 border-2 border-primary-foreground border-t-transparent rounded-full animate-spin mr-2" />
                  )}
                  Create Team Member
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>
      )}
    </div>
  );
}