'use client';
import { useState } from 'react';
import HODLayout from '../../../components/HODLayout';
import { useAuth } from '../../../lib/authContext';
import { useLeaveStore } from '../../../lib/leaveStore';
import { downloadLeaveComputationForm } from '../../../lib/leaveComputationForm';
import { LEAVE_POLICIES, computeEmployeeBalance, getAvailableLeaveTypes } from '../../hr/leave/leaveData';

const BRAND = '#B22698';

const STATUS_CONFIG: Record<string, { color: string; bg: string; icon: string }> = {
  Pending: { color: '#d97706', bg: '#fef3c7', icon: 'ri-time-line' },
  'Pending Review': { color: '#7c3aed', bg: '#ede9fe', icon: 'ri-refresh-line' },
  'HOD Approved': { color: BRAND, bg: '#fce7f3', icon: 'ri-shield-check-line' },
  'HOS Approved': { color: '#059669', bg: '#d1fae5', icon: 'ri-check-double-line' },
  Approved: { color: '#16a34a', bg: '#dcfce7', icon: 'ri-checkbox-circle-line' },
  Rejected: { color: '#dc2626', bg: '#fee2e2', icon: 'ri-close-circle-line' },
};

// Helper function to calculate working days between two dates (weekdays only)
const calculateWorkingDays = (startDate: string, endDate: string): number => {
  let start = new Date(startDate);
  let end = new Date(endDate);
  let days = 0;
  let current = new Date(start);
  while (current <= end) {
    const dayOfWeek = current.getDay();
    if (dayOfWeek !== 0 && dayOfWeek !== 6) {
      days++;
    }
    current.setDate(current.getDate() + 1);
  }
  return days;
};

// Helper to calculate max allowed end date based on remaining days
const calculateMaxEndDate = (startDate: string, maxDays: number): string => {
  let start = new Date(startDate);
  let end = new Date(start);
  let daysCount = 0;
  while (daysCount < maxDays) {
    end.setDate(end.getDate() + 1);
    const dow = end.getDay();
    if (dow !== 0 && dow !== 6) daysCount++;
  }
  return end.toISOString().split('T')[0];
};

export default function HODRequestsPage() {
  const { user } = useAuth();
  const { requests, updateRequests } = useLeaveStore();
  const [toast, setToast] = useState('');
  const [reviewModal, setReviewModal] = useState<string | null>(null);
  const [reviewComment, setReviewComment] = useState('');
  const [reviewNewStart, setReviewNewStart] = useState('');
  const [reviewNewEnd, setReviewNewEnd] = useState('');
  const [statusFilter, setStatusFilter] = useState('All');
  const [selectedRequest, setSelectedRequest] = useState<any>(null);
  const [remainingBalance, setRemainingBalance] = useState<number>(0);
  const [suggestedDays, setSuggestedDays] = useState<number>(0);
  const [exceedsBalance, setExceedsBalance] = useState<boolean>(false);

  if (!user) return null;

  const showToast = (msg: string, type?: 'success' | 'error') => { 
    setToast(msg); 
    setTimeout(() => setToast(''), 3500);
  };

  const deptRequests = requests.filter(r => r.dept === user.dept);
  const filtered = statusFilter === 'All' ? deptRequests : deptRequests.filter(r => r.status === statusFilter);
  const pendingCount = deptRequests.filter(r => r.status === 'Pending').length;

  const handleApprove = (id: string) => {
    const req = requests.find(r => r.id === id);
    if (!req) return;
    updateRequests(prev => prev.map(r =>
      r.id === id && (r.status === 'Pending' || r.status === 'Pending Review')
        ? { ...r, status: 'HOD Approved' as const, hodApprovedBy: `${user.name} (HOD-${user.dept})`, hodApprovedOn: new Date().toISOString().split('T')[0], reviewComment: undefined, reviewRequested: false }
        : r
    ));
    showToast('Approved and forwarded to HOS for review.', 'success');
  };

  const openReviewModal = (req: any) => {
    setSelectedRequest(req);
    
    // Calculate remaining balance for this employee and leave type
    const isIntern = req.employeeType === 'Intern';
    const employeeGender = req.employeeGender || 'Male';
    const balance = computeEmployeeBalance(req.employeeId, req.type, isIntern, requests);
    const maxDays = balance.remaining;
    setRemainingBalance(maxDays);
    
    // Initialize with suggested dates from review or original dates
    const startDate = req.reviewNewStart || req.startDate;
    const endDate = req.reviewNewEnd || req.endDate;
    setReviewNewStart(startDate);
    setReviewNewEnd(endDate);
    
    // Calculate days between selected dates
    const days = calculateWorkingDays(startDate, endDate);
    setSuggestedDays(days);
    setExceedsBalance(days > maxDays);
    
    setReviewComment(req.reviewComment || '');
    setReviewModal(req.id);
  };

  const handleStartDateChange = (value: string) => {
    setReviewNewStart(value);
    
    if (reviewNewEnd && value <= reviewNewEnd) {
      const days = calculateWorkingDays(value, reviewNewEnd);
      setSuggestedDays(days);
      setExceedsBalance(days > remainingBalance);
      
      if (days > remainingBalance) {
        // Suggest a valid end date
        const maxEndDate = calculateMaxEndDate(value, remainingBalance);
        setReviewNewEnd(maxEndDate);
        const newDays = calculateWorkingDays(value, maxEndDate);
        setSuggestedDays(newDays);
        setExceedsBalance(false);
        showToast(`Adjusted to ${remainingBalance} days (maximum available)`, 'error');
      }
    } else if (reviewNewEnd && value > reviewNewEnd) {
      // If start > end, set end to start + remaining days
      const maxEndDate = calculateMaxEndDate(value, remainingBalance);
      setReviewNewEnd(maxEndDate);
      const days = calculateWorkingDays(value, maxEndDate);
      setSuggestedDays(days);
      setExceedsBalance(false);
    } else {
      setSuggestedDays(0);
      setExceedsBalance(false);
    }
  };

  const handleEndDateChange = (value: string) => {
    setReviewNewEnd(value);
    
    if (reviewNewStart && value >= reviewNewStart) {
      const days = calculateWorkingDays(reviewNewStart, value);
      setSuggestedDays(days);
      const exceeds = days > remainingBalance;
      setExceedsBalance(exceeds);
      
      if (exceeds) {
        showToast(`Suggested days (${days}) exceed remaining balance (${remainingBalance} days). Please adjust.`, 'error');
      }
    } else if (reviewNewStart && value < reviewNewStart) {
      setSuggestedDays(0);
      setExceedsBalance(false);
      showToast('End date must be after start date', 'error');
    }
  };

  const handleRequestReview = () => {
    if (!reviewModal || !reviewComment.trim()) {
      showToast('Please provide a review comment', 'error');
      return;
    }
    
    // Validate that suggested days don't exceed remaining balance
    if (exceedsBalance || suggestedDays > remainingBalance) {
      showToast(`Cannot approve: Suggested days (${suggestedDays}) exceed remaining balance (${remainingBalance} days)`, 'error');
      return;
    }
    
    if (suggestedDays <= 0) {
      showToast('Please select valid dates', 'error');
      return;
    }
    
    updateRequests(prev => prev.map(r =>
      r.id === reviewModal
        ? { 
            ...r, 
            status: 'Pending Review' as const, 
            reviewComment: reviewComment, 
            reviewNewStart: reviewNewStart || undefined, 
            reviewNewEnd: reviewNewEnd || undefined, 
            reviewRequested: true, 
            reviewBy: `${user.name} (HOD-${user.dept})`,
            reviewDate: new Date().toISOString().split('T')[0],
            hodApprovedBy: undefined, 
            hodApprovedOn: undefined 
          }
        : r
    ));
    
    setReviewModal(null);
    setReviewComment('');
    setReviewNewStart('');
    setReviewNewEnd('');
    setSuggestedDays(0);
    setRemainingBalance(0);
    setSelectedRequest(null);
    setExceedsBalance(false);
    showToast('Review requested. Employee has been notified to review and resubmit with changes.', 'success');
  };

  const getBalanceColor = (balance: number) => {
    if (balance <= 0) return 'text-red-600 font-bold';
    if (balance <= 3) return 'text-amber-600 font-semibold';
    return 'text-green-600';
  };

  return (
    <HODLayout title="Staff Leave Requests">
      {toast && (
        <div className="fixed top-20 right-6 z-[100] text-white px-5 py-3 rounded-xl shadow-lg flex items-center gap-2" style={{ background: BRAND }}>
          <i className="ri-checkbox-circle-line"></i>
          <span className="text-sm font-medium">{toast}</span>
        </div>
      )}

      <div className="space-y-5">
        <div className="flex items-center justify-between">
          <div>
            <h2 className="text-lg font-bold text-gray-800">{user.dept} Department — Leave Requests</h2>
            <p className="text-sm text-gray-500">Review and approve/review requests from your staff</p>
          </div>
          {pendingCount > 0 && (
            <div className="flex items-center gap-2 bg-pink-50 border rounded-xl px-4 py-2" style={{ borderColor: BRAND }}>
              <i className="ri-alarm-warning-line" style={{ color: BRAND }}></i>
              <span className="text-sm font-semibold" style={{ color: BRAND }}>{pendingCount} request{pendingCount > 1 ? 's' : ''} need your action</span>
            </div>
          )}
        </div>

        <div className="flex gap-2 flex-wrap">
          {['All', 'Pending', 'Pending Review', 'HOD Approved', 'HOS Approved', 'Approved', 'Rejected'].map(s => (
            <button key={s} onClick={() => setStatusFilter(s)}
              className="px-3 py-1.5 rounded-full text-xs font-semibold cursor-pointer whitespace-nowrap transition-all"
              style={statusFilter === s ? { background: BRAND, color: '#fff' } : { background: '#f3f4f6', color: '#4b5563' }}>
              {s}{s === 'Pending' && pendingCount > 0 ? ` (${pendingCount})` : ''}
            </button>
          ))}
        </div>

        <div className="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
          {filtered.length === 0 ? (
            <div className="py-16 text-center text-gray-400">
              <i className="ri-file-list-3-line text-5xl block mb-3 text-gray-200"></i>
              <p>No requests found for this filter</p>
            </div>
          ) : (
            <div className="overflow-x-auto">
              <table className="w-full text-sm">
                <thead>
                  <tr className="bg-gray-50 border-b border-gray-100">
                    <th className="text-left px-5 py-3 text-xs font-semibold text-gray-500 uppercase">Employee</th>
                    <th className="text-left px-4 py-3 text-xs font-semibold text-gray-500 uppercase">Leave Type</th>
                    <th className="text-left px-4 py-3 text-xs font-semibold text-gray-500 uppercase">Period</th>
                    <th className="text-center px-4 py-3 text-xs font-semibold text-gray-500 uppercase">Days</th>
                    <th className="text-left px-4 py-3 text-xs font-semibold text-gray-500 uppercase">Reason</th>
                    <th className="text-left px-4 py-3 text-xs font-semibold text-gray-500 uppercase">Status</th>
                    <th className="text-right px-4 py-3 text-xs font-semibold text-gray-500 uppercase">Actions</th>
                  </tr>
                </thead>
                <tbody>
                  {filtered.map(req => {
                    const st = STATUS_CONFIG[req.status] || STATUS_CONFIG['Pending'];
                    const policy = LEAVE_POLICIES.find(p => p.type === req.type);
                    const isIntern = req.employeeType === 'Intern';
                    const balance = computeEmployeeBalance(req.employeeId, req.type, isIntern, requests);
                    const balanceColor = getBalanceColor(balance.remaining);
                    
                    return (
                      <tr key={req.id} className="border-b border-gray-50 hover:bg-gray-50/50">
                        <td className="px-5 py-3">
                          <div className="flex items-center gap-2">
                            <div className="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0" style={{ background: BRAND }}>
                              {req.employee.split(' ').map(n => n[0]).join('').slice(0, 2)}
                            </div>
                            <div>
                              <p className="font-medium text-gray-800">{req.employee}</p>
                              <p className="text-xs text-gray-400">{req.position}</p>
                              <p className={`text-xs mt-0.5 ${balanceColor}`}>
                                Balance: {balance.remaining} day{balance.remaining !== 1 ? 's' : ''} left
                              </p>
                            </div>
                          </div>
                        </td>
                        <td className="px-4 py-3">
                          <div className="flex items-center gap-1.5">
                            <div className="w-2 h-2 rounded-full" style={{ background: policy?.color }}></div>
                            <span className="text-gray-700">{policy?.label}</span>
                          </div>
                        </td>
                        <td className="px-4 py-3 text-gray-600 text-xs">
                          <p>{req.startDate}</p>
                          <p className="text-gray-400">to {req.endDate}</p>
                        </td>
                        <td className="px-4 py-3 text-center font-bold text-gray-800">{req.days}</td>
                        <td className="px-4 py-3 text-xs text-gray-500 max-w-[150px] truncate">{req.reason}</td>
                        <td className="px-4 py-3">
                          <span className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold whitespace-nowrap"
                            style={{ color: st.color, background: st.bg }}>
                            <i className={st.icon}></i> {req.status}
                          </span>
                          {req.reviewComment && (
                            <p className="text-xs text-violet-600 mt-0.5 max-w-[150px]"><i className="ri-refresh-line mr-0.5"></i>{req.reviewComment}</p>
                          )}
                          {req.hodApprovedBy && req.status !== 'Pending' && req.status !== 'Pending Review' && (
                            <p className="text-xs text-gray-400 mt-0.5">HOD: {req.hodApprovedOn}</p>
                          )}
                        </td>
                        <td className="px-4 py-3 text-right">
                          {req.status === 'Pending' || req.status === 'Pending Review' ? (
                            <div className="flex items-center justify-end gap-1">
                              <button onClick={() => handleApprove(req.id)}
                                className="flex items-center gap-1 px-3 py-1.5 rounded-lg text-white hover:opacity-90 cursor-pointer text-xs font-semibold whitespace-nowrap"
                                style={{ background: BRAND }}>
                                <i className="ri-check-line"></i> Approve → HOS
                              </button>
                              <button onClick={() => openReviewModal(req)}
                                className="flex items-center gap-1 px-3 py-1.5 rounded-lg bg-amber-50 text-amber-600 hover:bg-amber-100 cursor-pointer text-xs font-semibold whitespace-nowrap">
                                <i className="ri-edit-line"></i> Request Review
                              </button>
                            </div>
                          ) : (
                            <div className="flex items-center justify-end gap-1">
                              {(req.status === 'HOS Approved' || req.status === 'Approved') && (
                                <button onClick={() => downloadLeaveComputationForm(req)}
                                  className="flex items-center gap-1 px-2 py-1 rounded-lg bg-blue-50 text-blue-600 hover:bg-blue-100 cursor-pointer text-xs font-medium whitespace-nowrap">
                                  <i className="ri-file-pdf-line"></i> Computation
                                </button>
                              )}
                              {!(req.status === 'HOS Approved' || req.status === 'Approved') && (
                                <span className="text-xs text-gray-400 px-2">Awaiting HOS</span>
                              )}
                            </div>
                          )}
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          )}
        </div>
      </div>

      {/* Review Modal with Balance Validation */}
      {reviewModal && selectedRequest && (
        <div className="fixed inset-0 bg-black/40 z-50 flex items-center justify-center p-4">
          <div className="bg-white rounded-2xl shadow-2xl w-full max-w-md p-6">
            <h3 className="font-bold text-gray-800 mb-1">Request Review</h3>
            <p className="text-sm text-gray-500 mb-4">Ask the employee to review and resubmit. Cannot reject, only request changes.</p>
            
            <div className="bg-blue-50 rounded-lg p-3 mb-4 border border-blue-200">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-xs font-semibold text-blue-800">Employee Leave Balance</p>
                  <p className="text-lg font-bold text-blue-900">
                    {selectedRequest.employee}
                  </p>
                </div>
                <div className="text-right">
                  <p className="text-xs text-blue-600">Remaining Days</p>
                  <p className={`text-2xl font-bold ${remainingBalance <= 3 ? 'text-red-600' : 'text-blue-700'}`}>
                    {remainingBalance}
                  </p>
                </div>
              </div>
              <p className="text-xs text-blue-600 mt-2">
                Leave Type: {LEAVE_POLICIES.find(p => p.type === selectedRequest.type)?.label}
              </p>
              {remainingBalance <= 0 && (
                <p className="text-xs text-red-600 mt-2 font-semibold">
                  ⚠️ Employee has no remaining leave days for this type
                </p>
              )}
            </div>
            
            <div className="space-y-3">
              <div>
                <label className="block text-xs font-semibold text-gray-600 mb-1">Review Comment *</label>
                <textarea 
                  value={reviewComment} 
                  onChange={e => setReviewComment(e.target.value)} 
                  rows={3}
                  placeholder="Specify what needs review, e.g. dates or number of days..."
                  className="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm outline-none resize-none focus:border-purple-400 focus:ring-1 focus:ring-purple-400" 
                />
              </div>
              
              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block text-xs font-semibold text-gray-600 mb-1">Suggested Start Date</label>
                  <input 
                    type="date" 
                    value={reviewNewStart} 
                    min={new Date().toISOString().split('T')[0]}
                    onChange={e => handleStartDateChange(e.target.value)}
                    className="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm outline-none focus:border-purple-400" 
                  />
                </div>
                <div>
                  <label className="block text-xs font-semibold text-gray-600 mb-1">Suggested End Date</label>
                  <input 
                    type="date" 
                    value={reviewNewEnd} 
                    min={reviewNewStart}
                    onChange={e => handleEndDateChange(e.target.value)}
                    className="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm outline-none focus:border-purple-400" 
                  />
                </div>
              </div>
              
              {suggestedDays > 0 && (
                <div className={`text-sm px-3 py-2 rounded-lg flex items-center justify-between ${
                  exceedsBalance ? 'bg-red-100 text-red-700 border border-red-300' : 'bg-green-100 text-green-700 border border-green-300'
                }`}>
                  <span>{suggestedDays} day(s) selected</span>
                  {exceedsBalance && (
                    <span className="text-xs font-semibold">
                      Exceeds balance by {suggestedDays - remainingBalance} days
                    </span>
                  )}
                  {!exceedsBalance && remainingBalance > 0 && suggestedDays <= remainingBalance && (
                    <span className="text-xs font-semibold">
                      ✓ Available in balance
                    </span>
                  )}
                </div>
              )}
              
              {exceedsBalance && (
                <div className="bg-red-50 border border-red-200 rounded-lg p-2">
                  <p className="text-xs text-red-700">
                    <i className="ri-error-warning-line mr-1"></i>
                    Cannot submit: Suggested days ({suggestedDays}) exceed remaining balance ({remainingBalance} days)
                  </p>
                </div>
              )}
            </div>
            
            <div className="flex gap-3 mt-4">
              <button 
                onClick={() => {
                  setReviewModal(null);
                  setReviewComment('');
                  setReviewNewStart('');
                  setReviewNewEnd('');
                  setSuggestedDays(0);
                  setRemainingBalance(0);
                  setSelectedRequest(null);
                  setExceedsBalance(false);
                }}
                className="flex-1 py-2.5 border border-gray-200 rounded-xl text-sm text-gray-600 cursor-pointer whitespace-nowrap hover:bg-gray-50">
                Cancel
              </button>
              <button 
                onClick={handleRequestReview} 
                disabled={!reviewComment.trim() || exceedsBalance || suggestedDays <= 0 || remainingBalance <= 0}
                className="flex-1 py-2.5 text-white rounded-xl text-sm font-semibold cursor-pointer disabled:opacity-50 whitespace-nowrap"
                style={{ background: BRAND }}>
                Send Review Request
              </button>
            </div>
            
            {remainingBalance <= 0 && (
              <p className="text-xs text-red-600 text-center mt-3">
                ⚠️ Cannot request review - employee has no remaining leave days
              </p>
            )}
          </div>
        </div>
      )}
    </HODLayout>
  );
}