"use client";

import { useState, useCallback, useEffect } from "react";
import { Search, Plus, ChevronRight, MoreHorizontal, Filter, Link as LinkIcon, Calendar, Users, X, Check, Copy, AlertTriangle, Trash2, Clock, CheckCircle2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Select } from "@/components/ui/select";
import { Label } from "@/components/ui/label";
import {
  fetchEmployees,
  fetchDepartments,
  createJoinLink,
  fetchInvitations,
  revokeInvitation,
  type ExpiryType,
} from "@/lib/supabase/employees-actions";
import {
  EMPLOYEE_STATUS_LABELS,
  EMPLOYMENT_TYPE_LABELS,
  getInitials,
  type EmployeeWithRelations,
  type Department,
  type EmployeeStatus,
} from "@/lib/supabase/employees-types";
import PageSkeleton from "./PageSkeleton";

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 AVATAR_COLORS = [
  "bg-teal-500", "bg-blue-500", "bg-purple-500",
  "bg-orange-500", "bg-pink-500", "bg-indigo-500",
];

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>
  );
}

function Avatar({ first, last, index }: { first: string; last: string; index: number }) {
  return (
    <div className={`w-8 h-8 rounded-full ${AVATAR_COLORS[index % AVATAR_COLORS.length]} flex items-center justify-center text-white text-xs font-semibold flex-shrink-0`}>
      {getInitials(first || "?", last || "?")}
    </div>
  );
}

export default function EmployeesPage({ onEmployeeClick }: { onEmployeeClick?: (id: string) => void }) {
  const [activeTab, setActiveTab] = useState<"list" | "invites">("list");
  const [employees, setEmployees] = useState<EmployeeWithRelations[]>([]);
  const [departments, setDepartments] = useState<Department[]>([]);
  const [invitations, setInvitations] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState("");
  const [deptFilter, setDeptFilter] = useState("");
  const [statusFilter, setStatusFilter] = useState("");

  // Modal states
  const [showAddModal, setShowAddModal] = useState(false);
  const [generatingLink, setGeneratingLink] = useState(false);
  const [generatedLink, setGeneratedLink] = useState<string | null>(null);
  const [expiryType, setExpiryType] = useState<ExpiryType>("1_week");
  const [usageLimit, setUsageLimit] = useState<string>("");
  const [copied, setCopied] = useState(false);

  const loadData = useCallback(async () => {
    try {
      const [emps, depts, invs] = await Promise.all([
        fetchEmployees(),
        fetchDepartments(),
        fetchInvitations(),
      ]);
      setEmployees(emps);
      setDepartments(depts);
      setInvitations(invs);
    } catch (err) {
      console.error("Failed to load employees data:", err);
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    loadData();
  }, [loadData]);

  const handleCreateLink = async () => {
    setGeneratingLink(true);
    try {
      const limit = usageLimit ? parseInt(usageLimit) : null;
      const result = await createJoinLink(expiryType, limit);
      if (result.success && result.token) {
        const url = `${window.location.origin}/join/${result.token}`;
        setGeneratedLink(url);
        loadData(); // Refresh invitations list
      }
    } catch (err) {
      console.error("Failed to create join link:", err);
    } finally {
      setGeneratingLink(false);
    }
  };

  const handleCopyLink = () => {
    if (generatedLink) {
      navigator.clipboard.writeText(generatedLink);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    }
  };

  const handleRevoke = async (id: string) => {
    if (confirm("Are you sure you want to revoke this invitation link?")) {
      await revokeInvitation(id);
      loadData();
    }
  };

  const filtered = employees.filter((emp) => {
    const fullName = `${emp.first_name || ""} ${emp.last_name || ""}`.toLowerCase();
    const matchSearch = !search || fullName.includes(search.toLowerCase()) || (emp.email || "").toLowerCase().includes(search.toLowerCase());
    const matchDept = !deptFilter || emp.department_id === deptFilter;
    const matchStatus = !statusFilter || emp.status === statusFilter;
    return matchSearch && matchDept && matchStatus;
  });

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

  return (
    <div className="p-6 lg:p-8 space-y-6">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
          <h1 className="text-3xl font-serif font-bold text-gray-900">Employees</h1>
          <p className="text-gray-500 mt-1">Manage your team and invitations</p>
        </div>
        <Button
          onClick={() => setShowAddModal(true)}
          className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-2 cursor-pointer shadow-sm"
        >
          <Plus className="w-4 h-4" />
          Add Employee
        </Button>
      </div>

      {/* Tabs */}
      <div className="flex gap-1 bg-gray-100 p-1 rounded-lg w-fit">
        <button
          onClick={() => setActiveTab("list")}
          className={`px-4 py-2 text-sm font-medium rounded-md transition-all cursor-pointer ${
            activeTab === "list" ? "bg-white text-gray-900 shadow-sm" : "text-gray-500 hover:text-gray-700"
          }`}
        >
          Employee List
        </button>
        <button
          onClick={() => setActiveTab("invites")}
          className={`px-4 py-2 text-sm font-medium rounded-md transition-all cursor-pointer ${
            activeTab === "invites" ? "bg-white text-gray-900 shadow-sm" : "text-gray-500 hover:text-gray-700"
          }`}
        >
          Invites & Links
        </button>
      </div>

      {activeTab === "list" ? (
        <>
          {/* Filters */}
          <div className="flex flex-col sm:flex-row gap-3">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
              <Input
                value={search}
                onChange={(e) => setSearch(e.target.value)}
                placeholder="Search by name or email..."
                className="pl-10"
              />
            </div>
            <Select value={deptFilter} onChange={(e) => setDeptFilter(e.target.value)} className="sm:w-48">
              <option value="">All departments</option>
              {departments.map((d) => (
                <option key={d.id} value={d.id}>{d.name}</option>
              ))}
            </Select>
            <Select value={statusFilter} onChange={(e) => setStatusFilter(e.target.value)} className="sm:w-40">
              <option value="">All statuses</option>
              <option value="active">Active</option>
              <option value="on_leave">On leave</option>
              <option value="terminated">Terminated</option>
            </Select>
          </div>

          {/* Table */}
          <div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
            {filtered.length === 0 ? (
              <div className="flex flex-col items-center justify-center py-20 text-center">
                <Users className="w-12 h-12 text-gray-100 mb-4" />
                <p className="text-gray-500 font-medium">No employees found</p>
                <p className="text-gray-400 text-sm mt-1">Try adjusting your filters or invite someone</p>
              </div>
            ) : (
              <div className="overflow-x-auto">
                <table className="w-full">
                  <thead>
                    <tr className="border-b border-gray-100 bg-gray-50/50">
                      <th className="text-left text-xs font-bold text-gray-400 uppercase tracking-widest py-4 px-6">Name</th>
                      <th className="text-left text-xs font-bold text-gray-400 uppercase tracking-widest py-4 px-6 hidden md:table-cell">Title</th>
                      <th className="text-left text-xs font-bold text-gray-400 uppercase tracking-widest py-4 px-6 hidden lg:table-cell">Department</th>
                      <th className="text-left text-xs font-bold text-gray-400 uppercase tracking-widest py-4 px-6">Role</th>
                      <th className="text-center text-xs font-bold text-gray-400 uppercase tracking-widest py-4 px-6">Status</th>
                      <th className="w-10"></th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-gray-50">
                    {filtered.map((emp, i) => (
                      <tr
                        key={emp.id}
                        onClick={() => onEmployeeClick?.(emp.id)}
                        className="hover:bg-teal-50/30 transition-colors cursor-pointer group"
                      >
                        <td className="py-4 px-6">
                          <div className="flex items-center gap-3">
                            <Avatar first={emp.first_name || ""} last={emp.last_name || ""} index={i} />
                            <div className="min-w-0">
                              <p className="text-sm font-semibold text-gray-900 truncate">
                                {emp.first_name} {emp.last_name}
                              </p>
                              <p className="text-xs text-gray-400 truncate">{emp.email}</p>
                            </div>
                          </div>
                        </td>
                        <td className="py-4 px-6 text-sm text-gray-600 hidden md:table-cell">{emp.job_title || "—"}</td>
                        <td className="py-4 px-6 text-sm text-gray-600 hidden lg:table-cell">{emp.department?.name || "—"}</td>
                        <td className="py-4 px-6">
                          <span className={`text-[10px] font-bold uppercase tracking-widest px-2 py-0.5 rounded-full ${
                            (emp as any).role === 'owner' ? 'bg-purple-100 text-purple-700' :
                            (emp as any).role === 'admin' ? 'bg-blue-100 text-blue-700' :
                            'bg-gray-100 text-gray-600'
                          }`}>
                            {(emp as any).role || 'employee'}
                          </span>
                        </td>
                        <td className="py-4 px-6 text-center">
                          <StatusBadge status={emp.status} />
                        </td>
                        <td className="py-4 px-6 text-right">
                          <ChevronRight className="w-4 h-4 text-gray-300 group-hover:text-teal-500 transition-colors" />
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
          </div>
        </>
      ) : (
        /* Invites Tab */
        <div className="space-y-6">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {invitations.length === 0 ? (
              <div className="col-span-full flex flex-col items-center justify-center py-20 bg-white rounded-xl border border-dashed border-gray-200">
                <LinkIcon className="w-12 h-12 text-gray-100 mb-4" />
                <p className="text-gray-500 font-medium">No invitation links yet</p>
                <p className="text-gray-400 text-sm mt-1">Create your first join link to add team members</p>
              </div>
            ) : (
              invitations.map((inv) => {
                const isExpired = inv.expires_at && new Date(inv.expires_at) < new Date();
                const isRevoked = inv.status === 'revoked';
                const usageText = inv.usage_limit ? `${inv.usage_count} / ${inv.usage_limit}` : `${inv.usage_count} joined`;
                const isLimitReached = inv.usage_limit && inv.usage_count >= inv.usage_limit;

                return (
                  <div key={inv.id} className="bg-white rounded-xl border border-gray-200 shadow-sm p-5 space-y-4 hover:shadow-md transition-shadow">
                    <div className="flex items-start justify-between">
                      <div className="bg-teal-50 p-2 rounded-lg">
                        <LinkIcon className="w-5 h-5 text-teal-600" />
                      </div>
                      <div className="flex gap-2">
                        {isRevoked ? (
                          <span className="text-[10px] font-bold uppercase tracking-widest bg-red-50 text-red-600 px-2 py-0.5 rounded-full">Revoked</span>
                        ) : isExpired ? (
                          <span className="text-[10px] font-bold uppercase tracking-widest bg-amber-50 text-amber-600 px-2 py-0.5 rounded-full">Expired</span>
                        ) : isLimitReached ? (
                          <span className="text-[10px] font-bold uppercase tracking-widest bg-gray-50 text-gray-600 px-2 py-0.5 rounded-full">Full</span>
                        ) : (
                          <span className="text-[10px] font-bold uppercase tracking-widest bg-emerald-50 text-emerald-600 px-2 py-0.5 rounded-full">Active</span>
                        )}
                      </div>
                    </div>

                    <div>
                      <p className="text-xs text-gray-400 font-bold uppercase tracking-widest mb-1">Join Link Token</p>
                      <div className="flex items-center gap-2 group">
                        <code className="text-sm font-mono font-bold text-gray-900 bg-gray-50 px-2 py-1 rounded select-all truncate">
                          {inv.token}
                        </code>
                        <button
                          onClick={() => {
                            navigator.clipboard.writeText(`${window.location.origin}/join/${inv.token}`);
                            alert("Link copied!");
                          }}
                          className="p-1 text-gray-400 hover:text-teal-600 transition-colors cursor-pointer"
                        >
                          <Copy className="w-4 h-4" />
                        </button>
                      </div>
                    </div>

                    <div className="grid grid-cols-2 gap-4 pt-2">
                      <div className="space-y-1">
                        <p className="text-[10px] text-gray-400 font-bold uppercase tracking-widest">Usage</p>
                        <div className="flex items-center gap-1.5 text-xs font-semibold text-gray-700">
                          <Users className="w-3.5 h-3.5 text-gray-400" />
                          {usageText}
                        </div>
                      </div>
                      <div className="space-y-1">
                        <p className="text-[10px] text-gray-400 font-bold uppercase tracking-widest">Expires</p>
                        <div className="flex items-center gap-1.5 text-xs font-semibold text-gray-700">
                          <Clock className="w-3.5 h-3.5 text-gray-400" />
                          {inv.expires_at ? new Date(inv.expires_at).toLocaleDateString() : "Never"}
                        </div>
                      </div>
                    </div>

                    {!isRevoked && !isExpired && !isLimitReached && (
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => handleRevoke(inv.id)}
                        className="w-full text-xs text-red-600 hover:bg-red-50 border-red-100 cursor-pointer"
                      >
                        <Trash2 className="w-3.5 h-3.5 mr-2" />
                        Revoke Link
                      </Button>
                    )}
                  </div>
                );
              })
            )}
          </div>
        </div>
      )}

      {/* Add Employee Modal */}
      {showAddModal && (
        <div className="fixed inset-0 bg-black/40 backdrop-blur-sm flex items-center justify-center z-50 p-4" onClick={() => setShowAddModal(false)}>
          <div className="bg-white rounded-2xl shadow-2xl w-full max-w-md overflow-hidden" onClick={(e) => e.stopPropagation()}>
            <div className="bg-[#1D9E75] p-6 text-white relative">
              <button onClick={() => setShowAddModal(false)} className="absolute top-4 right-4 text-white/80 hover:text-white cursor-pointer">
                <X className="w-5 h-5" />
              </button>
              <h2 className="text-xl font-bold font-serif flex items-center gap-2">
                <Plus className="w-5 h-5" />
                Add New Employee
              </h2>
              <p className="text-teal-50 text-sm mt-1">Generate a secure join link for your new teammate</p>
            </div>

            <div className="p-8 space-y-6">
              {!generatedLink ? (
                <>
                  <div className="space-y-4">
                    <div className="space-y-2">
                      <Label className="text-xs font-bold uppercase tracking-widest text-gray-500">Link Expiry</Label>
                      <Select
                        value={expiryType}
                        onChange={(e) => setExpiryType(e.target.value as ExpiryType)}
                        className="w-full h-11"
                      >
                        <option value="1_day">1 Day</option>
                        <option value="3_days">3 Days</option>
                        <option value="1_week">1 Week</option>
                        <option value="1_month">1 Month</option>
                        <option value="3_months">3 Months</option>
                        <option value="1_year">1 Year</option>
                        <option value="forever">No Expiry (Forever)</option>
                      </Select>
                    </div>

                    <div className="space-y-2">
                      <Label className="text-xs font-bold uppercase tracking-widest text-gray-500">Usage Limit (Optional)</Label>
                      <Input
                        type="number"
                        placeholder="Unlimited"
                        value={usageLimit}
                        onChange={(e) => setUsageLimit(e.target.value)}
                        className="h-11"
                        min="1"
                      />
                      <p className="text-[10px] text-gray-400">Maximum number of people who can join using this link</p>
                    </div>
                  </div>

                  <Button
                    onClick={handleCreateLink}
                    disabled={generatingLink}
                    className="w-full h-12 bg-[#1D9E75] hover:bg-[#1a8b66] text-white font-bold cursor-pointer transition-all active:scale-95"
                  >
                    {generatingLink ? (
                      <span className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
                    ) : (
                      "Generate Join Link"
                    )}
                  </Button>
                </>
              ) : (
                <div className="space-y-6 py-2">
                  <div className="flex flex-col items-center justify-center text-center space-y-3">
                    <div className="w-16 h-16 bg-emerald-100 rounded-full flex items-center justify-center">
                      <CheckCircle2 className="w-8 h-8 text-emerald-600" />
                    </div>
                    <div>
                      <h3 className="text-lg font-bold text-gray-900">Link Generated!</h3>
                      <p className="text-sm text-gray-500">Share this link with your new teammate</p>
                    </div>
                  </div>

                  <div className="bg-gray-50 p-4 rounded-xl border border-gray-100 space-y-3">
                    <div className="flex items-center justify-between text-[10px] font-bold uppercase tracking-widest text-gray-400 px-1">
                      <span>Direct Join Link</span>
                      <span className="flex items-center gap-1">
                        <Clock className="w-3 h-3" /> {expiryType.replace('_', ' ')}
                      </span>
                    </div>
                    <div className="flex items-center gap-2 bg-white p-3 rounded-lg border border-gray-200 shadow-sm">
                      <code className="text-xs font-mono font-bold text-gray-600 flex-1 truncate select-all">
                        {generatedLink}
                      </code>
                      <button
                        onClick={handleCopyLink}
                        className={`p-2 rounded-md transition-all cursor-pointer ${
                          copied ? "bg-emerald-100 text-emerald-600" : "bg-gray-100 text-gray-500 hover:bg-gray-200"
                        }`}
                      >
                        {copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
                      </button>
                    </div>
                  </div>

                  <Button
                    onClick={() => {
                      setGeneratedLink(null);
                      setShowAddModal(false);
                    }}
                    variant="outline"
                    className="w-full h-12 border-gray-200 text-gray-600 font-bold cursor-pointer"
                  >
                    Done
                  </Button>
                </div>
              )}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}