"use client";

import { useState, useEffect, useCallback, useRef } from "react";
import { ArrowLeft, Edit2, Save, X, User, Trash2, AlertTriangle, Shield, Plus, Check, X as XIcon, Briefcase, FileText, Upload, Loader2, Send } 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 { Badge } from "@/components/ui/badge";
import { fetchEmployeeDetail, fetchDepartments, fetchManagerDropdown, updateEmployee, transferOwnership } from "@/lib/supabase/employees-actions";
import { fetchCustomRoles, assignRoleToEmployee, removeRoleFromEmployee, removeEmployee, fetchResignations, reviewResignation, canAccessPage, getUserPermissions } from "@/lib/supabase/rbac-actions";
import { fetchContractsForEmployee, createContract, sendContractForSignature, uploadContractFile, deleteContract } from "@/lib/supabase/contract-actions";
import { EMPLOYEE_STATUS_LABELS, EMPLOYMENT_TYPE_LABELS, PAY_FREQUENCY_LABELS, getInitials, type EmployeeWithRelations, type EmployeeStatus, type EmploymentType, type PayFrequency } from "@/lib/supabase/employees-types";
import PageSkeleton from "./PageSkeleton";

const AVATAR_COLORS = ["bg-teal-500", "bg-blue-500", "bg-purple-500", "bg-orange-500", "bg-pink-500"];
const STATUS_COLORS: Record<EmployeeStatus, string> = {
  active: "bg-emerald-100 text-emerald-700 border-emerald-200",
  on_leave: "bg-amber-100 text-amber-700 border-amber-200",
  terminated: "bg-red-100 text-red-700 border-red-200",
};

const CONTRACT_STATUS_LABELS: Record<string, string> = {
  draft: "Draft",
  sent: "Sent",
  signed: "Signed",
  declined: "Declined",
};

const CONTRACT_STATUS_COLORS: Record<string, string> = {
  draft: "bg-gray-100 text-gray-600 border-gray-200",
  sent: "bg-blue-100 text-blue-700 border-blue-200",
  signed: "bg-emerald-100 text-emerald-700 border-emerald-200",
  declined: "bg-red-100 text-red-700 border-red-200",
};

function ComingSoon({ tab }: { tab: string }) {
  return (
    <div className="flex flex-col items-center justify-center py-24 text-center">
      <div className="w-16 h-16 bg-gray-100 rounded-2xl flex items-center justify-center mb-4">
        <User className="w-8 h-8 text-gray-300" />
      </div>
      <h3 className="text-lg font-semibold text-gray-900">{tab}</h3>
      <p className="text-gray-500 mt-2 text-sm">Coming soon</p>
    </div>
  );
}

export default function EmployeesDetailPage({
  employeeId,
  onBack,
}: {
  employeeId: string;
  onBack: () => void;
}) {
  const [employee, setEmployee] = useState<EmployeeWithRelations | null>(null);
  const [loading, setLoading] = useState(true);
  const [activeTab, setActiveTab] = useState("overview");
  const [editing, setEditing] = useState(false);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [departments, setDepartments] = useState<any[]>([]);
  const [managers, setManagers] = useState<any[]>([]);
  const [canManage, setCanManage] = useState(false);
  const [currentOrgRole, setCurrentOrgRole] = useState<string>("employee");

  // Role management
  const [customRoles, setCustomRoles] = useState<any[]>([]);
  const [employeeRoles, setEmployeeRoles] = useState<any[]>([]);
  const [showRolePicker, setShowRolePicker] = useState(false);

  // Ownership transfer
  const [showTransferConfirm, setShowTransferConfirm] = useState(false);
  const [transferring, setTransferring] = useState(false);

  // Remove employee
  const [showRemoveConfirm, setShowRemoveConfirm] = useState(false);
  const [removing, setRemoving] = useState(false);

  // Contracts
  const [contracts, setContracts] = useState<any[]>([]);
  const [loadingContracts, setLoadingContracts] = useState(false);
  const [showCreateContract, setShowCreateContract] = useState(false);
  const [contractTitle, setContractTitle] = useState("");
  const [contractFile, setContractFile] = useState<File | null>(null);
  const [creatingContract, setCreatingContract] = useState(false);
  const [sendingContract, setSendingContract] = useState<string | null>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);

  // Edit form state
  const [editFirstName, setEditFirstName] = useState("");
  const [editLastName, setEditLastName] = useState("");
  const [editEmail, setEditEmail] = useState("");
  const [editPhone, setEditPhone] = useState("");
  const [editJobTitle, setEditJobTitle] = useState("");
  const [editDepartmentId, setEditDepartmentId] = useState("");
  const [editStatus, setEditStatus] = useState<EmployeeStatus>("active");
  const [editEmploymentType, setEditEmploymentType] = useState<EmploymentType>("full_time");
  const [editPayFrequency, setEditPayFrequency] = useState<PayFrequency>("monthly");
  const [editSalary, setEditSalary] = useState("");
  const [editHourlyRate, setEditHourlyRate] = useState("");
  const [editManagerId, setEditManagerId] = useState("");

  useEffect(() => {
    let cancelled = false;
    Promise.all([
      fetchEmployeeDetail(employeeId),
      fetchDepartments(),
      fetchManagerDropdown(),
      fetchCustomRoles().catch(() => []),
      canAccessPage("employees").catch(() => false),
      getUserPermissions().catch(() => ({ orgRole: "employee" })),
    ])
      .then(([emp, depts, mgrs, roles, canM, perms]) => {
        if (!cancelled) {
          setEmployee(emp);
          setDepartments(depts);
          setManagers(mgrs);
          setCustomRoles(roles);
          setCanManage(canM);
          setCurrentOrgRole(perms.orgRole);
          if (emp) {
            setEditFirstName(emp.first_name);
            setEditLastName(emp.last_name);
            setEditEmail(emp.email);
            setEditPhone(emp.phone || "");
            setEditJobTitle(emp.job_title || "");
            setEditDepartmentId(emp.department_id || "");
            setEditStatus(emp.status);
            setEditEmploymentType(emp.employment_type);
            setEditPayFrequency(emp.pay_frequency);
            setEditSalary(emp.salary ? String(emp.salary) : "");
            setEditHourlyRate(emp.hourly_rate ? String(emp.hourly_rate) : "");
            setEditManagerId(emp.manager_id || "");
            setEmployeeRoles(emp.employee_roles || []);
          }
        }
      })
      .catch(() => {})
      .finally(() => { if (!cancelled) setLoading(false); });
    return () => { cancelled = true; };
  }, [employeeId]);

  // Load contracts when documents tab is active
  useEffect(() => {
    if (activeTab !== "documents" || !employee) return;
    let cancelled = false;
    setLoadingContracts(true);
    fetchContractsForEmployee(employee.id)
      .then((data) => { if (!cancelled) setContracts(data); })
      .catch(() => {})
      .finally(() => { if (!cancelled) setLoadingContracts(false); });
    return () => { cancelled = true; };
  }, [activeTab, employee]);

  const handleSave = useCallback(async () => {
    if (!employee) return;
    setSaving(true);
    setError(null);
    try {
      const result = await updateEmployee(employee.id, {
        first_name: editFirstName,
        last_name: editLastName,
        email: editEmail,
        phone: editPhone || undefined,
        job_title: editJobTitle || undefined,
        department_id: editDepartmentId || undefined,
        status: editStatus,
        employment_type: editEmploymentType,
        pay_frequency: editPayFrequency,
        salary: editSalary ? parseFloat(editSalary) : undefined,
        hourly_rate: editHourlyRate ? parseFloat(editHourlyRate) : undefined,
        manager_id: editManagerId || undefined,
      });
      if (!result.success) { setError(result.error || "Failed to update"); return; }
      setEditing(false);
      const updated = await fetchEmployeeDetail(employeeId);
      setEmployee(updated);
    } catch (e: any) {
      setError(e.message || "An unexpected error occurred");
    } finally {
      setSaving(false);
    }
  }, [employee, editFirstName, editLastName, editEmail, editPhone, editJobTitle, editDepartmentId, editStatus, editEmploymentType, editPayFrequency, editSalary, editHourlyRate, editManagerId, employeeId]);

  const handleCancel = useCallback(() => {
    if (!employee) return;
    setEditFirstName(employee.first_name);
    setEditLastName(employee.last_name);
    setEditEmail(employee.email);
    setEditPhone(employee.phone || "");
    setEditJobTitle(employee.job_title || "");
    setEditDepartmentId(employee.department_id || "");
    setEditStatus(employee.status);
    setEditEmploymentType(employee.employment_type);
    setEditPayFrequency(employee.pay_frequency);
    setEditSalary(employee.salary ? String(employee.salary) : "");
    setEditHourlyRate(employee.hourly_rate ? String(employee.hourly_rate) : "");
    setEditManagerId(employee.manager_id || "");
    setEditing(false);
    setError(null);
  }, [employee]);

  const handleAssignRole = async (roleId: string) => {
    if (!employee) return;
    const result = await assignRoleToEmployee(employee.id, roleId);
    if (result.success) {
      const roles = await fetchCustomRoles();
      setCustomRoles(roles);
      const emp = await fetchEmployeeDetail(employeeId);
      if (emp) {
        setEmployee(emp);
        setEmployeeRoles(emp.employee_roles || []);
      }
    }
    setShowRolePicker(false);
  };

  const handleRemoveRole = async (roleId: string) => {
    if (!employee) return;
    const result = await removeRoleFromEmployee(employee.id, roleId);
    if (result.success) {
      const emp = await fetchEmployeeDetail(employeeId);
      if (emp) {
        setEmployee(emp);
        setEmployeeRoles(emp.employee_roles || []);
      }
    }
  };

  const handleTransferOwnership = async () => {
    if (!employee || !employee.user_id) return;
    setTransferring(true);
    try {
      const result = await transferOwnership(employee.user_id);
      if (result.success) {
        alert("Ownership transferred successfully. You are now an Admin.");
        onBack();
      } else {
        setError(result.error || "Failed to transfer ownership");
      }
    } catch (e: any) {
      setError(e.message);
    } finally {
      setTransferring(false);
      setShowTransferConfirm(false);
    }
  };

  const handleRemoveEmployee = async () => {
    if (!employee) return;
    setRemoving(true);
    try {
      const result = await removeEmployee(employee.id);
      if (!result.success) { setError(result.error || "Failed to remove"); return; }
      onBack();
    } catch (e: any) {
      setError(e.message || "An unexpected error occurred");
    } finally {
      setRemoving(false);
      setShowRemoveConfirm(false);
    }
  };

  const handleCreateContract = async () => {
    if (!employee || !contractTitle.trim()) return;
    setCreatingContract(true);
    setError(null);
    try {
      let templateUrl: string | undefined;
      if (contractFile) {
        const uploadResult = await uploadContractFile(contractFile);
        if (!uploadResult.success) { setError(uploadResult.error || "Failed to upload file"); return; }
        templateUrl = uploadResult.url;
      }
      const result = await createContract({ employee_id: employee.id, title: contractTitle.trim(), template_url: templateUrl });
      if (!result.success) { setError(result.error || "Failed to create contract"); return; }
      // Send for signature
      if (result.id) {
        await sendContractForSignature(result.id);
      }
      setContractTitle("");
      setContractFile(null);
      setShowCreateContract(false);
      const data = await fetchContractsForEmployee(employee.id);
      setContracts(data);
    } catch (e: any) {
      setError(e.message || "An unexpected error occurred");
    } finally {
      setCreatingContract(false);
    }
  };

  const handleSendContract = async (id: string) => {
    setSendingContract(id);
    try {
      const result = await sendContractForSignature(id);
      if (!result.success) { setError(result.error || "Failed to send"); return; }
      if (employee) {
        const data = await fetchContractsForEmployee(employee.id);
        setContracts(data);
      }
    } catch (e: any) {
      setError(e.message || "An unexpected error occurred");
    } finally {
      setSendingContract(null);
    }
  };

  const handleDeleteContract = async (id: string) => {
    const result = await deleteContract(id);
    if (!result.success) { setError(result.error || "Failed to delete"); return; }
    if (employee) {
      const data = await fetchContractsForEmployee(employee.id);
      setContracts(data);
    }
  };

  if (loading) return <PageSkeleton name="Employee" />;
  if (!employee) return <div className="p-6 lg:p-8">Employee not found</div>;

  const displayPay = employee.salary
    ? `$${Number(employee.salary).toLocaleString()}/yr`
    : employee.hourly_rate
      ? `$${Number(employee.hourly_rate)}/hr`
      : "—";

  const TABS = [
    { key: "overview", label: "Overview" },
    { key: "leave", label: "Leave" },
    { key: "payroll", label: "Payroll" },
    { key: "documents", label: "Documents" },
    { key: "performance", label: "Performance" },
  ];

  const empRole = (employee as any).role || 'employee';

  return (
    <div className="p-6 lg:p-8 space-y-6">
      {/* Header */}
      <div className="flex items-center gap-4">
        <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 className="flex items-center gap-3 flex-1">
          <div className={`w-10 h-10 rounded-full ${AVATAR_COLORS[0]} flex items-center justify-center text-white text-sm font-semibold`}>
            {getInitials(employee.first_name, employee.last_name)}
          </div>
          <div>
            <h1 className="text-xl font-bold text-gray-900">{employee.first_name} {employee.last_name}</h1>
            <p className="text-sm text-gray-500">{employee.job_title || "No title"}{employee.department?.name ? ` · ${employee.department.name}` : ""}</p>
          </div>
          <StatusBadge status={employee.status} />
          {(employee as any).resignation_status === "submitted" && (
            <Badge variant="outline" className="bg-amber-50 text-amber-700 border-amber-200 text-xs">Resignation pending</Badge>
          )}
          {(employee as any).resignation_status === "accepted" && (
            <Badge variant="outline" className="bg-red-50 text-red-700 border-red-200 text-xs">Resignation accepted</Badge>
          )}
        </div>
        <div className="flex items-center gap-2">
          {/* Remove button (admin only) */}
          {canManage && empRole !== 'owner' && (
            <Button variant="outline" onClick={() => setShowRemoveConfirm(true)} className="gap-1 cursor-pointer text-xs text-red-600 border-red-200 hover:bg-red-50">
              <Trash2 className="w-3.5 h-3.5" />
              Remove
            </Button>
          )}
          {!editing ? (
            <Button variant="outline" onClick={() => setEditing(true)} className="gap-1 cursor-pointer text-xs">
              <Edit2 className="w-3.5 h-3.5" />
              Edit
            </Button>
          ) : (
            <div className="flex gap-1">
              <Button onClick={handleSave} disabled={saving} className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-1 cursor-pointer text-xs">
                {saving ? <span className="w-3.5 h-3.5 border-2 border-white border-t-transparent rounded-full animate-spin" /> : <Save className="w-3.5 h-3.5" />}
                Save
              </Button>
              <Button variant="outline" onClick={handleCancel} className="gap-1 cursor-pointer text-xs">
                <X className="w-3.5 h-3.5" /> Cancel
              </Button>
            </div>
          )}
        </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>
      )}

      {/* Tabs */}
      <div className="flex gap-1 bg-gray-100 rounded-lg p-1 w-fit">
        {TABS.map((tab) => (
          <button
            key={tab.key}
            onClick={() => setActiveTab(tab.key)}
            className={`px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 cursor-pointer ${
              tab.key === activeTab
                ? "bg-white text-gray-900 shadow-sm"
                : "text-gray-500 hover:text-gray-700"
            }`}
          >
            {tab.label}
          </button>
        ))}
      </div>

      {/* Tab Content */}
      {activeTab === "overview" && (
        <div className="space-y-6">
          {/* Personal Details */}
          <Card className="border-0 shadow-sm">
            <CardContent className="p-6">
              <h3 className="text-sm font-semibold text-gray-900 mb-4 flex items-center gap-2">
                <User className="w-4 h-4 text-gray-400" /> Personal Details
              </h3>
              {editing ? (
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  <div>
                    <Label htmlFor="editFirstName">First Name</Label>
                    <Input id="editFirstName" value={editFirstName} onChange={(e) => setEditFirstName(e.target.value)} className="mt-1" />
                  </div>
                  <div>
                    <Label htmlFor="editLastName">Last Name</Label>
                    <Input id="editLastName" value={editLastName} onChange={(e) => setEditLastName(e.target.value)} className="mt-1" />
                  </div>
                  <div>
                    <Label htmlFor="editEmail">Email</Label>
                    <Input id="editEmail" type="email" value={editEmail} onChange={(e) => setEditEmail(e.target.value)} className="mt-1" />
                  </div>
                  <div>
                    <Label htmlFor="editPhone">Phone</Label>
                    <Input id="editPhone" value={editPhone} onChange={(e) => setEditPhone(e.target.value)} className="mt-1" />
                  </div>
                </div>
              ) : (
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-3 text-sm">
                  <div className="flex justify-between py-1 border-b border-gray-50">
                    <span className="text-gray-500">First Name</span>
                    <span className="font-medium text-gray-900">{employee.first_name}</span>
                  </div>
                  <div className="flex justify-between py-1 border-b border-gray-50">
                    <span className="text-gray-500">Last Name</span>
                    <span className="font-medium text-gray-900">{employee.last_name}</span>
                  </div>
                  <div className="flex justify-between py-1 border-b border-gray-50">
                    <span className="text-gray-500">Email</span>
                    <span className="font-medium text-gray-900">{employee.email}</span>
                  </div>
                  <div className="flex justify-between py-1 border-b border-gray-50">
                    <span className="text-gray-500">Phone</span>
                    <span className="font-medium text-gray-900">{employee.phone || "—"}</span>
                  </div>
                </div>
              )}
            </CardContent>
          </Card>

          {/* Employment Details */}
          <Card className="border-0 shadow-sm">
            <CardContent className="p-6">
              <h3 className="text-sm font-semibold text-gray-900 mb-4 flex items-center gap-2">
                <Briefcase className="w-4 h-4 text-gray-400" /> Employment Details
              </h3>
              {editing ? (
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  <div>
                    <Label htmlFor="editJobTitle">Job Title</Label>
                    <Input id="editJobTitle" value={editJobTitle} onChange={(e) => setEditJobTitle(e.target.value)} className="mt-1" />
                  </div>
                  <div>
                    <Label htmlFor="editDepartment">Department</Label>
                    <Select id="editDepartment" value={editDepartmentId} onChange={(e) => setEditDepartmentId(e.target.value)} className="mt-1">
                      <option value="">No department</option>
                      {departments.map((d) => <option key={d.id} value={d.id}>{d.name}</option>)}
                    </Select>
                  </div>
                  <div>
                    <Label htmlFor="editStatus">Status</Label>
                    <Select id="editStatus" value={editStatus} onChange={(e) => setEditStatus(e.target.value as EmployeeStatus)} className="mt-1">
                      {Object.entries(EMPLOYEE_STATUS_LABELS).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
                    </Select>
                  </div>
                  <div>
                    <Label htmlFor="editEmpType">Employment Type</Label>
                    <Select id="editEmpType" value={editEmploymentType} onChange={(e) => setEditEmploymentType(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>
                  {(editEmploymentType === "full_time" || editEmploymentType === "part_time") && (
                    <div>
                      <Label htmlFor="editSalary">Annual Salary</Label>
                      <Input id="editSalary" value={editSalary} onChange={(e) => setEditSalary(e.target.value)} className="mt-1" placeholder="80000" />
                    </div>
                  )}
                  {(editEmploymentType === "casual" || editEmploymentType === "contractor") && (
                    <div>
                      <Label htmlFor="editHourlyRate">Hourly Rate</Label>
                      <Input id="editHourlyRate" value={editHourlyRate} onChange={(e) => setEditHourlyRate(e.target.value)} className="mt-1" placeholder="35" />
                    </div>
                  )}
                  <div>
                    <Label htmlFor="editPayFreq">Pay Frequency</Label>
                    <Select id="editPayFreq" value={editPayFrequency} onChange={(e) => setEditPayFrequency(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>
                  <div>
                    <Label htmlFor="editManager">Manager</Label>
                    <Select id="editManager" value={editManagerId} onChange={(e) => setEditManagerId(e.target.value)} className="mt-1">
                      <option value="">No manager</option>
                      {managers.filter(m => m.id !== employee.id).map((m) => <option key={m.id} value={m.id}>{m.first_name} {m.last_name}</option>)}
                    </Select>
                  </div>
                </div>
              ) : (
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-3 text-sm">
                  <div className="flex justify-between py-1 border-b border-gray-50">
                    <span className="text-gray-500">Job Title</span>
                    <span className="font-medium text-gray-900">{employee.job_title || "—"}</span>
                  </div>
                  <div className="flex justify-between py-1 border-b border-gray-50">
                    <span className="text-gray-500">Department</span>
                    <span className="font-medium text-gray-900">{employee.department?.name || "—"}</span>
                  </div>
                  <div className="flex justify-between py-1 border-b border-gray-50">
                    <span className="text-gray-500">Type</span>
                    <span className="font-medium text-gray-900">{EMPLOYMENT_TYPE_LABELS[employee.employment_type]}</span>
                  </div>
                  <div className="flex justify-between py-1 border-b border-gray-50">
                    <span className="text-gray-500">Pay</span>
                    <span className="font-medium text-gray-900">{displayPay}</span>
                  </div>
                  <div className="flex justify-between py-1 border-b border-gray-50">
                    <span className="text-gray-500">Frequency</span>
                    <span className="font-medium text-gray-900">{PAY_FREQUENCY_LABELS[employee.pay_frequency]}</span>
                  </div>
                  <div className="flex justify-between py-1 border-b border-gray-50">
                    <span className="text-gray-500">Manager</span>
                    <span className="font-medium text-gray-900">{employee.manager ? `${employee.manager.first_name} ${employee.manager.last_name}` : "—"}</span>
                  </div>
                </div>
              )}
            </CardContent>
          </Card>

          {/* Roles */}
          {canManage && (
            <Card className="border-0 shadow-sm">
              <CardContent className="p-6">
                <div className="flex items-center justify-between mb-4">
                  <h3 className="text-sm font-semibold text-gray-900 flex items-center gap-2">
                    <Shield className="w-4 h-4 text-gray-400" /> Roles & Permissions
                  </h3>
                  <div className="flex gap-2">
                    {currentOrgRole === "owner" && employee.user_id && empRole !== "owner" && (
                      <Button 
                        variant="outline" 
                        size="sm" 
                        onClick={() => setShowTransferConfirm(true)} 
                        className="gap-1 cursor-pointer text-xs text-amber-600 border-amber-200 hover:bg-amber-50"
                      >
                        <Shield className="w-3.5 h-3.5" /> Transfer Ownership
                      </Button>
                    )}
                    <Button variant="outline" size="sm" onClick={() => setShowRolePicker(!showRolePicker)} className="gap-1 cursor-pointer text-xs">
                      <Plus className="w-3.5 h-3.5" /> Assign Role
                    </Button>
                  </div>
                </div>

                {showRolePicker && (
                  <div className="mb-4 p-3 bg-gray-50 rounded-lg space-y-2">
                    <p className="text-xs font-medium text-gray-600">Select a role to assign:</p>
                    {customRoles.length === 0 ? (
                      <p className="text-xs text-gray-400">No custom roles created yet.</p>
                    ) : (
                      customRoles.map((role: any) => {
                        const isAssigned = employeeRoles.some((er: any) => er.role_id === role.id);
                        return (
                          <div key={role.id} className="flex items-center justify-between py-1.5">
                            <div>
                              <span className="text-sm font-medium text-gray-900">{role.name}</span>
                              <span className="text-[10px] text-gray-400 ml-2">Level {role.hierarchy_level}</span>
                            </div>
                            {isAssigned ? (
                              <span className="text-xs text-emerald-600 flex items-center gap-1"><Check className="w-3 h-3" /> Assigned</span>
                            ) : (
                              <button onClick={() => handleAssignRole(role.id)} className="text-xs text-teal-600 hover:underline font-medium cursor-pointer">Assign</button>
                            )}
                          </div>
                        );
                      })
                    )}
                  </div>
                )}

                {employeeRoles.length === 0 ? (
                  <p className="text-xs text-gray-400">No custom roles assigned.</p>
                ) : (
                  <div className="space-y-2">
                    {employeeRoles.map((er: any) => (
                      <div key={er.role_id} className="flex items-center justify-between py-2 px-3 bg-gray-50 rounded-lg">
                        <div>
                          <span className="text-sm font-medium text-gray-900">{er.role?.name || "Unknown"}</span>
                          <span className="text-[10px] text-gray-400 ml-2">Level {er.role?.hierarchy_level || "?"}</span>
                        </div>
                        <button onClick={() => handleRemoveRole(er.role_id)} className="p-1 text-gray-400 hover:text-red-500 rounded cursor-pointer">
                          <XIcon className="w-3.5 h-3.5" />
                        </button>
                      </div>
                    ))}
                  </div>
                )}
              </CardContent>
            </Card>
          )}

          {/* Resignation */}
          {((employee as any).resignation_status === "submitted" || (employee as any).resignation_status === "accepted") && (
            <Card className="border-0 shadow-sm border-l-4 border-l-amber-400">
              <CardContent className="p-6">
                <div className="flex items-center gap-2 mb-3">
                  <AlertTriangle className="w-4 h-4 text-amber-500" />
                  <h3 className="text-sm font-semibold text-gray-900">
                    Resignation {(employee as any).resignation_status === "submitted" ? "Submitted" : "Accepted"}
                  </h3>
                </div>
                <div className="text-sm space-y-1">
                  <p><span className="text-gray-500">Last Day:</span> <span className="font-medium">{(employee as any).resignation_date ? new Date((employee as any).resignation_date + "T00:00:00").toLocaleDateString("en-AU", { day: "numeric", month: "long", year: "numeric" }) : "—"}</span></p>
                  {(employee as any).resignation_reason && <p><span className="text-gray-500">Reason:</span> <span className="font-medium">{(employee as any).resignation_reason}</span></p>}
                </div>
              </CardContent>
            </Card>
          )}
        </div>
      )}

      {activeTab === "leave" && <ComingSoon tab="Leave" />}
      {activeTab === "payroll" && <ComingSoon tab="Payroll" />}

      {activeTab === "documents" && (
        <div className="space-y-4">
          <div className="flex items-center justify-between">
            <h3 className="text-sm font-semibold text-gray-900 flex items-center gap-2">
              <FileText className="w-4 h-4 text-gray-400" /> Contracts
            </h3>
            {canManage && (
              <Button
                onClick={() => setShowCreateContract(true)}
                className="gap-1 cursor-pointer text-xs bg-[#1D9E75] hover:bg-[#1a8b66] text-white"
              >
                <Plus className="w-3.5 h-3.5" /> Create contract
              </Button>
            )}
          </div>

          {loadingContracts ? (
            <div className="flex items-center justify-center py-12">
              <Loader2 className="w-5 h-5 text-gray-400 animate-spin" />
            </div>
          ) : contracts.length === 0 ? (
            <div className="text-center py-12 text-gray-400 text-sm">No contracts yet.</div>
          ) : (
            <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
              <table className="w-full text-sm">
                <thead>
                  <tr className="border-b border-gray-100 bg-gray-50">
                    <th className="text-left px-4 py-3 font-medium text-gray-500">Title</th>
                    <th className="text-left px-4 py-3 font-medium text-gray-500">Status</th>
                    <th className="text-left px-4 py-3 font-medium text-gray-500 hidden sm:table-cell">Sent</th>
                    <th className="text-left px-4 py-3 font-medium text-gray-500 hidden sm:table-cell">Signed</th>
                    <th className="text-right px-4 py-3 font-medium text-gray-500">Actions</th>
                  </tr>
                </thead>
                <tbody>
                  {contracts.map((c: any) => (
                    <tr key={c.id} className="border-b border-gray-50 last:border-0 hover:bg-gray-50/50">
                      <td className="px-4 py-3 font-medium text-gray-900">{c.title}</td>
                      <td className="px-4 py-3">
                        <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium border ${CONTRACT_STATUS_COLORS[c.status] || CONTRACT_STATUS_COLORS.draft}`}>
                          {CONTRACT_STATUS_LABELS[c.status] || c.status}
                        </span>
                      </td>
                      <td className="px-4 py-3 text-gray-500 hidden sm:table-cell">
                        {c.sent_at ? new Date(c.sent_at).toLocaleDateString("en-AU", { day: "numeric", month: "short", year: "numeric" }) : "—"}
                      </td>
                      <td className="px-4 py-3 text-gray-500 hidden sm:table-cell">
                        {c.signed_at ? new Date(c.signed_at).toLocaleDateString("en-AU", { day: "numeric", month: "short", year: "numeric" }) : "—"}
                      </td>
                      <td className="px-4 py-3 text-right">
                        <div className="flex items-center justify-end gap-1">
                          {(c.status === "draft" || c.status === "sent") && canManage && (
                            <button
                              onClick={() => handleSendContract(c.id)}
                              disabled={sendingContract === c.id}
                              className="p-1.5 text-gray-400 hover:text-blue-600 rounded transition-colors cursor-pointer disabled:opacity-50"
                              title="Send for signature"
                            >
                              {sendingContract === c.id ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Send className="w-3.5 h-3.5" />}
                            </button>
                          )}
                          {c.status === "draft" && canManage && (
                            <button
                              onClick={() => handleDeleteContract(c.id)}
                              className="p-1.5 text-gray-400 hover:text-red-600 rounded transition-colors cursor-pointer"
                              title="Delete"
                            >
                              <XIcon className="w-3.5 h-3.5" />
                            </button>
                          )}
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>
      )}

      {activeTab === "performance" && <ComingSoon tab="Performance" />}

      {/* Remove Employee Confirmation Modal */}
      {showRemoveConfirm && (
        <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50" onClick={() => setShowRemoveConfirm(false)}>
          <div className="bg-white rounded-xl shadow-xl w-full max-w-sm p-6 space-y-4" onClick={(e) => e.stopPropagation()}>
            <div className="flex items-center gap-2">
              <AlertTriangle className="w-5 h-5 text-red-500" />
              <h3 className="text-sm font-semibold text-gray-900">Remove Employee</h3>
            </div>
            <p className="text-sm text-gray-600">
              Are you sure you want to remove <strong>{employee.first_name} {employee.last_name}</strong> from the organisation? This action cannot be undone.
            </p>
            <div className="flex gap-2 pt-2 border-t border-gray-100">
              <Button variant="outline" onClick={() => setShowRemoveConfirm(false)} className="flex-1 cursor-pointer text-xs">Cancel</Button>
              <Button onClick={handleRemoveEmployee} disabled={removing} className="flex-1 bg-red-500 hover:bg-red-600 text-white text-xs cursor-pointer">
                {removing ? "Removing..." : "Remove"}
              </Button>
            </div>
          </div>
        </div>
      )}

      {/* Transfer Ownership Confirmation Modal */}
      {showTransferConfirm && (
        <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50" onClick={() => setShowTransferConfirm(false)}>
          <div className="bg-white rounded-xl shadow-xl w-full max-w-sm p-6 space-y-4" onClick={(e) => e.stopPropagation()}>
            <div className="flex items-center gap-2">
              <Shield className="w-5 h-5 text-amber-500" />
              <h3 className="text-sm font-semibold text-gray-900">Transfer Organisation Ownership</h3>
            </div>
            <p className="text-sm text-gray-600">
              Are you sure you want to transfer ownership of this organisation to <strong>{employee.first_name} {employee.last_name}</strong>?
            </p>
            <div className="bg-amber-50 p-3 rounded-lg flex gap-3">
              <AlertTriangle className="w-5 h-5 text-amber-600 flex-shrink-0" />
              <p className="text-xs text-amber-700">
                You will lose owner privileges and become an <strong>Admin</strong>. This action is significant and should be done with caution.
              </p>
            </div>
            <div className="flex gap-2 pt-2 border-t border-gray-100">
              <Button variant="outline" onClick={() => setShowTransferConfirm(false)} className="flex-1 cursor-pointer text-xs">Cancel</Button>
              <Button onClick={handleTransferOwnership} disabled={transferring} className="flex-1 bg-amber-600 hover:bg-amber-700 text-white text-xs cursor-pointer">
                {transferring ? "Transferring..." : "Confirm Transfer"}
              </Button>
            </div>
          </div>
        </div>
      )}

      {/* Create Contract Modal */}
      {showCreateContract && (
        <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50" onClick={() => setShowCreateContract(false)}>
          <div className="bg-white rounded-xl shadow-xl w-full max-w-md p-6 space-y-4" onClick={(e) => e.stopPropagation()}>
            <div className="flex items-center gap-2">
              <FileText className="w-5 h-5 text-[#1D9E75]" />
              <h3 className="text-sm font-semibold text-gray-900">Create Contract</h3>
            </div>
            <div className="space-y-3">
              <div>
                <Label htmlFor="contractTitle">Contract Title</Label>
                <Input
                  id="contractTitle"
                  value={contractTitle}
                  onChange={(e) => setContractTitle(e.target.value)}
                  className="mt-1"
                  placeholder="e.g. Employment Agreement"
                />
              </div>
              <div>
                <Label>Contract Document (PDF, optional)</Label>
                <div
                  onClick={() => fileInputRef.current?.click()}
                  className="mt-1 border-2 border-dashed border-gray-200 rounded-lg p-4 flex items-center gap-3 cursor-pointer hover:border-[#1D9E75] hover:bg-[#E1F5EE]/30 transition-colors"
                >
                  <Upload className="w-5 h-5 text-gray-300 flex-shrink-0" />
                  <div>
                    <p className="text-sm text-gray-500">
                      {contractFile ? contractFile.name : "Click to upload contract PDF"}
                    </p>
                    {contractFile && (
                      <p className="text-xs text-gray-400">{(contractFile.size / 1024).toFixed(1)} KB</p>
                    )}
                  </div>
                </div>
                <input
                  ref={fileInputRef}
                  type="file"
                  accept=".pdf,application/pdf"
                  onChange={(e) => {
                    const file = e.target.files?.[0];
                    if (file) setContractFile(file);
                  }}
                  className="hidden"
                />
              </div>
            </div>
            <div className="flex gap-2 pt-2 border-t border-gray-100">
              <Button variant="outline" onClick={() => { setShowCreateContract(false); setContractTitle(""); setContractFile(null); }} className="flex-1 cursor-pointer text-xs">Cancel</Button>
              <Button
                onClick={handleCreateContract}
                disabled={creatingContract || !contractTitle.trim()}
                className="flex-1 bg-[#1D9E75] hover:bg-[#1a8b66] text-white text-xs cursor-pointer disabled:bg-gray-300 disabled:cursor-not-allowed gap-1"
              >
                {creatingContract ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Check className="w-3.5 h-3.5" />}
                {creatingContract ? "Creating..." : "Create & Send"}
              </Button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function StatusBadge({ status }: { status: EmployeeStatus }) {
  return (
    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border ${STATUS_COLORS[status]}`}>
      {EMPLOYEE_STATUS_LABELS[status]}
    </span>
  );
}