"use client";

import { useState, useEffect, useCallback } from "react";
import { Clock, Plus, Calendar, Check, X, AlertTriangle } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { fetchEmployees } from "@/lib/supabase/employees-actions";
import { getUserPermissions } from "@/lib/supabase/rbac-actions";
import PageSkeleton from "./PageSkeleton";

export default function TimesheetPage() {
  const [loading, setLoading] = useState(true);
  const [canManage, setCanManage] = useState(false);
  const [employees, setEmployees] = useState<any[]>([]);
  const [timesheets, setTimesheets] = useState<any[]>([]);
  const [weekStart, setWeekStart] = useState(() => {
    const d = new Date();
    const day = d.getDay();
    d.setDate(d.getDate() - (day === 0 ? 6 : day - 1));
    return d.toISOString().split("T")[0];
  });
  const [showAddForm, setShowAddForm] = useState(false);
  const [selectedEmployee, setSelectedEmployee] = useState("");
  const [selectedDate, setSelectedDate] = useState("");
  const [hours, setHours] = useState("");
  const [notes, setNotes] = useState("");
  const [status, setStatus] = useState<"work" | "leave" | "sick">("work");
  const [saving, setSaving] = useState(false);

  useEffect(() => {
    let cancelled = false;
    Promise.all([
      fetchEmployees().catch(() => []),
      getUserPermissions().catch(() => ({ orgRole: "employee" })),
    ])
      .then(([emps, perms]) => {
        if (!cancelled) {
          setEmployees(emps);
          setCanManage(perms.orgRole === "owner" || perms.orgRole === "admin");
        }
      })
      .catch(() => {})
      .finally(() => { if (!cancelled) setLoading(false); });
    return () => { cancelled = true; };
  }, []);

  const weekDays = Array.from({ length: 5 }, (_, i) => {
    const d = new Date(weekStart + "T00:00:00");
    d.setDate(d.getDate() + i);
    return {
      date: d.toISOString().split("T")[0],
      day: d.toLocaleDateString("en-AU", { weekday: "short" }),
      dayNum: d.getDate(),
    };
  });

  const handleAdd = async () => {
    if (!selectedEmployee || !selectedDate || !hours) return;
    setSaving(true);
    // Stub: In a real app, save to timesheets table
    setTimesheets((prev) => [...prev, {
      id: Date.now().toString(),
      employee_id: selectedEmployee,
      date: selectedDate,
      hours: parseFloat(hours),
      notes,
      status,
      created_at: new Date().toISOString(),
    }]);
    setShowAddForm(false);
    setSelectedEmployee("");
    setSelectedDate("");
    setHours("");
    setNotes("");
    setStatus("work");
    setSaving(false);
  };

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

  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">Timesheets</h1>
          <p className="text-gray-500 mt-1">Track work hours and time off</p>
        </div>
        <div className="flex items-center gap-2">
          <input
            type="date"
            value={weekStart}
            onChange={(e) => setWeekStart(e.target.value)}
            className="border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-300"
          />
          {canManage && (
            <Button onClick={() => setShowAddForm(true)} className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-2 cursor-pointer">
              <Plus className="w-4 h-4" />
              Log Hours
            </Button>
          )}
        </div>
      </div>

      {/* Add Timesheet Modal */}
      {showAddForm && (
        <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50" onClick={() => setShowAddForm(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">
              <Clock className="w-4 h-4 text-teal-600" /> Log Hours
            </h3>
            <div>
              <label className="text-xs font-medium text-gray-600">Employee</label>
              <select value={selectedEmployee} onChange={(e) => setSelectedEmployee(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-teal-300">
                <option value="">Select employee</option>
                {employees.map((e) => <option key={e.id} value={e.id}>{e.first_name} {e.last_name}</option>)}
              </select>
            </div>
            <div>
              <label className="text-xs font-medium text-gray-600">Date</label>
              <input type="date" value={selectedDate} onChange={(e) => setSelectedDate(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-teal-300" />
            </div>
            <div>
              <label className="text-xs font-medium text-gray-600">Hours</label>
              <input type="number" min="0" max="24" step="0.5" value={hours} onChange={(e) => setHours(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-teal-300" placeholder="8" />
            </div>
            <div>
              <label className="text-xs font-medium text-gray-600">Type</label>
              <div className="flex gap-2 mt-1">
                {(["work", "leave", "sick"] as const).map((s) => (
                  <button key={s} onClick={() => setStatus(s)}
                    className={`flex-1 py-1.5 text-xs font-medium rounded-lg border cursor-pointer ${
                      status === s ? "bg-teal-50 border-teal-300 text-teal-700" : "border-gray-200 text-gray-500 hover:bg-gray-50"
                    }`}>
                    {s === "work" ? "Work" : s === "leave" ? "Leave" : "Sick"}
                  </button>
                ))}
              </div>
            </div>
            <div>
              <label className="text-xs font-medium text-gray-600">Notes</label>
              <textarea value={notes} onChange={(e) => setNotes(e.target.value)} rows={2}
                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-teal-300 resize-none"
                placeholder="Optional notes..." />
            </div>
            <div className="flex gap-2 pt-2 border-t border-gray-100">
              <Button variant="outline" onClick={() => setShowAddForm(false)} className="flex-1 cursor-pointer text-xs">Cancel</Button>
              <Button onClick={handleAdd} disabled={saving} className="flex-1 bg-[#1D9E75] hover:bg-[#1a8b66] text-white text-xs cursor-pointer">
                {saving ? "Saving..." : "Save"}
              </Button>
            </div>
          </div>
        </div>
      )}

      {/* Week Grid */}
      <div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
        <div className="grid grid-cols-5 divide-x divide-gray-100 border-b border-gray-100">
          {weekDays.map((day) => (
            <div key={day.date} className="p-3 text-center">
              <p className="text-xs text-gray-400 uppercase">{day.day}</p>
              <p className="text-lg font-bold text-gray-900">{day.dayNum}</p>
            </div>
          ))}
        </div>
        {employees.map((emp) => {
          const empTimesheets = timesheets.filter((t) => t.employee_id === emp.id);
          const totalHours = empTimesheets.reduce((sum, t) => sum + t.hours, 0);
          return (
            <div key={emp.id} className="grid grid-cols-5 divide-x divide-gray-100 border-b border-gray-50 hover:bg-gray-50/50 transition-colors">
              {weekDays.map((day) => {
                const entry = empTimesheets.find((t) => t.date === day.date);
                return (
                  <div key={day.date} className="p-3 min-h-[60px] flex flex-col justify-center">
                    {entry ? (
                      <div>
                        <div className="flex items-center gap-1.5">
                          <Badge variant="outline" className={`text-[10px] border ${
                            entry.status === "work" ? "bg-teal-50 text-teal-700 border-teal-200" :
                            entry.status === "leave" ? "bg-amber-50 text-amber-700 border-amber-200" :
                            "bg-red-50 text-red-700 border-red-200"
                          }`}>
                            {entry.hours}h
                          </Badge>
                        </div>
                        {entry.notes && <p className="text-[10px] text-gray-400 mt-0.5 truncate">{entry.notes}</p>}
                      </div>
                    ) : (
                      <span className="text-[10px] text-gray-200">—</span>
                    )}
                  </div>
                );
              })}
            </div>
          );
        })}
        {/* Totals Row */}
        <div className="grid grid-cols-5 divide-x divide-gray-100 bg-gray-50">
          {weekDays.map((day) => {
            const dayTotal = timesheets.filter((t) => t.date === day.date).reduce((sum, t) => sum + t.hours, 0);
            return (
              <div key={day.date} className="p-3 text-center">
                <p className="text-xs font-semibold text-gray-700">{dayTotal > 0 ? `${dayTotal}h` : "—"}</p>
              </div>
            );
          })}
        </div>
      </div>

      {timesheets.length === 0 && (
        <div className="text-center py-12">
          <Clock className="w-8 h-8 text-gray-200 mx-auto mb-3" />
          <p className="text-sm text-gray-400 font-medium">No timesheet entries this week</p>
          <p className="text-xs text-gray-300 mt-1">Click "Log Hours" to add entries</p>
        </div>
      )}
    </div>
  );
}