"use client";

import { useState, useEffect, useCallback } from "react";
import { ArrowLeft, Loader2, Info } 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 { Textarea } from "@/components/ui/textarea";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import {
  fetchLeaveTypes,
  fetchEmployeeLeaveBalance,
  fetchEmployees,
  createLeaveRequest,
} from "@/lib/supabase/leave-actions";
import {
  calculateWorkingDays,
  formatDate,
  type LeaveType,
  type LeaveBalance,
} from "@/lib/supabase/leave-types";

export default function LeaveNewPage({
  onBack,
  onSuccess,
}: {
  onBack: () => void;
  onSuccess: () => void;
}) {
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [leaveTypes, setLeaveTypes] = useState<LeaveType[]>([]);
  const [employees, setEmployees] = useState<{ id: string; first_name: string; last_name: string; email: string; job_title: string | null }[]>([]);
  const [balances, setBalances] = useState<LeaveBalance[]>([]);

  const [employeeId, setEmployeeId] = useState("");
  const [leaveTypeId, setLeaveTypeId] = useState("");
  const [startDate, setStartDate] = useState("");
  const [endDate, setEndDate] = useState("");
  const [reason, setReason] = useState("");

  // Auto-calculate working days
  const workingDays = startDate && endDate ? calculateWorkingDays(startDate, endDate) : 0;

  // Get the selected leave type's remaining balance
  const selectedBalance = balances.find((b) => b.leave_type_id === leaveTypeId);
  const hasInsufficientBalance = selectedBalance && selectedBalance.remaining_days < workingDays;

  useEffect(() => {
    let cancelled = false;
    Promise.all([fetchLeaveTypes(), fetchEmployees()])
      .then(([types, emps]) => {
        if (!cancelled) {
          setLeaveTypes(types);
          setEmployees(emps);
        }
      })
      .catch(() => {});
    return () => { cancelled = true; };
  }, []);

  // Fetch balances when employee changes
  useEffect(() => {
    if (!employeeId) return;
    let cancelled = false;
    fetchEmployeeLeaveBalance(employeeId)
      .then((b) => { if (!cancelled) setBalances(b); })
      .catch(() => {});
    return () => { cancelled = true; };
  }, [employeeId]);

  const handleSubmit = async () => {
    setError(null);

    if (!employeeId) { setError("Please select an employee"); return; }
    if (!leaveTypeId) { setError("Please select a leave type"); return; }
    if (!startDate) { setError("Please select a start date"); return; }
    if (!endDate) { setError("Please select an end date"); return; }
    if (endDate < startDate) { setError("End date must be after start date"); return; }
    if (workingDays <= 0) { setError("No working days in selected range"); return; }

    setSaving(true);

    try {
      const result = await createLeaveRequest({
        employee_id: employeeId,
        leave_type_id: leaveTypeId,
        start_date: startDate,
        end_date: endDate,
        days_count: workingDays,
        reason: reason.trim() || undefined,
      });

      if (!result.success) {
        setError(result.error || "Failed to create leave request");
        return;
      }

      // Reset form
      setEmployeeId("");
      setLeaveTypeId("");
      setStartDate("");
      setEndDate("");
      setReason("");
      onSuccess();
    } catch (e: any) {
      setError(e.message || "An unexpected error occurred");
    } finally {
      setSaving(false);
    }
  };

  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>
          <h1 className="text-3xl font-serif font-bold text-gray-900">Request Leave</h1>
          <p className="text-gray-500 mt-1">Submit a new time-off request</p>
        </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>
      )}

      <Card className="border-0 shadow-sm">
        <CardContent className="p-6">
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            {/* Employee */}
            <div>
              <Label htmlFor="employee">Employee *</Label>
              <Select
                id="employee"
                value={employeeId}
                onChange={(e) => { setEmployeeId(e.target.value); setLeaveTypeId(""); setBalances([]); }}
                className="mt-1"
              >
                <option value="">Select employee</option>
                {employees.map((emp) => (
                  <option key={emp.id} value={emp.id}>
                    {emp.first_name} {emp.last_name}
                  </option>
                ))}
              </Select>
            </div>

            {/* Leave Type */}
            <div>
              <Label htmlFor="leaveType">Leave Type *</Label>
              <Select
                id="leaveType"
                value={leaveTypeId}
                onChange={(e) => setLeaveTypeId(e.target.value)}
                className="mt-1"
                disabled={!employeeId}
              >
                <option value="">Select leave type</option>
                {leaveTypes.map((lt) => (
                  <option key={lt.id} value={lt.id}>
                    {lt.name}
                  </option>
                ))}
              </Select>
            </div>

            {/* Start Date */}
            <div>
              <Label htmlFor="startDate">Start Date *</Label>
              <Input
                id="startDate"
                type="date"
                value={startDate}
                onChange={(e) => setStartDate(e.target.value)}
                className="mt-1"
              />
            </div>

            {/* End Date */}
            <div>
              <Label htmlFor="endDate">End Date *</Label>
              <Input
                id="endDate"
                type="date"
                value={endDate}
                onChange={(e) => setEndDate(e.target.value)}
                min={startDate}
                className="mt-1"
              />
            </div>

            {/* Reason */}
            <div className="sm:col-span-2">
              <Label htmlFor="reason">Reason</Label>
              <Textarea
                id="reason"
                value={reason}
                onChange={(e) => setReason(e.target.value)}
                className="mt-1"
                placeholder="Optional — provide context for this request"
                rows={2}
              />
            </div>
          </div>

          {/* Working days calculation + balance */}
          {startDate && endDate && (
            <div className="mt-6 p-4 bg-gray-50 rounded-lg space-y-2">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <Info className="w-4 h-4 text-gray-400" />
                  <span className="text-sm text-gray-600">
                    {formatDate(startDate)} — {formatDate(endDate)}
                  </span>
                </div>
                <Badge variant="outline" className="text-sm font-medium px-3 py-1">
                  {workingDays} working {workingDays === 1 ? "day" : "days"}
                </Badge>
              </div>

              {selectedBalance && (
                <div className="flex items-center justify-between pt-2 border-t border-gray-200">
                  <span className="text-xs text-gray-500">
                    {selectedBalance.leave_type_name} balance
                  </span>
                  <div className="flex items-center gap-3">
                    <span className="text-xs text-gray-500">
                      {selectedBalance.used_days} used / {selectedBalance.total_days_per_year} total
                    </span>
                    <span
                      className={`text-xs font-semibold ${
                        hasInsufficientBalance ? "text-red-600" : "text-emerald-600"
                      }`}
                    >
                      {selectedBalance.remaining_days} remaining
                    </span>
                  </div>
                </div>
              )}

              {hasInsufficientBalance && (
                <div className="text-xs text-amber-700 bg-amber-50 border border-amber-200 rounded px-3 py-2 mt-2">
                  Warning: This request exceeds the remaining balance for {selectedBalance.leave_type_name}.
                </div>
              )}
            </div>
          )}

          {/* Actions */}
          <div className="flex justify-end gap-3 mt-8 pt-6 border-t border-gray-100">
            <Button variant="outline" onClick={onBack} className="cursor-pointer">
              Cancel
            </Button>
            <Button
              onClick={handleSubmit}
              disabled={saving}
              className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-2 cursor-pointer"
            >
              {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : null}
              {saving ? "Submitting..." : "Submit Request"}
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}