'use client';
import { useState } from 'react';
import { useAuth } from '../../../lib/authContext';
import InternLayout from '../../../components/InternLayout';
import { useLeaveStore } from '../../../lib/leaveStore';
import {
  LEAVE_POLICIES, LeaveRequest,
  isCurrentlyOnLeave, getUpcomingLeave, getAvailableLeaveTypes, calculateDays, getMinStartDate
} from '../../hr/leave/leaveData';
import NewLeaveRequestModal from '../../hr/leave/NewLeaveRequestModal';
import LeavePolicyTab from '../../hr/leave/LeavePolicyTab';
import LeaveCalendarTab from '../../hr/leave/LeaveCalendarTab';
import { downloadLeaveComputationForm, downloadLeaveComputationFormWord } from '../../../lib/leaveComputationForm';

type TabKey = 'overview' | 'history' | 'calendar' | 'policy';

const STATUS_CONFIG: Record<string, { color: string; bg: string }> = {
  Pending: { color: '#d97706', bg: '#fef3c7' },
  'Pending Review': { color: '#7c3aed', bg: '#ede9fe' },
  'HOD Approved': { color: '#2563eb', bg: '#dbeafe' },
  'HOS Approved': { color: '#059669', bg: '#d1fae5' },
  Approved: { color: '#16a34a', bg: '#dcfce7' },
  Rejected: { color: '#dc2626', bg: '#fee2e2' },
  Cancelled: { color: '#6b7280', bg: '#f3f4f6' },
};

interface EditResubmitModalProps {
  request: LeaveRequest;
  allRequests: LeaveRequest[];
  onClose: () => void;
  onResubmit: (updated: LeaveRequest) => void;
}

function EditResubmitModal({ request, allRequests, onClose, onResubmit }: EditResubmitModalProps) {
  const today = new Date().toISOString().split('T')[0];
  const minStart = getMinStartDate(request.type);
  const [form, setForm] = useState({
    startDate: request.reviewNewStart || request.startDate,
    endDate: request.reviewNewEnd || request.endDate,
    reason: request.reason,
  });
  const [errors, setErrors] = useState<string[]>([]);
  const days = calculateDays(form.startDate, form.endDate);
  const policy = LEAVE_POLICIES.find(p => p.type === request.type);

  const handleSubmit = () => {
    const errs: string[] = [];
    if (!form.startDate || !form.endDate) errs.push('Please select both start and end dates.');
    if (form.endDate < form.startDate) errs.push('End date must be after start date.');
    if (days <= 0) errs.push('Invalid date range.');
    if (errs.length > 0) { setErrors(errs); return; }

    const updated: LeaveRequest = {
      ...request,
      startDate: form.startDate,
      endDate: form.endDate,
      days,
      reason: form.reason,
      status: 'Pending',
      reviewComment: undefined,
      reviewRequested: false,
      reviewBy: undefined,
      reviewDate: undefined,
      reviewNewStart: undefined,
      reviewNewEnd: undefined,
      hodApprovedBy: undefined,
      hodApprovedOn: undefined,
      submittedOn: today,
    };
    onResubmit(updated);
  };

  return (
    <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-lg">
        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-100" style={{ background: '#7c3aed' }}>
          <div>
            <h3 className="font-bold text-white">Edit & Resubmit Leave Request</h3>
            <p className="text-violet-200 text-xs mt-0.5">{request.id} — {policy?.label}</p>
          </div>
          <button onClick={onClose} className="w-8 h-8 flex items-center justify-center cursor-pointer">
            <i className="ri-close-line text-white text-xl"></i>
          </button>
        </div>

        <div className="p-6 space-y-4">
          {request.reviewComment && (
            <div className="bg-violet-50 border border-violet-200 rounded-xl px-4 py-3">
              <p className="text-xs font-semibold text-violet-700 mb-1">Review Comment from {request.reviewBy || 'HOD/HOS'}:</p>
              <p className="text-sm text-violet-800">{request.reviewComment}</p>
              {request.reviewNewStart && request.reviewNewEnd && (
                <p className="text-xs text-violet-600 mt-1">Suggested dates: {request.reviewNewStart} → {request.reviewNewEnd}</p>
              )}
            </div>
          )}

          {errors.length > 0 && (
            <div className="bg-red-50 border border-red-200 rounded-xl px-4 py-3 space-y-1">
              {errors.map((e, i) => (
                <p key={i} className="text-xs text-red-700"><i className="ri-error-warning-line mr-1"></i>{e}</p>
              ))}
            </div>
          )}

          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="block text-xs font-semibold text-gray-600 mb-1.5">Start Date *</label>
              <input type="date" value={form.startDate} min={minStart}
                onChange={e => setForm(f => ({ ...f, startDate: e.target.value }))}
                className="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm outline-none" />
            </div>
            <div>
              <label className="block text-xs font-semibold text-gray-600 mb-1.5">End Date *</label>
              <input type="date" value={form.endDate} min={form.startDate}
                onChange={e => setForm(f => ({ ...f, endDate: e.target.value }))}
                className="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm outline-none" />
            </div>
          </div>

          {days > 0 && (
            <div className="bg-blue-50 text-blue-700 text-sm px-4 py-2.5 rounded-lg flex items-center gap-2">
              <i className="ri-calendar-check-line"></i>
              <span>{days} day(s) selected</span>
            </div>
          )}

          {request.type !== 'Annual' && (
            <div>
              <label className="block text-xs font-semibold text-gray-600 mb-1.5">Reason</label>
              <textarea value={form.reason} onChange={e => setForm(f => ({ ...f, reason: e.target.value }))} rows={3}
                className="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm outline-none resize-none" />
            </div>
          )}
        </div>

        <div className="px-6 py-4 border-t border-gray-100 flex gap-3 justify-end">
          <button onClick={onClose}
            className="px-4 py-2.5 border border-gray-200 rounded-xl text-sm text-gray-600 cursor-pointer whitespace-nowrap">Cancel</button>
          <button onClick={handleSubmit}
            className="px-6 py-2.5 text-white rounded-xl text-sm font-semibold cursor-pointer whitespace-nowrap"
            style={{ background: '#7c3aed' }}>
            <i className="ri-send-plane-line mr-1"></i> Resubmit Request
          </button>
        </div>
      </div>
    </div>
  );
}

export default function InternLeavePage() {
  const { user } = useAuth();
  const { requests, updateRequests } = useLeaveStore();
  const [showNew, setShowNew] = useState(false);
  const [activeTab, setActiveTab] = useState<TabKey>('overview');
  const [toast, setToast] = useState('');
  const [editRequest, setEditRequest] = useState<LeaveRequest | null>(null);

  if (!user) return null;

  const empId = user.employeeId || 'UF006';
  const empName = user.name;
  const empDept = user.dept || 'HR';
  const empGender: 'Male' | 'Female' = (user as any).gender || 'Female';

  // Calculate balances based on APPROVED leaves only
  const myBalances = getAvailableLeaveTypes(empGender, true).map(type => {
    const policy = LEAVE_POLICIES.find(p => p.type === type);
    if (!policy) return { type, entitlement: 0, taken: 0, remaining: 0, icon: 'ri-calendar-line', color: '#9ca3af', label: type };
    
    // Only count APPROVED or HOS Approved leaves towards taken days
    const approvedRequests = requests.filter(r => 
      r.employeeId === empId && 
      r.type === type && 
      (r.status === 'Approved' || r.status === 'HOS Approved')
    );
    
    const taken = approvedRequests.reduce((sum, r) => sum + (r.days || 0), 0);
    const entitlement = true ? policy!.internEntitlement : policy!.entitlement;
    const remaining = Math.max(0, entitlement - taken);
    
    return { 
      type, 
      entitlement, 
      taken, 
      remaining,
      icon: policy!.icon || 'ri-calendar-line',
      color: policy!.color || '#9ca3af',
      label: policy!.label || type
    };
  });

  const myRequests = requests.filter(r => r.employeeId === empId);
  const currentLeave = isCurrentlyOnLeave(empId, requests);
  const upcomingLeave = getUpcomingLeave(empId, requests);

  const pendingReviews = myRequests.filter(r => r.status === 'Pending Review');
  const pendingCount = myRequests.filter(r => r.status === 'Pending' || r.status === 'HOD Approved' || r.status === 'HOS Approved').length;

  const showToast = (msg: string) => { setToast(msg); setTimeout(() => setToast(''), 3500); };

  const handleSubmit = (req: LeaveRequest) => {
    updateRequests(prev => [req, ...prev]);
    setShowNew(false);
    showToast('Leave request submitted! Forwarded to HOD for review.');
  };

  const handleResubmit = (updated: LeaveRequest) => {
    updateRequests(prev => prev.map(r => r.id === updated.id ? updated : r));
    setEditRequest(null);
    showToast('Leave request resubmitted! Forwarded to HOD for review.');
  };

  const TABS = [
    { key: 'overview' as TabKey, label: 'Overview', icon: 'ri-dashboard-line' },
    { key: 'history' as TabKey, label: 'My Requests', icon: 'ri-file-list-3-line' },
    { key: 'calendar' as TabKey, label: 'My Calendar', icon: 'ri-calendar-2-line' },
    { key: 'policy' as TabKey, label: 'Leave Policy', icon: 'ri-book-open-line' },
  ];

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

      <div className="flex items-center justify-between mb-5">
        <div>
          <h2 className="text-lg font-bold text-gray-800">Leave Management</h2>
          <p className="text-sm text-gray-500">Intern leave: 15 days annual. Workflow: HOD → HOS → HR</p>
        </div>
        <button onClick={() => setShowNew(true)}
          className="flex items-center gap-2 text-white px-4 py-2.5 rounded-xl text-sm font-semibold cursor-pointer whitespace-nowrap"
          style={{ background: '#b828a0' }}>
          <i className="ri-add-line"></i> New Request
        </button>
      </div>

      {/* Review notifications */}
      {pendingReviews.length > 0 && (
        <div className="space-y-3 mb-5">
          {pendingReviews.map(r => (
            <div key={r.id} className="bg-violet-50 border border-violet-200 rounded-xl px-4 py-3 flex items-start gap-3">
              <div className="w-8 h-8 flex items-center justify-center rounded-full bg-violet-100 flex-shrink-0">
                <i className="ri-refresh-line text-violet-600"></i>
              </div>
              <div className="flex-1">
                <p className="text-sm font-semibold text-violet-800">Review Required — {r.id}</p>
                <p className="text-xs text-violet-600 mt-0.5">
                  {r.reviewBy || 'HOD/HOS'} requested a review on {r.reviewDate}:
                </p>
                <p className="text-xs text-violet-700 mt-1 bg-white/60 rounded-lg px-3 py-2">{r.reviewComment}</p>
                {r.reviewNewStart && r.reviewNewEnd && (
                  <p className="text-xs text-violet-500 mt-1">
                    Suggested dates: {r.reviewNewStart} → {r.reviewNewEnd}
                  </p>
                )}
                <button onClick={() => setEditRequest(r)}
                  className="mt-2 flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-white text-xs font-semibold cursor-pointer whitespace-nowrap"
                  style={{ background: '#7c3aed' }}>
                  <i className="ri-edit-line"></i> Edit & Resubmit
                </button>
              </div>
            </div>
          ))}
        </div>
      )}

      {/* Leave days remaining alert */}
      {myBalances.some(b => b.remaining <= 3 && b.entitlement > 0) && (
        <div className="bg-amber-50 border border-amber-200 rounded-xl px-4 py-3 flex items-start gap-3 mb-5">
          <i className="ri-alarm-warning-line text-amber-600 mt-0.5"></i>
          <div>
            <p className="text-sm font-semibold text-amber-800">Low Leave Balance</p>
            {myBalances.filter(b => b.remaining <= 3 && b.entitlement > 0).map(b => (
              <p key={b.type} className="text-xs text-amber-700 mt-0.5">
                {b.label}: only {b.remaining} day{b.remaining !== 1 ? 's' : ''} remaining
              </p>
            ))}
          </div>
        </div>
      )}

      <div className="flex items-center gap-1 flex-wrap mb-5 bg-white border border-gray-100 rounded-2xl px-2 py-2 shadow-sm">
        {TABS.map(tab => (
          <button key={tab.key} onClick={() => setActiveTab(tab.key)}
            className="flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-medium cursor-pointer whitespace-nowrap transition-all"
            style={activeTab === tab.key ? { background: '#b828a0', color: '#fff' } : { color: '#6b7280' }}>
            <i className={tab.icon}></i>
            {tab.label}
          </button>
        ))}
      </div>

      {activeTab === 'overview' && (
        <div className="space-y-5">
          <div className="grid grid-cols-3 gap-4">
            <div className={`rounded-2xl p-5 border-2 ${currentLeave ? 'border-green-300 bg-green-50' : 'border-gray-200 bg-white'}`}>
              <div className="flex items-center gap-3 mb-3">
                <div className={`w-10 h-10 rounded-xl flex items-center justify-center ${currentLeave ? 'bg-green-500' : 'bg-gray-200'}`}>
                  <i className={`${currentLeave ? 'ri-user-follow-line' : 'ri-user-line'} text-white text-lg`}></i>
                </div>
                <div>
                  <p className="text-xs text-gray-500 font-medium">Current Status</p>
                  <p className={`text-sm font-bold ${currentLeave ? 'text-green-700' : 'text-gray-700'}`}>
                    {currentLeave ? 'ON LEAVE' : 'NOT ON LEAVE'}
                  </p>
                </div>
              </div>
            </div>

            <div className="rounded-2xl p-5 border border-gray-200 bg-white">
              <div className="flex items-center gap-3 mb-3">
                <div className="w-10 h-10 rounded-xl flex items-center justify-center" style={{ background: '#b828a0' }}>
                  <i className="ri-calendar-event-line text-white text-lg"></i>
                </div>
                <div>
                  <p className="text-xs text-gray-500 font-medium">Upcoming Leave</p>
                  <p className="text-sm font-bold text-gray-700">
                    {upcomingLeave ? LEAVE_POLICIES.find(p => p.type === upcomingLeave.type)?.label : 'None scheduled'}
                  </p>
                </div>
              </div>
            </div>

            <div className="rounded-2xl p-5 border border-gray-200 bg-white">
              <div className="flex items-center gap-3 mb-3">
                <div className="w-10 h-10 rounded-xl flex items-center justify-center bg-amber-500">
                  <i className="ri-time-line text-white text-lg"></i>
                </div>
                <div>
                  <p className="text-xs text-gray-500 font-medium">Pending Requests</p>
                  <p className="text-sm font-bold text-gray-700">{pendingCount} awaiting approval</p>
                </div>
              </div>
            </div>
          </div>

          <div className="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
            <div className="px-5 py-3 border-b border-gray-100">
              <h3 className="font-semibold text-gray-700">My Leave Balance (Intern)</h3>
              <p className="text-xs text-gray-400 mt-0.5">Entitlements from HR leave policy applied automatically</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">Leave Type</th>
                    <th className="text-center px-4 py-3 text-xs font-semibold text-gray-500 uppercase">Entitlement</th>
                    <th className="text-center px-4 py-3 text-xs font-semibold text-gray-500 uppercase">Taken</th>
                    <th className="text-center px-4 py-3 text-xs font-semibold text-gray-500 uppercase">Remaining</th>
                  </tr>
                </thead>
                <tbody>
                  {myBalances.map(bal => {
                    const pct = bal.entitlement > 0 ? Math.min(100, (bal.taken / bal.entitlement) * 100) : 0;
                    const isLow = bal.remaining <= 3 && bal.entitlement > 0;
                    return (
                      <tr key={bal.type} className="border-b border-gray-50 hover:bg-gray-50/50">
                        <td className="px-5 py-3">
                          <div className="flex items-center gap-2.5">
                            <div className="w-7 h-7 rounded-lg flex items-center justify-center flex-shrink-0" style={{ background: (bal.color || '#9ca3af') + '20' }}>
                              <i className={`${bal.icon || 'ri-calendar-line'} text-xs`} style={{ color: bal.color || '#9ca3af' }}></i>
                            </div>
                            <span className="font-medium text-gray-700">{bal.label}</span>
                          </div>
                        </td>
                        <td className="px-4 py-3 text-center text-gray-600">{bal.entitlement} days</td>
                        <td className="px-4 py-3 text-center">
                          <div>
                            <span className="font-semibold text-gray-700">{bal.taken} days</span>
                            {bal.entitlement > 0 && (
                              <div className="w-16 bg-gray-100 rounded-full h-1 mx-auto mt-1">
                                <div className="h-1 rounded-full" style={{ width: `${pct}%`, background: bal.color || '#9ca3af' }}></div>
                              </div>
                            )}
                          </div>
                        </td>
                        <td className="px-4 py-3 text-center">
                          <span className={`inline-flex items-center justify-center px-2.5 py-1 rounded-full text-sm font-bold ${isLow ? 'bg-red-100 text-red-700' : 'bg-green-100 text-green-700'}`}>
                            {bal.entitlement === 0 ? '∞' : `${bal.remaining} days`}
                          </span>
                          {isLow && <p className="text-xs text-red-500 mt-0.5">Low balance</p>}
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      )}

      {activeTab === 'history' && (
        <div className="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
          <div className="px-5 py-3 border-b border-gray-100 flex items-center justify-between">
            <h3 className="font-semibold text-gray-700">My Leave Requests</h3>
            <span className="text-xs text-gray-400">{myRequests.length} total requests</span>
          </div>
          {myRequests.length === 0 ? (
            <div className="text-center py-12 text-gray-400">
              <div className="w-12 h-12 flex items-center justify-center mx-auto mb-3">
                <i className="ri-calendar-line text-4xl"></i>
              </div>
              <p>No leave requests yet</p>
              <button onClick={() => setShowNew(true)}
                className="mt-3 px-4 py-2 rounded-lg text-sm font-semibold text-white cursor-pointer whitespace-nowrap"
                style={{ background: '#b828a0' }}>
                Submit First Request
              </button>
            </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">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">Status</th>
                    <th className="text-right px-4 py-3 text-xs font-semibold text-gray-500 uppercase">Actions</th>
                  </tr>
                </thead>
                <tbody>
                  {myRequests.map(req => {
                    const st = STATUS_CONFIG[req.status] || STATUS_CONFIG['Pending'];
                    const policy = LEAVE_POLICIES.find(p => p.type === req.type);
                    const canDownload = req.status === 'Approved' || req.status === 'HOS Approved';
                    // Safely get policy label and color
                    const policyLabel = policy?.label || req.type;
                    const policyColor = policy?.color || '#9ca3af';
                    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-1.5">
                            <div className="w-2 h-2 rounded-full" style={{ background: policyColor }}></div>
                            <span className="text-sm text-gray-700">{policyLabel}</span>
                          </div>
                        </td>
                        <td className="px-4 py-3 text-xs text-gray-600">{req.startDate} → {req.endDate}</td>
                        <td className="px-4 py-3 text-center font-bold text-gray-800">{req.days}</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"
                            style={{ color: st.color, background: st.bg }}>{req.status}</span>
                          {req.reviewComment && req.status === 'Pending Review' && (
                            <p className="text-xs text-violet-600 mt-0.5 max-w-[180px] truncate">{req.reviewComment}</p>
                          )}
                        </td>
                        <td className="px-4 py-3 text-right">
                          <div className="flex items-center justify-end gap-1">
                            {req.status === 'Pending Review' && (
                              <button onClick={() => setEditRequest(req)}
                                className="flex items-center gap-1 px-2 py-1.5 rounded-lg text-white cursor-pointer text-xs font-medium whitespace-nowrap"
                                style={{ background: '#7c3aed' }}>
                                <i className="ri-edit-line"></i> Edit & Resubmit
                              </button>
                            )}
                            {canDownload && (
                              <div className="relative group">
                                <button className="flex items-center gap-1 px-2 py-1.5 rounded-lg bg-blue-50 text-blue-600 hover:bg-blue-100 cursor-pointer text-xs font-medium whitespace-nowrap">
                                  <i className="ri-download-line"></i> Computation
                                </button>
                                <div className="absolute right-0 top-full mt-1 hidden group-hover:flex flex-col gap-1 bg-white border border-gray-200 rounded-lg shadow-lg p-1 z-10 min-w-[140px]">
                                  <button onClick={() => downloadLeaveComputationForm(req)}
                                    className="flex items-center gap-1 px-3 py-1.5 rounded text-xs text-blue-600 hover:bg-blue-50 cursor-pointer whitespace-nowrap text-left w-full">
                                    <i className="ri-file-pdf-line"></i> PDF
                                  </button>
                                  <button onClick={() => downloadLeaveComputationFormWord(req)}
                                    className="flex items-center gap-1 px-3 py-1.5 rounded text-xs text-green-600 hover:bg-green-50 cursor-pointer whitespace-nowrap text-left w-full">
                                    <i className="ri-file-word-line"></i> Word
                                  </button>
                                </div>
                              </div>
                            )}
                          </div>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          )}
        </div>
      )}

      {activeTab === 'calendar' && (
        <div className="space-y-4">
          <div className="bg-blue-50 border border-blue-200 rounded-xl px-4 py-3 flex items-start gap-2">
            <i className="ri-information-line text-blue-600 mt-0.5"></i>
            <p className="text-xs text-blue-800">This calendar shows only your own approved leave dates.</p>
          </div>
          <LeaveCalendarTab requests={myRequests} singleUserView={true} highlightApproved={true} />
        </div>
      )}

      {activeTab === 'policy' && <LeavePolicyTab canEdit={false} />}

      {showNew && (
        <NewLeaveRequestModal
          employeeId={empId}
          employeeName={empName || ''}
          employeeDept={empDept}
          employeePosition="Intern"
          employeeType="Intern"
          employeeGender={empGender}
          existingRequests={requests}
          onClose={() => setShowNew(false)}
          onSubmit={handleSubmit}
        />
      )}

      {editRequest && (
        <EditResubmitModal
          request={editRequest}
          allRequests={requests}
          onClose={() => setEditRequest(null)}
          onResubmit={handleResubmit}
        />
      )}
    </InternLayout>
  );
}