import { API_BASE_URL } from '../../lib/config';
import React, { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import { 
  Plus, 
  Trash2, 
  Building2, 
  Edit, 
  Save, 
  CheckCircle2
} from 'lucide-react';
import { useDialog } from '../../context/DialogContext';

export const VenueManagement: React.FC = () => {
  const { showAlert, showConfirm } = useDialog();
  const [venues, setVenues] = useState<any[]>([]);
  const [newVenueName, setNewVenueName] = useState('');
  const [newVenueCapacity, setNewVenueCapacity] = useState('');
  const [editingVenueId, setEditingVenueId] = useState<string | null>(null);
  const [editVenueName, setEditVenueName] = useState('');
  const [editVenueCapacity, setEditVenueCapacity] = useState('');

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

  const fetchVenues = async () => {
    try {
      const response = await fetch(API_BASE_URL + '/api/venues');
      if (response.ok) {
        const data = await response.json();
        setVenues(data);
      }
    } catch (error) {
      console.error('Failed to fetch venues:', error);
    }
  };

  const handleCreateVenue = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!newVenueName.trim()) {
      showAlert('Required', 'Please enter a venue name', 'error');
      return;
    }

    try {
      const capacityVal = newVenueCapacity.trim() ? Number(newVenueCapacity) : null;
      const response = await fetch(API_BASE_URL + '/api/venues', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: newVenueName.trim(),
          capacity: capacityVal
        })
      });

      if (response.ok) {
        fetchVenues();
        setNewVenueName('');
        setNewVenueCapacity('');
        showAlert('Success', 'Venue added successfully.', 'success');
      }
    } catch (error) {
      console.error('Failed to add venue:', error);
      showAlert('Error', 'Failed to add venue.', 'error');
    }
  };

  const handleStartEditVenue = (venue: any) => {
    setEditingVenueId(venue.id);
    setEditVenueName(venue.name);
    setEditVenueCapacity(venue.capacity !== null && venue.capacity !== undefined ? String(venue.capacity) : '');
  };

  const handleSaveVenueEdit = async (venueId: string) => {
    if (!editVenueName.trim()) {
      showAlert('Required', 'Venue name cannot be empty', 'error');
      return;
    }

    try {
      const capacityVal = editVenueCapacity.trim() ? Number(editVenueCapacity) : null;
      const response = await fetch(API_BASE_URL + '/api/venues', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          id: venueId,
          name: editVenueName.trim(),
          capacity: capacityVal
        })
      });

      if (response.ok) {
        fetchVenues();
        setEditingVenueId(null);
        showAlert('Success', 'Venue updated successfully.', 'success');
      }
    } catch (error) {
      console.error('Failed to update venue:', error);
      showAlert('Error', 'Failed to update venue.', 'error');
    }
  };

  const handleDeleteVenue = async (venueId: string) => {
    showConfirm(
      'Delete Venue',
      'Are you sure you want to delete this venue? This cannot be undone.',
      async () => {
        try {
          const response = await fetch(`${API_BASE_URL}/api/venues/${venueId}`, {
            method: 'DELETE'
          });

          if (response.ok) {
            fetchVenues();
            showAlert('Success', 'Venue deleted successfully.', 'success');
          }
        } catch (error) {
          console.error('Failed to delete venue:', error);
          showAlert('Error', 'Failed to delete venue.', 'error');
        }
      }
    );
  };

  return (
    <div className="space-y-10">
      {/* Header */}
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-6">
        <div>
          <h1 className="text-4xl font-black text-text-dark tracking-tight mb-1">Venue Management</h1>
          <p className="text-text-muted font-black uppercase tracking-widest text-[10px]">Configure college venues, halls, and seating capacities</p>
        </div>
        
        <div className="flex items-center gap-4">
          <div className="w-12 h-12 bg-brand-glow rounded-2xl flex items-center justify-center text-brand-indigo premium-shadow">
            <Building2 className="w-6 h-6" />
          </div>
        </div>
      </div>

      {/* Manage Venues Section */}
      <div className="bg-white rounded-[2.5rem] border border-slate-100 premium-shadow p-8 space-y-6">
        <div className="flex flex-col lg:flex-row lg:items-center justify-between border-b border-slate-50 pb-6 gap-6">
          <div className="flex items-center gap-4">
            <div className="w-10 h-10 bg-brand-indigo rounded-xl flex items-center justify-center text-white">
              <Building2 className="w-5 h-5" />
            </div>
            <div>
              <h3 className="text-xl font-black text-text-dark tracking-tight">Registered Venues</h3>
              <p className="text-xs text-text-muted font-bold">Configure college venues, halls, and seating capacities.</p>
            </div>
          </div>

          <form onSubmit={handleCreateVenue} className="flex flex-wrap items-center gap-4">
            <div className="flex items-center gap-2">
              <input 
                type="text" 
                placeholder="Venue Name (e.g. Mini Seminar Hall)"
                value={newVenueName}
                onChange={e => setNewVenueName(e.target.value)}
                className="bg-slate-50 border border-slate-200 rounded-xl py-2 px-4 text-xs font-bold focus:bg-white focus:border-brand-indigo outline-none transition-all text-slate-800"
                required
              />
              <input 
                type="number" 
                placeholder="Capacity (e.g. 120)"
                value={newVenueCapacity}
                onChange={e => setNewVenueCapacity(e.target.value)}
                className="bg-slate-50 border border-slate-200 rounded-xl py-2 px-4 text-xs font-bold focus:bg-white focus:border-brand-indigo outline-none transition-all text-slate-800 w-32"
              />
              <button
                type="submit"
                className="px-4 py-2 bg-brand-indigo text-white rounded-xl font-black text-[10px] uppercase tracking-widest hover:scale-[1.02] active:scale-[0.98] transition-all flex items-center gap-1.5"
              >
                <Plus className="w-3.5 h-3.5" />
                Add Venue
              </button>
            </div>
          </form>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
          {venues.map(venue => (
            <div key={venue.id} className="bg-slate-50 p-6 rounded-3xl border border-slate-100 flex flex-col justify-between gap-4">
              {editingVenueId === venue.id ? (
                <div className="space-y-3 w-full">
                  <div className="space-y-1">
                    <label className="text-[8px] font-black text-slate-400 uppercase tracking-widest">Venue Name</label>
                    <input 
                      type="text" 
                      value={editVenueName}
                      onChange={e => setEditVenueName(e.target.value)}
                      className="w-full bg-white border border-slate-200 rounded-xl py-1.5 px-3 text-xs font-bold focus:border-brand-indigo outline-none transition-all"
                      required
                    />
                  </div>
                  <div className="space-y-1">
                    <label className="text-[8px] font-black text-slate-400 uppercase tracking-widest">Seating Capacity</label>
                    <input 
                      type="number" 
                      value={editVenueCapacity}
                      onChange={e => setEditVenueCapacity(e.target.value)}
                      className="w-full bg-white border border-slate-200 rounded-xl py-1.5 px-3 text-xs font-bold focus:border-brand-indigo outline-none transition-all"
                      placeholder="Unlimited / Custom"
                    />
                  </div>
                  <div className="flex gap-2 pt-2">
                    <button 
                      onClick={() => handleSaveVenueEdit(venue.id)}
                      className="flex-1 py-2 bg-emerald-500 hover:bg-emerald-600 text-white rounded-lg font-black text-[9px] uppercase tracking-wider transition-all flex items-center justify-center gap-1"
                    >
                      <Save className="w-3.5 h-3.5" />
                      Save
                    </button>
                    <button 
                      onClick={() => setEditingVenueId(null)}
                      className="flex-1 py-2 bg-slate-200 hover:bg-slate-300 text-slate-700 rounded-lg font-black text-[9px] uppercase tracking-wider transition-all"
                    >
                      Cancel
                    </button>
                  </div>
                </div>
              ) : (
                <>
                  <div className="flex items-start justify-between gap-4">
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 rounded-xl bg-white border border-slate-200 flex items-center justify-center text-brand-indigo shadow-sm shrink-0">
                        <Building2 className="w-5 h-5" />
                      </div>
                      <div>
                        <h4 className="text-sm font-black text-brand-navy tracking-tight line-clamp-2" title={venue.name}>
                          {venue.name}
                        </h4>
                        <span className="text-[9px] font-black uppercase tracking-widest text-slate-400">
                          {venue.capacity ? `Capacity: ${venue.capacity} seats` : 'No Limit / Custom'}
                        </span>
                      </div>
                    </div>
                  </div>

                  <div className="flex items-center justify-end gap-2 border-t border-slate-200/50 pt-3">
                    <button 
                      onClick={() => handleStartEditVenue(venue)}
                      className="p-2 bg-white border border-slate-200 rounded-lg text-slate-400 hover:text-brand-indigo hover:border-brand-indigo transition-all"
                      title="Edit Venue"
                    >
                      <Edit className="w-3.5 h-3.5" />
                    </button>
                    <button 
                      onClick={() => handleDeleteVenue(venue.id)}
                      className="p-2 bg-white border border-slate-200 rounded-lg text-slate-400 hover:text-status-danger hover:border-status-danger transition-all"
                      title="Delete Venue"
                    >
                      <Trash2 className="w-3.5 h-3.5" />
                    </button>
                  </div>
                </>
              )}
            </div>
          ))}
          {venues.length === 0 && (
            <div className="col-span-full py-12 text-center text-slate-400 font-bold uppercase tracking-wider text-xs border-2 border-dashed border-slate-200 rounded-[2rem]">
              No venues registered. Use the form above to add a new venue.
            </div>
          )}
        </div>
      </div>
    </div>
  );
};