"use client";

import { useState, useEffect, useCallback } from "react";
import { ArrowLeft, Check, Loader2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Select } from "@/components/ui/select";
import { Card, CardContent } from "@/components/ui/card";
import { createEmployee, fetchDepartments, fetchManagerDropdown } from "@/lib/supabase/employees-actions";
import { EMPLOYMENT_TYPE_LABELS, PAY_FREQUENCY_LABELS, type Department } from "@/lib/supabase/employees-types";
import type { EmploymentType, PayFrequency } from "@/lib/supabase/employees-types";

interface FormErrors {
  [key: string]: string;
}

export default function EmployeesNewPage({ onBack }: { onBack?: () => void }) {
  const [step, setStep] = useState(1);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [departments, setDepartments] = useState<Department[]>([]);
  const [managers, setManagers] = useState<{ id: string; first_name: string; last_name: string }[]>([]);
  const [errors, setErrors] = useState<FormErrors>({});

  // Personal details
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [email, setEmail] = useState("");
  const [phone, setPhone] = useState("");
  const [address, setAddress] = useState("");

  // Employment details
  const [jobTitle, setJobTitle] = useState("");
  const [departmentId, setDepartmentId] = useState("");
  const [employmentType, setEmploymentType] = useState<EmploymentType>("full_time");
  const [startDate, setStartDate] = useState("");
  const [salary, setSalary] = useState("");
  const [hourlyRate, setHourlyRate] = useState("");
  const [payFrequency, setPayFrequency] = useState<PayFrequency>("monthly");
  const [managerId, setManagerId] = useState("");

  useEffect(() => {
    let cancelled = false;
    Promise.all([fetchDepartments(), fetchManagerDropdown()])
      .then(([depts, mgrs]) => {
        if (!cancelled) {
          setDepartments(depts);
          setManagers(mgrs);
        }
      })
      .catch(() => {});
    return () => { cancelled = true; };
  }, []);

  const validateStep1 = useCallback((): boolean => {
    const e: FormErrors = {};
    if (!firstName.trim()) e.firstName = "First name is required";
    if (!lastName.trim()) e.lastName = "Last name is required";
    if (!email.trim()) e.email = "Email is required";
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) e.email = "Invalid email";
    setErrors(e);
    return Object.keys(e).length === 0;
  }, [firstName, lastName, email]);

  const validateStep2 = useCallback((): boolean => {
    const e: FormErrors = {};
    if (!jobTitle.trim()) e.jobTitle = "Job title is required";
    if (!startDate) e.startDate = "Start date is required";
    if ((employmentType === "full_time" || employmentType === "part_time") && !salary) {
      e.salary = "Salary is required";
    }
    if ((employmentType === "casual" || employmentType === "contractor") && !hourlyRate) {
      e.hourlyRate = "Hourly rate is required";
    }
    setErrors(e);
    return Object.keys(e).length === 0;
  }, [jobTitle, startDate, employmentType, salary, hourlyRate]);

  const handleNext = () => {
    if (validateStep1()) setStep(2);
  };

  const handleSubmit = async () => {
    if (!validateStep2()) return;
    setError(null);
    setSaving(true);

    try {
      const result = await createEmployee({
        first_name: firstName.trim(),
        last_name: lastName.trim(),
        email: email.trim(),
        phone: phone.trim() || undefined,
        date_of_birth: undefined,
        address: address.trim() || undefined,
        job_title: jobTitle.trim() || undefined,
        department_id: departmentId || undefined,
        employment_type: employmentType,
        start_date: startDate || undefined,
        salary: salary ? parseFloat(salary) : undefined,
        hourly_rate: hourlyRate ? parseFloat(hourlyRate) : undefined,
        pay_frequency: payFrequency,
        manager_id: managerId || undefined,
      });

      if (!result.success) {
        setError(result.error || "Failed to create employee");
        return;
      }

      // Reset form
      setFirstName(""); setLastName(""); setEmail("");
      setPhone(""); setAddress("");
      setJobTitle(""); setDepartmentId("");
      setEmploymentType("full_time"); setStartDate("");
      setSalary(""); setHourlyRate("");
      setPayFrequency("monthly"); setManagerId("");
      setStep(1);

      if (onBack) onBack();
    } catch (e: any) {
      setError(e.message || "An unexpected error occurred");
    } finally {
      setSaving(false);
    }
  };

  return (
    <div className="p-6 lg:p-8 space-y-6">
      {/* Header */}
      <div className="flex items-center gap-4">
        {onBack && (
          <button onClick={onBack} className="p-2 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer">
            <ArrowLeft className="w-5 h-5 text-gray-500" />
          </button>
        )}
        <div>
          <h1 className="text-3xl font-serif font-bold text-gray-900">Add Employee</h1>
          <p className="text-gray-500 mt-1">Step {step} of 2</p>
        </div>
      </div>

      {/* Step Indicator */}
      <div className="flex items-center gap-4">
        {[1, 2].map((s) => (
          <div key={s} className="flex items-center gap-3 flex-1">
            <div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold ${
              s < step ? "bg-[#1D9E75] text-white" :
              s === step ? "bg-[#1D9E75] text-white" :
              "bg-gray-200 text-gray-500"
            }`}>
              {s < step ? <Check className="w-4 h-4" /> : s}
            </div>
            <div className={`text-sm font-medium ${s === step ? "text-gray-900" : "text-gray-400"}`}>
              {s === 1 ? "Personal details" : "Employment details"}
            </div>
            {s < 2 && <div className="flex-1 h-px bg-gray-200" />}
          </div>
        ))}
      </div>

      {error && (
        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">{error}</div>
      )}

      <Card className="border-0 shadow-sm">
        <CardContent className="p-6">
          {step === 1 && (
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <div>
                <Label htmlFor="firstName">First Name *</Label>
                <Input id="firstName" value={firstName} onChange={(e) => setFirstName(e.target.value)} className="mt-1" placeholder="John" />
                {errors.firstName && <p className="text-xs text-red-500 mt-1">{errors.firstName}</p>}
              </div>
              <div>
                <Label htmlFor="lastName">Last Name *</Label>
                <Input id="lastName" value={lastName} onChange={(e) => setLastName(e.target.value)} className="mt-1" placeholder="Doe" />
                {errors.lastName && <p className="text-xs text-red-500 mt-1">{errors.lastName}</p>}
              </div>
              <div>
                <Label htmlFor="email">Email *</Label>
                <Input id="email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} className="mt-1" placeholder="john@company.com" />
                {errors.email && <p className="text-xs text-red-500 mt-1">{errors.email}</p>}
              </div>
              <div>
                <Label htmlFor="phone">Phone</Label>
                <Input id="phone" value={phone} onChange={(e) => setPhone(e.target.value)} className="mt-1" placeholder="+61 400 000 000" />
              </div>
              <div className="sm:col-span-2">
                <Label htmlFor="address">Address</Label>
                <Input id="address" value={address} onChange={(e) => setAddress(e.target.value)} className="mt-1" placeholder="123 Main St, Sydney NSW 2000" />
              </div>
            </div>
          )}

          {step === 2 && (
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <div>
                <Label htmlFor="jobTitle">Job Title *</Label>
                <Input id="jobTitle" value={jobTitle} onChange={(e) => setJobTitle(e.target.value)} className="mt-1" placeholder="Software Engineer" />
                {errors.jobTitle && <p className="text-xs text-red-500 mt-1">{errors.jobTitle}</p>}
              </div>
              <div>
                <Label htmlFor="department">Department</Label>
                <Select id="department" value={departmentId} onChange={(e) => setDepartmentId(e.target.value)} className="mt-1">
                  <option value="">Select department</option>
                  {departments.map((d) => <option key={d.id} value={d.id}>{d.name}</option>)}
                </Select>
              </div>
              <div>
                <Label htmlFor="employmentType">Employment Type</Label>
                <Select id="employmentType" value={employmentType} onChange={(e) => setEmploymentType(e.target.value as EmploymentType)} className="mt-1">
                  {Object.entries(EMPLOYMENT_TYPE_LABELS).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
                </Select>
              </div>
              <div>
                <Label htmlFor="startDate">Start Date *</Label>
                <Input id="startDate" type="date" value={startDate} onChange={(e) => setStartDate(e.target.value)} className="mt-1" />
                {errors.startDate && <p className="text-xs text-red-500 mt-1">{errors.startDate}</p>}
              </div>

              {(employmentType === "full_time" || employmentType === "part_time") && (
                <div>
                  <Label htmlFor="salary">Annual Salary *</Label>
                  <Input id="salary" type="number" min="0" value={salary} onChange={(e) => setSalary(e.target.value)} className="mt-1" placeholder="85000" />
                  {errors.salary && <p className="text-xs text-red-500 mt-1">{errors.salary}</p>}
                </div>
              )}

              {(employmentType === "casual" || employmentType === "contractor") && (
                <div>
                  <Label htmlFor="hourlyRate">Hourly Rate *</Label>
                  <Input id="hourlyRate" type="number" min="0" step="0.01" value={hourlyRate} onChange={(e) => setHourlyRate(e.target.value)} className="mt-1" placeholder="35.00" />
                  {errors.hourlyRate && <p className="text-xs text-red-500 mt-1">{errors.hourlyRate}</p>}
                </div>
              )}

              <div>
                <Label htmlFor="payFrequency">Pay Frequency</Label>
                <Select id="payFrequency" value={payFrequency} onChange={(e) => setPayFrequency(e.target.value as PayFrequency)} className="mt-1">
                  {Object.entries(PAY_FREQUENCY_LABELS).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
                </Select>
              </div>

              {managers.length > 0 && (
                <div>
                  <Label htmlFor="manager">Manager</Label>
                  <Select id="manager" value={managerId} onChange={(e) => setManagerId(e.target.value)} className="mt-1">
                    <option value="">No manager</option>
                    {managers.map((m) => <option key={m.id} value={m.id}>{m.first_name} {m.last_name}</option>)}
                  </Select>
                </div>
              )}
            </div>
          )}

          {/* Actions */}
          <div className="flex justify-between mt-8 pt-6 border-t border-gray-100">
            {step === 2 && (
              <Button variant="outline" onClick={() => setStep(1)} className="cursor-pointer">
                Back
              </Button>
            )}
            <div className="ml-auto flex gap-3">
              {step === 1 ? (
                <Button onClick={handleNext} className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white cursor-pointer">
                  Next
                </Button>
              ) : (
                <Button onClick={handleSubmit} disabled={saving} className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-2 cursor-pointer">
                  {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : null}
                  {saving ? "Saving..." : "Add Employee"}
                </Button>
              )}
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}