"use client";

import { useState, useEffect, useCallback } from "react";
import { Plus, Clock, CheckCircle, XCircle, Calendar } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
  fetchLeaveRequests,
  fetchLeaveTypes,
  fetchLeaveRequestsForCalendar,
  approveLeaveRequest,
  rejectLeaveRequest,
} from "@/lib/supabase/leave-actions";
import { useUser } from "@clerk/nextjs";
import {
  STATUS_LABELS,
  STATUS_COLORS,
  formatDate,
  formatDateShort,
  type LeaveRequestWithDetails,
  type LeaveType,
  type LeaveBalance,
} from "@/lib/supabase/leave-types";
import PageSkeleton from "./PageSkeleton";
import { LeavePatternInsights } from "@/components/ai/LeavePatternInsights";

const STATUS_ICONS: Record<string, React.ReactNode> = {
  pending: <Clock className="w-3.5 h-3.5" />,
  approved: <CheckCircle className="w-3.5 h-3.5" />,
  rejected: <XCircle className="w-3.5 h-3.5" />,
};

function CalendarView({ requests }: { requests: LeaveRequestWithDetails[] }) {
  const [viewDate, setViewDate] = useState(new Date());
  const [selectedDay, setSelectedDay] = useState<Date | null>(null);

  const currentMonth = viewDate.getMonth();
  const currentYear = viewDate.getFullYear();
  const now = new Date();

  const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
  const firstDayOfWeek = new Date(currentYear, currentMonth, 1).getDay();
  const monthName = viewDate.toLocaleDateString("en-AU", { month: "long", year: "numeric" });

  // Build calendar grid
  const days: { date: Date; isCurrentMonth: boolean }[] = [];
  for (let i = firstDayOfWeek - 1; i >= 0; i--) {
    days.push({ date: new Date(currentYear, currentMonth, -i), isCurrentMonth: false });
  }
  for (let d = 1; d <= daysInMonth; d++) {
    days.push({ date: new Date(currentYear, currentMonth, d), isCurrentMonth: true });
  }
  const remaining = 42 - days.length;
  for (let i = 1; i <= remaining; i++) {
    days.push({ date: new Date(currentYear, currentMonth + 1, i), isCurrentMonth: false });
  }

  const getLeaveForDate = (date: Date) => {
    const dateStr = date.toISOString().split("T")[0];
    return requests.filter((r) => {
      const start = new Date(r.start_date + "T00:00:00");
      const end = new Date(r.end_date + "T00:00:00");
      return date >= start && date <= end;
    });
  };

  // Get leave for selected day
  const selectedDayLeave = selectedDay ? getLeaveForDate(selectedDay) : [];

  const LEAVE_COLORS = [
    "bg-teal-500", "bg-blue-500", "bg-purple-500",
    "bg-orange-500", "bg-pink-500", "bg-indigo-500",
  ];
  const getEmployeeColor = (empId: string) => {
    let hash = 0;
    for (let i = 0; i < empId.length; i++) hash = empId.charCodeAt(i) + ((hash << 5) - hash);
    return LEAVE_COLORS[Math.abs(hash) % LEAVE_COLORS.length];
  };

  const prevMonth = () => setViewDate(new Date(currentYear, currentMonth - 1, 1));
  const nextMonth = () => setViewDate(new Date(currentYear, currentMonth + 1, 1));
  const goToday = () => { setViewDate(new Date()); setSelectedDay(null); };

  const dayNames = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
  // Adjust for Monday start (ISO)
  const adjustedDays = [...days.slice(1), days[0]];

  return (
    <div className="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
      {/* Header */}
      <div className="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
        <div className="flex items-center gap-3">
          <button onClick={prevMonth} className="p-1.5 hover:bg-gray-100 rounded-md transition-colors cursor-pointer">
            <svg className="w-4 h-4 text-gray-500" viewBox="0 0 16 16" fill="none"><path d="M10 2L4 8l6 6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </button>
          <h3 className="text-sm font-semibold text-gray-900 min-w-[160px] text-center">{monthName}</h3>
          <button onClick={nextMonth} className="p-1.5 hover:bg-gray-100 rounded-md transition-colors cursor-pointer">
            <svg className="w-4 h-4 text-gray-500" viewBox="0 0 16 16" fill="none"><path d="M6 2l6 6-6 6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </button>
        </div>
        <button onClick={goToday} className="text-xs font-medium text-[#1D9E75] hover:underline cursor-pointer">
          Today
        </button>
      </div>

      <div className="grid grid-cols-7">
        {dayNames.map((d) => (
          <div key={d} className="text-center text-[11px] font-medium text-gray-500 py-2.5 border-b border-gray-100 bg-gray-50/50">
            {d}
          </div>
        ))}

        {adjustedDays.map((day, i) => {
          const leave = getLeaveForDate(day.date);
          const isToday =
            day.date.getDate() === now.getDate() &&
            day.date.getMonth() === now.getMonth() &&
            day.date.getFullYear() === now.getFullYear();
          const isWeekend = day.date.getDay() === 0 || day.date.getDay() === 6;
          const isSelected = selectedDay && day.date.toDateString() === selectedDay.toDateString();

          return (
            <button
              key={i}
              onClick={() => setSelectedDay(isSelected ? null : new Date(day.date))}
              className={`min-h-[90px] border-b border-r border-gray-100 p-1 text-left transition-colors ${
                !day.isCurrentMonth ? "bg-gray-50/30" : "hover:bg-gray-50/50"
              } ${isToday ? "bg-teal-50/40" : ""} ${isSelected ? "ring-2 ring-inset ring-[#1D9E75]" : ""}`}
            >
              <div
                className={`text-xs font-medium mb-1 inline-flex items-center justify-center w-6 h-6 rounded-full ${
                  day.isCurrentMonth ? "text-gray-700" : "text-gray-300"
                } ${isToday ? "bg-[#1D9E75] text-white font-semibold" : ""}`}
              >
                {day.date.getDate()}
              </div>

              {day.isCurrentMonth && !isWeekend && leave.length > 0 && (
                <div className="space-y-0.5">
                  {leave.slice(0, 3).map((r) => {
                    const color = getEmployeeColor(r.employee?.id || "");
                    return (
                      <div
                        key={r.id}
                        className={`text-[10px] px-1.5 py-0.5 rounded truncate ${color} text-white font-medium`}
                        title={`${r.employee?.first_name} ${r.employee?.last_name} — ${r.leave_type?.name}`}
                      >
                        {r.employee?.first_name} {r.employee?.last_name?.[0]}.
                      </div>
                    );
                  })}
                  {leave.length > 3 && (
                    <div className="text-[10px] text-gray-400 pl-1">+{leave.length - 3} more</div>
                  )}
                </div>
              )}
            </button>
          );
        })}
      </div>

      {/* Selected day detail */}
      {selectedDay && (
        <div className="border-t border-gray-100 px-6 py-4">
          <h4 className="text-sm font-semibold text-gray-900 mb-3">
            {selectedDay.toLocaleDateString("en-AU", { weekday: "long", day: "numeric", month: "long", year: "numeric" })}
          </h4>
          {selectedDayLeave.length === 0 ? (
            <p className="text-sm text-gray-400">No leave scheduled</p>
          ) : (
            <div className="space-y-2">
              {selectedDayLeave.map((r) => (
                <div key={r.id} className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
                  <div className={`w-8 h-8 rounded-full ${getEmployeeColor(r.employee?.id || "")} flex items-center justify-center text-white text-xs font-semibold flex-shrink-0`}>
                    {r.employee?.first_name?.[0]}{r.employee?.last_name?.[0]}
                  </div>
                  <div className="flex-1 min-w-0">
                    <p className="text-sm font-medium text-gray-900">{r.employee?.first_name} {r.employee?.last_name}</p>
                    <p className="text-xs text-gray-500">{r.leave_type?.name} · {formatDate(r.start_date)} — {formatDate(r.end_date)}</p>
                  </div>
                  <Badge variant="outline" className={`text-xs ${STATUS_COLORS[r.status]}`}>
                    {STATUS_LABELS[r.status]}
                  </Badge>
                </div>
              ))}
            </div>
          )}
        </div>
      )}

      {/* Legend */}
      <div className="px-6 py-3 border-t border-gray-100 bg-gray-50/50 flex items-center gap-4 flex-wrap">
        <span className="text-[11px] text-gray-500 font-medium">Legend:</span>
        {Array.from(new Set(requests.map((r) => r.employee?.id)))
          .filter(Boolean)
          .slice(0, 6)
          .map((empId, idx) => {
            const emp = requests.find((r) => r.employee?.id === empId)?.employee;
            if (!emp) return null;
            return (
              <div key={empId} className="flex items-center gap-1.5">
                <div className={`w-2.5 h-2.5 rounded-full ${LEAVE_COLORS[idx % LEAVE_COLORS.length]}`} />
                <span className="text-[11px] text-gray-600">{emp.first_name} {emp.last_name?.[0]}.</span>
              </div>
            );
          })}
      </div>
    </div>
  );
}

function PendingApprovalCard({
  request,
  onApprove,
  onReject,
}: {
  request: LeaveRequestWithDetails;
  onApprove: (id: string) => void;
  onReject: (id: string) => void;
}) {
  const [confirming, setConfirming] = useState<"approve" | "reject" | null>(null);
  const [rejectReason, setRejectReason] = useState("");

  return (
    <div className="flex items-start justify-between gap-4 p-4 border border-gray-200 rounded-lg bg-white hover:border-gray-300 transition-colors">
      <div className="flex-1 min-w-0">
        <div className="flex items-center gap-2 mb-1">
          <span className="text-sm font-medium text-gray-900">
            {request.employee?.first_name} {request.employee?.last_name}
          </span>
          <Badge variant="outline" className={`text-xs ${STATUS_COLORS.pending}`}>
            {STATUS_LABELS.pending}
          </Badge>
        </div>
        <p className="text-xs text-gray-500">
          {request.leave_type?.name} · {formatDateShort(request.start_date)} — {formatDateShort(request.end_date)} · {request.days_count} {Number(request.days_count) === 1 ? "day" : "days"}
        </p>
        {request.reason && (
          <p className="text-xs text-gray-500 mt-1 italic">&ldquo;{request.reason}&rdquo;</p>
        )}
      </div>

      <div className="flex items-center gap-2 flex-shrink-0">
        {confirming === "reject" ? (
          <div className="flex items-center gap-2">
            <input
              type="text"
              value={rejectReason}
              onChange={(e) => setRejectReason(e.target.value)}
              placeholder="Reason..."
              className="text-xs border border-gray-200 rounded px-2 py-1 w-32"
            />
            <Button
              size="sm"
              variant="destructive"
              onClick={() => { onReject(request.id); setConfirming(null); }}
              className="text-xs cursor-pointer px-2 py-1 h-auto"
              disabled={!rejectReason.trim()}
            >
              Confirm
            </Button>
            <Button
              size="sm"
              variant="outline"
              onClick={() => { setConfirming(null); setRejectReason(""); }}
              className="text-xs cursor-pointer px-2 py-1 h-auto"
            >
              Cancel
            </Button>
          </div>
        ) : confirming === "approve" ? (
          <div className="flex items-center gap-2">
            <span className="text-xs text-gray-500">Approve?</span>
            <Button
              size="sm"
              onClick={() => { onApprove(request.id); setConfirming(null); }}
              className="bg-[#1D9E75] hover:bg-[#1a8b66] text-xs cursor-pointer px-2 py-1 h-auto"
            >
              Yes
            </Button>
            <Button
              size="sm"
              variant="outline"
              onClick={() => setConfirming(null)}
              className="text-xs cursor-pointer px-2 py-1 h-auto"
            >
              No
            </Button>
          </div>
        ) : (
          <>
            <Button
              size="sm"
              onClick={() => setConfirming("approve")}
              className="bg-emerald-600 hover:bg-emerald-700 text-white text-xs gap-1 cursor-pointer px-3 py-1 h-auto"
            >
              <CheckCircle className="w-3 h-3" /> Approve
            </Button>
            <Button
              size="sm"
              variant="outline"
              onClick={() => setConfirming("reject")}
              className="text-red-600 border-red-200 hover:bg-red-50 text-xs gap-1 cursor-pointer px-3 py-1 h-auto"
            >
              <XCircle className="w-3 h-3" /> Reject
            </Button>
          </>
        )}
      </div>
    </div>
  );
}

export default function LeaveListPage({ onNewRequest }: { onNewRequest: () => void }) {
  const { user } = useUser();
  const [requests, setRequests] = useState<LeaveRequestWithDetails[]>([]);
  const [leaveTypes, setLeaveTypes] = useState<LeaveType[]>([]);
  const [calendarRequests, setCalendarRequests] = useState<LeaveRequestWithDetails[]>([]);
  const [balances, setBalances] = useState<LeaveBalance[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let cancelled = false;
    Promise.all([
      fetchLeaveRequests(),
      fetchLeaveTypes(),
      fetchLeaveRequestsForCalendar(),
    ])
      .then(([reqs, types, calReqs]) => {
        if (!cancelled) {
          setRequests(reqs);
          setLeaveTypes(types);
          setCalendarRequests(calReqs);
        }
      })
      .catch(() => {})
      .finally(() => { if (!cancelled) setLoading(false); });
    return () => { cancelled = true; };
  }, []);

  const pendingRequests = requests.filter((r) => r.status === "pending");

  const handleApprove = useCallback(
    async (id: string) => {
      if (!user?.id) return;
      const result = await approveLeaveRequest(id, user.id);
      if (result.success) {
        setRequests((prev) => prev.filter((r) => r.id !== id));
        setCalendarRequests((prev) => prev.filter((r) => r.id !== id));
      }
    },
    [user]
  );

  const handleReject = useCallback(
    async (id: string) => {
      if (!user?.id) return;
      const result = await rejectLeaveRequest(id, user.id, "Rejected");
      if (result.success) {
        setRequests((prev) => prev.filter((r) => r.id !== id));
      }
    },
    [user]
  );

  const approvedRequests = requests.filter((r) => r.status === "approved");

  // Prepare data for AI leave pattern analysis
  const currentMonthLabel = new Date().toLocaleDateString("en-AU", { month: "long", year: "numeric" });
  const aiLeaveRequests = requests.map((r) => ({
    employee_name: r.employee ? `${r.employee.first_name} ${r.employee.last_name}` : "Unknown",
    leave_type_name: r.leave_type?.name || "Unknown",
    start_date: r.start_date,
    end_date: r.end_date,
    days_count: r.days_count,
    status: r.status,
    reason: r.reason,
  }));

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

  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">Leave</h1>
          <p className="text-gray-500 mt-1">Manage time off and approvals</p>
        </div>
        <Button
          onClick={onNewRequest}
          className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-2 cursor-pointer"
        >
          <Plus className="w-4 h-4" />
          Request Leave
        </Button>
      </div>

      {/* AI Leave Pattern Insights */}
      <LeavePatternInsights leaveRequests={aiLeaveRequests} monthLabel={currentMonthLabel} />

      {/* Pending Approvals */}
      {pendingRequests.length > 0 && (
        <div className="space-y-3">
          <div className="flex items-center gap-2">
            <Clock className="w-4 h-4 text-amber-500" />
            <h2 className="text-sm font-semibold text-gray-900">
              Pending approvals ({pendingRequests.length})
            </h2>
          </div>
          {pendingRequests.map((r) => (
            <PendingApprovalCard
              key={r.id}
              request={r}
              onApprove={handleApprove}
              onReject={handleReject}
            />
          ))}
        </div>
      )}

      {/* Calendar */}
      <CalendarView requests={calendarRequests} />

      {/* Approved Leave List */}
      {approvedRequests.length > 0 && (
        <div className="space-y-3">
          <h2 className="text-sm font-semibold text-gray-900">Recent approved leave</h2>
          <div className="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
            <table className="w-full">
              <thead>
                <tr className="border-b border-gray-100">
                  <th className="text-left text-xs font-medium text-gray-500 py-3 px-4">Employee</th>
                  <th className="text-left text-xs font-medium text-gray-500 py-3 px-4 hidden sm:table-cell">Type</th>
                  <th className="text-left text-xs font-medium text-gray-500 py-3 px-4 hidden md:table-cell">Dates</th>
                  <th className="text-center text-xs font-medium text-gray-500 py-3 px-4">Days</th>
                  <th className="text-center text-xs font-medium text-gray-500 py-3 px-4">Status</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-50">
                {approvedRequests.slice(0, 10).map((r) => (
                  <tr key={r.id} className="hover:bg-gray-50/50 transition-colors">
                    <td className="py-3 px-4">
                      <p className="text-sm font-medium text-gray-900">
                        {r.employee?.first_name} {r.employee?.last_name}
                      </p>
                      <p className="text-xs text-gray-500">{r.employee?.job_title || ""}</p>
                    </td>
                    <td className="py-3 px-4 text-sm text-gray-600 hidden sm:table-cell">{r.leave_type?.name}</td>
                    <td className="py-3 px-4 text-sm text-gray-600 hidden md:table-cell">
                      {formatDateShort(r.start_date)} — {formatDateShort(r.end_date)}
                    </td>
                    <td className="py-3 px-4 text-sm text-gray-900 text-center font-medium">{r.days_count}</td>
                    <td className="py-3 px-4 text-center">
                      <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium border ${STATUS_COLORS[r.status]}`}>
                        {STATUS_ICONS[r.status]}
                        {STATUS_LABELS[r.status]}
                      </span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {/* Empty state */}
      {pendingRequests.length === 0 && approvedRequests.length === 0 && (
        <div className="flex flex-col items-center justify-center py-16 text-center bg-white rounded-lg border border-gray-200">
          <div className="w-16 h-16 bg-gray-100 rounded-2xl flex items-center justify-center mb-4">
            <Calendar className="w-8 h-8 text-gray-300" />
          </div>
          <p className="text-sm text-gray-500 font-medium">No leave requests yet</p>
          <p className="text-xs text-gray-400 mt-1">Request time off or manage approvals here</p>
        </div>
      )}
    </div>
  );
}