'use client';

import React, { useState, useEffect } from 'react';
import { apiRequest } from '@/lib/api';
import { toast } from 'react-hot-toast';
import { Calendar, Edit3, X, Check, Search, GraduationCap } from 'lucide-react';

export default function AdminSubscriptionsPage() {
  const [subscriptions, setSubscriptions] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState('');

  // Edit modal state
  const [editingSub, setEditingSub] = useState<any>(null);
  const [newExpiryDate, setNewExpiryDate] = useState('');
  const [editReason, setEditReason] = useState('Manual extension by Admin');
  const [isUpdating, setIsUpdating] = useState(false);

  useEffect(() => {
    fetchSubscriptions();
  }, []);

  const fetchSubscriptions = async () => {
    setLoading(true);
    try {
      const res = await apiRequest('/subscriptions');
      if (res.success && res.subscriptions) {
        setSubscriptions(res.subscriptions);
      }
    } catch (error) {
      toast.error('Failed to load subscriptions');
    } finally {
      setLoading(false);
    }
  };

  const openEditModal = (sub: any) => {
    setEditingSub(sub);
    // Format date to YYYY-MM-DD for date input
    const dateStr = new Date(sub.expiryDate).toISOString().split('T')[0];
    setNewExpiryDate(dateStr);
    setEditReason('Manual extension by Admin');
  };

  const handleUpdateExpiry = async () => {
    if (!newExpiryDate) {
      toast.error('Please select a valid date');
      return;
    }

    setIsUpdating(true);
    try {
      const res = await apiRequest(`/subscriptions/${editingSub._id}`, {
        method: 'PATCH',
        body: JSON.stringify({
          expiryDate: new Date(newExpiryDate).toISOString(),
          reason: editReason
        })
      });

      if (res.success) {
        toast.success('Subscription expiration updated successfully');
        setEditingSub(null);
        fetchSubscriptions();
      } else {
        toast.error(res.error || 'Failed to update expiration');
      }
    } catch (error) {
      toast.error('An error occurred while updating');
    } finally {
      setIsUpdating(false);
    }
  };

  const filteredSubs = subscriptions.filter(sub => {
    const studentName = sub.student?.name?.toLowerCase() || '';
    const studentEmail = sub.student?.email?.toLowerCase() || '';
    const courseTitle = sub.course?.title?.toLowerCase() || '';
    const term = searchTerm.toLowerCase();

    return studentName.includes(term) || studentEmail.includes(term) || courseTitle.includes(term);
  });

  return (
    <div className="space-y-8 max-w-7xl mx-auto">
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
          <h1 className="text-3xl font-extrabold text-gray-900 tracking-tight">Student Subscriptions</h1>
          <p className="text-sm text-gray-500 font-medium mt-1">
            Manage course access and manually adjust expiration dates.
          </p>
        </div>

        <div className="relative">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
          <input
            type="text"
            placeholder="Search student or course..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="w-full sm:w-80 pl-9 pr-4 py-2.5 rounded-xl border border-gray-200 bg-white text-sm focus:ring-2 focus:ring-[#FECE00] focus:border-[#FECE00] outline-none transition-all font-medium"
          />
        </div>
      </div>

      <div className="bg-white rounded-2xl border border-gray-200/90 shadow-sm overflow-hidden">
        {loading ? (
          <div className="p-16 text-center text-gray-500 font-medium flex flex-col items-center justify-center gap-3">
            <div className="w-8 h-8 border-3 border-[#FECE00] border-t-transparent rounded-full animate-spin" />
            <span className="text-xs font-semibold text-gray-500">Loading subscriptions...</span>
          </div>
        ) : filteredSubs.length === 0 ? (
          <div className="p-16 text-center">
            <div className="w-16 h-16 rounded-full bg-gray-50 text-gray-400 flex items-center justify-center mx-auto mb-4 border border-gray-100">
              <Calendar className="w-6 h-6 text-gray-300" />
            </div>
            <h3 className="text-sm font-semibold text-gray-600 mb-1">No Subscriptions Found</h3>
            <p className="text-xs text-gray-400">There are no active subscriptions matching your search.</p>
          </div>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full text-left text-xs border-collapse">
              <thead>
                <tr className="bg-gray-50/50 border-b border-amber-100 text-gray-700 font-extrabold uppercase tracking-wider">
                  <th className="py-3.5 px-4 sm:px-6">Student</th>
                  <th className="py-3.5 px-4">Course</th>
                  <th className="py-3.5 px-4">Status</th>
                  <th className="py-3.5 px-4">Expiration Date</th>
                  <th className="py-3.5 px-4 sm:px-6 text-right">Actions</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-100 font-medium text-gray-800">
                {filteredSubs.map((sub) => {
                  const isExpired = new Date(sub.expiryDate) < new Date();

                  return (
                    <tr key={sub._id} className="hover:bg-amber-50/20 transition-colors">
                      <td className="py-3.5 px-4 sm:px-6">
                        <span className="font-extrabold text-gray-900 text-sm block truncate">{sub.student?.name || 'Unknown Student'}</span>
                        <span className="text-gray-500 text-[11px] block truncate mt-0.5">{sub.student?.email}</span>
                      </td>
                      <td className="py-3.5 px-4 max-w-xs">
                        <div className="flex items-center gap-1.5 text-gray-600 truncate">
                          <GraduationCap className="w-3.5 h-3.5 text-amber-600 shrink-0" />
                          <span className="truncate font-bold text-gray-700">{sub.course?.title || 'Unknown Course'}</span>
                        </div>
                      </td>
                      <td className="py-3.5 px-4">
                        <span className={`px-2.5 py-1 rounded-full text-[10px] font-black uppercase tracking-wider ${isExpired ? 'bg-red-50 text-red-700 border border-red-200' : 'bg-emerald-100 text-emerald-800'
                          }`}>
                          {isExpired ? 'Expired' : 'Active'}
                        </span>
                      </td>
                      <td className="py-3.5 px-4">
                        <div className="font-bold text-gray-700 flex items-center gap-1.5">
                          <Calendar className="w-3.5 h-3.5 text-gray-400" />
                          {new Date(sub.expiryDate).toLocaleDateString(undefined, {
                            year: 'numeric', month: 'short', day: 'numeric'
                          })}
                        </div>
                      </td>
                      <td className="py-3.5 px-4 sm:px-6 text-right">
                        <button
                          onClick={() => openEditModal(sub)}
                          className="px-4 py-2 bg-white text-gray-700 text-sm font-medium border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-200 transition-colors inline-flex items-center justify-center gap-1.5 cursor-pointer"
                        >
                          <Edit3 className="w-3.5 h-3.5" />
                          <span>Edit Date</span>
                        </button>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        )}
      </div>

      {/* Edit Expiration Modal */}
      {editingSub && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm animate-fadeIn !m-0">
          <div className="bg-white rounded-2xl w-full max-w-md shadow-2xl overflow-hidden animate-slideUp">
            <div className="flex items-center justify-between p-5 border-b border-gray-100">
              <h3 className="text-lg font-extrabold text-gray-900">Adjust Expiration Date</h3>
              <button
                onClick={() => setEditingSub(null)}
                className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 text-gray-500 transition-colors"
              >
                <X className="w-5 h-5" />
              </button>
            </div>

            <div className="p-6 space-y-5">
              <div>
                <label className="block text-xs font-bold text-gray-500 uppercase tracking-wider mb-2">
                  Student & Course
                </label>
                <div className="p-3 bg-gray-50 rounded-xl border border-gray-100 text-sm">
                  <div className="font-bold text-gray-900">{editingSub.student?.name}</div>
                  <div className="text-gray-500 mt-1">{editingSub.course?.title}</div>
                </div>
              </div>

              <div>
                <label className="block text-xs font-bold text-gray-500 uppercase tracking-wider mb-2">
                  New Expiration Date
                </label>
                <input
                  type="date"
                  value={newExpiryDate}
                  onChange={(e) => setNewExpiryDate(e.target.value)}
                  className="w-full px-4 py-2.5 rounded-xl border border-gray-300 focus:ring-2 focus:ring-[#FECE00] focus:border-[#FECE00] outline-none transition-all font-medium text-gray-900"
                />
              </div>

              <div>
                <label className="block text-xs font-bold text-gray-500 uppercase tracking-wider mb-2">
                  Reason for Change
                </label>
                <input
                  type="text"
                  value={editReason}
                  onChange={(e) => setEditReason(e.target.value)}
                  placeholder="e.g., Extended due to student request"
                  className="w-full px-4 py-2.5 rounded-xl border border-gray-300 focus:ring-2 focus:ring-[#FECE00] focus:border-[#FECE00] outline-none transition-all text-sm"
                />
              </div>
            </div>

            <div className="p-5 border-t border-gray-100 bg-gray-50 flex items-center justify-end gap-3">
              <button
                onClick={() => setEditingSub(null)}
                className="px-4 py-2 bg-white text-gray-700 text-sm font-medium border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-200 transition-colors cursor-pointer"
              >
                Cancel
              </button>
              <button
                onClick={handleUpdateExpiry}
                disabled={isUpdating}
                className="px-4 py-2 bg-[#FECE00] hover:bg-[#e5b800] text-black text-sm font-medium rounded-lg shadow-sm transition-colors flex items-center gap-2 cursor-pointer disabled:opacity-50"
              >
                {isUpdating ? (
                  <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
                ) : (
                  <Check className="w-4 h-4" />
                )}
                Save Changes
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}