"use client";

import { useState, useEffect, useCallback } from "react";
import { useRouter } from "next/navigation";
import {
  User,
  DollarSign,
  Calendar,
  Briefcase,
  Mail,
  Phone,
  MapPin,
  CalendarDays,
  Building2,
  Shield,
  ChevronRight,
  AlertTriangle,
  Check,
  X,
  Users,
  LogOut,
} from "lucide-react";
import { fetchEmployeeDetail, fetchEmployees, updateEmployee } from "@/lib/supabase/employees-actions";
import { fetchEmployeeLeaveBalance, fetchLeaveRequests } from "@/lib/supabase/leave-actions";
import { fetchPayslipsForRun, fetchPayrollRuns } from "@/lib/supabase/payroll-actions";
import {
  getCurrentEmployee,
  getCurrentUserInfo,
  getOrgStats,
  submitResignation,
  reviewResignation,
  fetchResignations,
  getUserPermissions,
  canAccessPage,
  removeEmployee,
} from "@/lib/supabase/rbac-actions";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import PageSkeleton from "./PageSkeleton";
import { Edit2, Save, X as XIcon } from "lucide-react";

const AVATAR_COLORS = ["bg-teal-500", "bg-blue-500", "bg-purple-500", "bg-orange-500", "bg-pink-500"];

function formatDate(dateStr: string): string {
  if (!dateStr) return "—";
  return new Date(dateStr + "T00:00:00").toLocaleDateString("en-AU", {
    day: "numeric",
    month: "long",
    year: "numeric",
  });
}

export default function PortalPage() {
  const router = useRouter();
  const [loading, setLoading] = useState(true);
  const [greeting, setGreeting] = useState("");
  const [userInfo, setUserInfo] = useState<{ fullName: string; email: string } | null>(null);
  const [employee, setEmployee] = useState<any>(null);
  const [orgRole, setOrgRole] = useState("employee");
  const [customRoles, setCustomRoles] = useState<any[]>([]);
  const [leaveBalance, setLeaveBalance] = useState<any[]>([]);
  const [leaveRequests, setLeaveRequests] = useState<any[]>([]);
  const [payslips, setPayslips] = useState<any[]>([]);
  const [teammates, setTeammates] = useState<any[]>([]);
  const [stats, setStats] = useState<any>(null);
  const [permissions, setPermissions] = useState<Set<string>>(new Set());
  const [canViewEmployees, setCanViewEmployees] = useState(false);
  const [canRequestLeave, setCanRequestLeave] = useState(false);

  // Editing state
  const [isEditing, setIsEditing] = useState(false);
  const [isSaving, setIsSaving] = useState(false);
  const [editError, setEditError] = useState<string | null>(null);
  const [formData, setFormData] = useState({
    first_name: "",
    last_name: "",
    phone: "",
    address: "",
  });

  // Resignation state
  const [showResignModal, setShowResignModal] = useState(false);
  const [resignReason, setResignReason] = useState("");
  const [resignLastDay, setResignLastDay] = useState("");
  const [resigning, setResigning] = useState(false);
  const [resignError, setResignError] = useState<string | null>(null);

  // Resignation review
  const [pendingResignations, setPendingResignations] = useState<any[]>([]);
  const [canReviewResignation, setCanReviewResignation] = useState(false);

  useEffect(() => {
    const today = new Date();
    const hour = today.getHours();
    if (hour < 12) setGreeting("Good morning");
    else if (hour < 17) setGreeting("Good afternoon");
    else setGreeting("Good evening");
  }, []);

  useEffect(() => {
    let cancelled = false;

    Promise.all([
      getCurrentUserInfo().catch(() => null),
      fetchEmployees().catch(() => []),
      getCurrentEmployee().catch(() => null),
      getUserPermissions().catch(() => ({ orgRole: "employee", permissions: new Set(), hierarchyLevel: 0 })),
      getOrgStats().catch(() => null),
      canAccessPage("employees").catch(() => false),
      canAccessPage("leave").catch(() => true),
    ])
      .then(([user, emps, currEmp, perms, orgStats, canEmp, canLeave]) => {
        if (cancelled) return;

        setUserInfo(user);
        setOrgRole(perms.orgRole);
        setPermissions(perms.permissions as any);
        setCanViewEmployees(canEmp);
        setCanRequestLeave(canLeave);

        if (currEmp) {
          setEmployee(currEmp);
          setFormData({
            first_name: currEmp.first_name || "",
            last_name: currEmp.last_name || "",
            phone: currEmp.phone || "",
            address: currEmp.address || "",
          });
          // Parse custom roles
          const roles = (currEmp.employee_roles || []).map((er: any) => er.role);
          setCustomRoles(roles);

          // Fetch leave balance
          fetchEmployeeLeaveBalance(currEmp.id)
            .then(setLeaveBalance)
            .catch(() => {});

          // Fetch leave requests
          fetchLeaveRequests()
            .then((lr) => setLeaveRequests(lr.slice(0, 5)))
            .catch(() => {});

          // Check if user has pending resignation
          if (currEmp.resignation_status === "submitted" || currEmp.resignation_status === "accepted") {
            setCanReviewResignation(true);
          }

          // Fetch pending resignations (for admins/managers)
          fetchResignations()
            .then((r) => setPendingResignations(r))
            .catch(() => {});
        }

        // Payslips
        fetchPayrollRuns()
          .then((runs) => {
            const slips: any[] = [];
            const fetchSlips = async () => {
              for (const run of runs.slice(0, 3)) {
                try {
                  const s = await fetchPayslipsForRun(run.id);
                  slips.push(...s.slice(0, 2).map((p) => ({ ...p, period: `${run.period_start} — ${run.period_end}` })));
                } catch {}
              }
              if (!cancelled) setPayslips(slips);
            };
            fetchSlips();
          })
          .catch(() => {});

        // Teammates
        setTeammates(emps.slice(1, 5));
        setStats(orgStats);
      })
      .catch(() => {})
      .finally(() => { if (!cancelled) setLoading(false); });

    return () => { cancelled = true; };
  }, []);

  const handleEditToggle = () => {
    if (isEditing) {
      // Cancel: reset form data
      setFormData({
        first_name: employee?.first_name || "",
        last_name: employee?.last_name || "",
        phone: employee?.phone || "",
        address: employee?.address || "",
      });
    }
    setIsEditing(!isEditing);
    setEditError(null);
  };

  const handleSaveProfile = async () => {
    if (!employee) return;
    setIsSaving(true);
    setEditError(null);
    try {
      const result = await updateEmployee(employee.id, {
        first_name: formData.first_name,
        last_name: formData.last_name,
        phone: formData.phone,
        address: formData.address,
      });
      if (result.success) {
        setEmployee({ ...employee, ...formData });
        setIsEditing(false);
      } else {
        setEditError(result.error || "Failed to update profile");
      }
    } catch (e: any) {
      setEditError(e.message || "An unexpected error occurred");
    } finally {
      setIsSaving(false);
    }
  };

  const handleResign = useCallback(async () => {
    setResigning(true);
    setResignError(null);
    try {
      if (!resignReason.trim()) { setResignError("Reason is required"); return; }
      if (!resignLastDay) { setResignError("Last day is required"); return; }
      const result = await submitResignation(resignReason, resignLastDay);
      if (!result.success) { setResignError(result.error || "Failed"); return; }
      setShowResignModal(false);
      // Refresh
      const currEmp = await getCurrentEmployee();
      if (currEmp) setEmployee(currEmp);
    } catch (e: any) {
      setResignError(e.message);
    } finally {
      setResigning(false);
    }
  }, [resignReason, resignLastDay]);

  const handleReviewResignation = useCallback(async (employeeId: string, action: "accept" | "reject") => {
    const result = await reviewResignation(employeeId, action);
    if (result.success) {
      setPendingResignations((prev) => prev.filter((r) => r.id !== employeeId));
      if (action === "accept") {
        // Option to remove employee
        if (confirm("Employee has accepted resignation. Remove them from the organisation?")) {
          await removeEmployee(employeeId);
        }
      }
    }
  }, []);

  if (loading) return <PageSkeleton name="Portal" />;

  const displayName = employee
    ? `${employee.first_name} ${employee.last_name}`
    : userInfo?.fullName || "User";
  const displayEmail = employee?.email || userInfo?.email || "—";
  const initials = displayName.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
  const colorIdx = employee ? (employee.first_name.charCodeAt(0) + employee.last_name.charCodeAt(0)) % AVATAR_COLORS.length : 0;
  const isOwnerOrAdmin = orgRole === "owner" || orgRole === "admin";

  return (
    <div className="p-6 lg:p-8 space-y-6">
      {/* Greeting */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-4">
          <div className="w-14 h-14 rounded-full bg-[#1D9E75] flex items-center justify-center text-white text-lg font-semibold">
            {initials}
          </div>
          <div>
            <h1 className="text-3xl font-serif font-bold text-gray-900">
              {greeting}, {displayName}.
            </h1>
            <p className="text-gray-500 mt-0.5">
              {employee?.job_title}{employee?.department_name ? ` · ${employee.department_name}` : ""}
              {customRoles.length > 0 && ` · ${customRoles.map((r: any) => r.name).join(", ")}`}
              <span className="ml-2 text-xs bg-gray-100 text-gray-500 px-2 py-0.5 rounded-full">{orgRole}</span>
            </p>
          </div>
        </div>

        {/* Resign button (not for owner) */}
        {!employee?.resignation_status && orgRole !== "owner" && (
          <Button variant="outline" onClick={() => setShowResignModal(true)} className="gap-2 cursor-pointer text-xs">
            <LogOut className="w-3.5 h-3.5" />
            Resign
          </Button>
        )}
        {employee?.resignation_status === "submitted" && (
          <Badge variant="outline" className="bg-amber-50 text-amber-700 border-amber-200 text-xs">
            Resignation submitted
          </Badge>
        )}
        {employee?.resignation_status === "accepted" && (
          <Badge variant="outline" className="bg-red-50 text-red-700 border-red-200 text-xs">
            Resignation accepted
          </Badge>
        )}
      </div>

      {/* Resignation Review (for admins/managers) */}
      {pendingResignations.length > 0 && (
        <div className="bg-amber-50 border border-amber-200 rounded-xl p-5 space-y-3">
          <div className="flex items-center gap-2">
            <AlertTriangle className="w-5 h-5 text-amber-600" />
            <h2 className="text-sm font-semibold text-amber-800">Pending Resignations</h2>
          </div>
          {pendingResignations.map((r) => (
            <div key={r.id} className="flex items-center justify-between bg-white rounded-lg p-3">
              <div>
                <p className="text-sm font-medium text-gray-900">{r.first_name} {r.last_name}</p>
                <p className="text-xs text-gray-500">Last day: {formatDate(r.resignation_date)}</p>
                {r.resignation_reason && <p className="text-xs text-gray-400 mt-0.5">"{r.resignation_reason}"</p>}
              </div>
              <div className="flex gap-2">
                <button onClick={() => handleReviewResignation(r.id, "accept")} className="p-1.5 text-emerald-600 hover:bg-emerald-50 rounded cursor-pointer">
                  <Check className="w-4 h-4" />
                </button>
                <button onClick={() => handleReviewResignation(r.id, "reject")} className="p-1.5 text-red-500 hover:bg-red-50 rounded cursor-pointer">
                  <X className="w-4 h-4" />
                </button>
              </div>
            </div>
          ))}
        </div>
      )}

      {/* Full-width: Personal Details */}
      <div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
        <div className="bg-gradient-to-r from-[#1D9E75] to-[#0F6E56] px-6 py-4 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <User className="w-5 h-5 text-white/80" />
            <h2 className="text-sm font-semibold text-white">My Profile</h2>
          </div>
          {employee && (
            <div className="flex gap-2">
              {!isEditing ? (
                <Button 
                  onClick={handleEditToggle} 
                  variant="ghost" 
                  size="sm" 
                  className="text-white hover:bg-white/10 h-8 gap-1.5 text-xs cursor-pointer"
                >
                  <Edit2 className="w-3.5 h-3.5" /> Edit Profile
                </Button>
              ) : (
                <div className="flex gap-2">
                  <Button 
                    onClick={handleSaveProfile} 
                    disabled={isSaving}
                    size="sm" 
                    className="bg-white text-[#1D9E75] hover:bg-white/90 h-8 gap-1.5 text-xs cursor-pointer"
                  >
                    {isSaving ? <span className="w-3.5 h-3.5 border-2 border-[#1D9E75] border-t-transparent rounded-full animate-spin" /> : <Save className="w-3.5 h-3.5" />}
                    Save
                  </Button>
                  <Button 
                    onClick={handleEditToggle} 
                    variant="ghost" 
                    size="sm" 
                    className="text-white hover:bg-white/10 h-8 gap-1.5 text-xs cursor-pointer"
                  >
                    <XIcon className="w-3.5 h-3.5" /> Cancel
                  </Button>
                </div>
              )}
            </div>
          )}
        </div>
        <div className="p-6">
          {editError && (
            <div className="mb-6 p-3 bg-red-50 border border-red-100 text-red-600 text-xs rounded-lg flex items-center gap-2">
              <AlertTriangle className="w-4 h-4" /> {editError}
            </div>
          )}
          
          <div className="flex items-start gap-5 mb-8">
            <div className={`w-16 h-16 rounded-full ${AVATAR_COLORS[colorIdx]} flex items-center justify-center text-white text-xl font-semibold flex-shrink-0 shadow-sm`}>
              {initials}
            </div>
            <div className="pt-1">
              <h3 className="text-lg font-bold text-gray-900 leading-tight">{displayName}</h3>
              <p className="text-sm text-gray-500 mt-0.5">
                {employee?.job_title || (userInfo?.fullName ? "Team Member" : "User")}{employee?.department_name ? ` · ${employee.department_name}` : ""}
              </p>
            </div>
          </div>

          {isEditing ? (
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-5">
              <div className="space-y-1.5">
                <Label htmlFor="first_name" className="text-xs font-semibold text-gray-500 uppercase tracking-wider">First Name</Label>
                <Input 
                  id="first_name" 
                  value={formData.first_name} 
                  onChange={(e) => setFormData({ ...formData, first_name: e.target.value })} 
                  className="h-10 focus:ring-teal-500"
                />
              </div>
              <div className="space-y-1.5">
                <Label htmlFor="last_name" className="text-xs font-semibold text-gray-500 uppercase tracking-wider">Last Name</Label>
                <Input 
                  id="last_name" 
                  value={formData.last_name} 
                  onChange={(e) => setFormData({ ...formData, last_name: e.target.value })} 
                  className="h-10 focus:ring-teal-500"
                />
              </div>
              <div className="space-y-1.5">
                <Label htmlFor="phone" className="text-xs font-semibold text-gray-500 uppercase tracking-wider">Phone Number</Label>
                <Input 
                  id="phone" 
                  value={formData.phone} 
                  onChange={(e) => setFormData({ ...formData, phone: e.target.value })} 
                  className="h-10 focus:ring-teal-500"
                  placeholder="+61 400 000 000"
                />
              </div>
              <div className="space-y-1.5 sm:col-span-2">
                <Label htmlFor="address" className="text-xs font-semibold text-gray-500 uppercase tracking-wider">Residential Address</Label>
                <Input 
                  id="address" 
                  value={formData.address} 
                  onChange={(e) => setFormData({ ...formData, address: e.target.value })} 
                  className="h-10 focus:ring-teal-500"
                  placeholder="Street, Suburb, State, Postcode"
                />
              </div>
            </div>
          ) : (
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-6">
              {[
                { icon: Mail, label: "Email", value: displayEmail },
                { icon: Phone, label: "Phone", value: employee?.phone || "—" },
                { icon: MapPin, label: "Address", value: employee?.address || "—" },
                { icon: CalendarDays, label: "Start Date", value: formatDate(employee?.start_date) },
                { icon: Briefcase, label: "Employment Type", value: employee?.employment_type ? employee.employment_type.replace("_", " ").replace(/\b\w/g, (c: string) => c.toUpperCase()) : (employee ? "—" : "Not set") },
                { icon: Calendar, label: "Pay Frequency", value: employee?.pay_frequency ? employee.pay_frequency.charAt(0).toUpperCase() + employee.pay_frequency.slice(1) : (employee ? "—" : "Not set") },
                { icon: DollarSign, label: "Compensation", value: employee?.salary ? `$${Number(employee.salary).toLocaleString()}/yr` : employee?.hourly_rate ? `$${Number(employee.hourly_rate)}/hr` : (employee ? "—" : "Not set") },
                { icon: Shield, label: "Status", value: employee?.status === "active" ? "Active" : employee?.status || "—" },
                { icon: Users, label: "Org Role", value: orgRole },
              ].map(({ icon: Icon, label, value }) => (
                <div key={label} className="flex items-start gap-3.5 group">
                  <div className="mt-1 p-1.5 bg-gray-50 rounded-lg group-hover:bg-teal-50 transition-colors">
                    <Icon className="w-3.5 h-3.5 text-gray-400 group-hover:text-teal-600 transition-colors" />
                  </div>
                  <div>
                    <p className="text-[10px] font-bold text-gray-400 uppercase tracking-widest">{label}</p>
                    <p className="text-sm font-medium text-gray-900 mt-0.5">{value}</p>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>

      {/* Org Stats (owner/admin only) */}
      {isOwnerOrAdmin && stats && (
        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4">
          {[
            { label: "Total Employees", value: stats.totalEmployees, icon: Users },
            { label: "Active", value: stats.activeEmployees, icon: Check },
            { label: "Departments", value: stats.departments, icon: Building2 },
            { label: "Custom Roles", value: stats.roles, icon: Shield },
            { label: "Owners", value: stats.ownerCount, icon: User },
            { label: "Admins", value: stats.adminCount, icon: User },
          ].map(({ label, value, icon: Icon }) => (
            <div key={label} className="bg-white rounded-lg border border-gray-200 p-4">
              <Icon className="w-4 h-4 text-gray-400 mb-2" />
              <p className="text-xs text-gray-500">{label}</p>
              <p className="text-xl font-bold text-gray-900 mt-1">{value}</p>
            </div>
          ))}
        </div>
      )}

      {/* Half-Half Grid: Payslips + Leave */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* My Payslips */}
        <div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
          <div className="px-5 py-4 border-b border-gray-100 flex items-center justify-between">
            <div className="flex items-center gap-2">
              <DollarSign className="w-5 h-5 text-[#1D9E75]" />
              <h2 className="text-sm font-semibold text-gray-900">My Payslips</h2>
            </div>
          </div>
          {payslips.length > 0 ? (
            <div className="divide-y divide-gray-50">
              {payslips.map((ps: any) => (
                <div key={ps.id} className="px-5 py-3 flex items-center justify-between">
                  <div>
                    <p className="text-sm font-medium text-gray-900">
                      {ps.period ? new Date(ps.period.split(" — ")[0] + "T00:00:00").toLocaleDateString("en-AU", { month: "short", year: "numeric" }) : "Payslip"}
                    </p>
                    <p className="text-xs text-gray-400">Gross: ${(ps.gross_pay || 0).toFixed(2)}</p>
                  </div>
                  <div className="text-right">
                    <p className="text-sm font-bold text-emerald-600">${(ps.net_pay || 0).toFixed(2)}</p>
                    <p className="text-[10px] text-gray-400">Net pay</p>
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <div className="px-5 py-8 text-center">
              <DollarSign className="w-8 h-8 text-gray-200 mx-auto mb-2" />
              <p className="text-xs text-gray-400">No payslips yet</p>
            </div>
          )}
        </div>

        {/* My Leave */}
        <div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
          <div className="px-5 py-4 border-b border-gray-100 flex items-center justify-between">
            <div className="flex items-center gap-2">
              <Calendar className="w-5 h-5 text-[#1D9E75]" />
              <h2 className="text-sm font-semibold text-gray-900">My Leave</h2>
            </div>
            {canRequestLeave && (
              <button onClick={() => router.push("/leave/new")} className="text-xs text-[#1D9E75] hover:underline font-medium cursor-pointer">
                Request leave
              </button>
            )}
          </div>
          {leaveBalance.length > 0 ? (
            <div className="divide-y divide-gray-50">
              {leaveBalance.map((lb) => (
                <div key={lb.leave_type_id} className="px-5 py-3 flex items-center justify-between">
                  <div>
                    <p className="text-sm font-medium text-gray-900">{lb.leave_type_name}</p>
                    <p className="text-xs text-gray-400">{lb.used_days} used · {lb.approved_days - lb.used_days} pending</p>
                  </div>
                  <span className="text-sm font-semibold text-emerald-600">{lb.remaining_days} left</span>
                </div>
              ))}
            </div>
          ) : (
            <div className="px-5 py-8 text-center">
              <Calendar className="w-8 h-8 text-gray-200 mx-auto mb-2" />
              <p className="text-xs text-gray-400">No leave balance tracked</p>
            </div>
          )}
        </div>
      </div>

      {/* Teammates */}
      {teammates.length > 0 && (
        <div className="bg-white rounded-xl border border-gray-200 shadow-sm p-5">
          <div className="flex items-center justify-between mb-4">
            <div className="flex items-center gap-2">
              <Shield className="w-5 h-5 text-[#1D9E75]" />
              <h2 className="text-sm font-semibold text-gray-900">Your Teammates</h2>
            </div>
            {canViewEmployees && (
              <button onClick={() => router.push("/employees")} className="text-xs text-[#1D9E75] hover:underline font-medium cursor-pointer flex items-center gap-1">
                View all <ChevronRight className="w-3 h-3" />
              </button>
            )}
          </div>
          <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
            {teammates.map((tm, i) => (
              <div key={tm.id} className="flex items-center gap-2.5 p-2 rounded-lg hover:bg-gray-50 transition-colors">
                <div className={`w-8 h-8 rounded-full ${AVATAR_COLORS[i % AVATAR_COLORS.length]} flex items-center justify-center text-white text-xs font-semibold flex-shrink-0`}>
                  {tm.first_name[0]}{tm.last_name[0]}
                </div>
                <div className="min-w-0">
                  <p className="text-xs font-medium text-gray-900 truncate">{tm.first_name} {tm.last_name}</p>
                  {tm.job_title && <p className="text-[10px] text-gray-400 truncate">{tm.job_title}</p>}
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Resignation Modal */}
      {showResignModal && (
        <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50" onClick={() => setShowResignModal(false)}>
          <div className="bg-white rounded-xl shadow-xl w-full max-w-sm p-6 space-y-4" onClick={(e) => e.stopPropagation()}>
            <h3 className="text-sm font-semibold text-gray-900 flex items-center gap-2">
              <AlertTriangle className="w-4 h-4 text-amber-500" /> Submit Resignation
            </h3>
            {resignError && <p className="text-xs text-red-600 bg-red-50 px-3 py-2 rounded">{resignError}</p>}
            <div>
              <label className="text-xs font-medium text-gray-600">Reason</label>
              <textarea value={resignReason} onChange={(e) => setResignReason(e.target.value)} rows={3}
                className="mt-1 w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75] resize-none"
                placeholder="Why are you leaving?" />
            </div>
            <div>
              <label className="text-xs font-medium text-gray-600">Last Day</label>
              <input type="date" value={resignLastDay} onChange={(e) => setResignLastDay(e.target.value)}
                className="mt-1 w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75]" />
            </div>
            <div className="flex gap-2 pt-2 border-t border-gray-100">
              <Button variant="outline" onClick={() => setShowResignModal(false)} className="flex-1 cursor-pointer text-xs">Cancel</Button>
              <Button onClick={handleResign} disabled={resigning} className="flex-1 bg-red-500 hover:bg-red-600 text-white text-xs cursor-pointer">
                {resigning ? "Submitting..." : "Submit"}
              </Button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}