import { useState } from 'react';
import { motion } from 'framer-motion';
import { format, parseISO } from 'date-fns';

export default function AdminDashboard() {
    const [password, setPassword] = useState('');
    const [events, setEvents] = useState(null);
    const [error, setError] = useState('');
    const [loading, setLoading] = useState(false);

    const handleLogin = async (e) => {
        e.preventDefault();
        setLoading(true);
        setError('');

        try {
            const res = await fetch('/api/admin/events', {
                headers: { 'x-admin-password': password },
            });

            if (res.status === 401) {
                setError('Invalid password');
                setEvents(null);
            } else if (res.ok) {
                const data = await res.json();
                setEvents(data.events);
            } else {
                setError('Failed to load events');
            }
        } catch (err) {
            setError('Network error');
        } finally {
            setLoading(false);
        }
    };

    if (!events) {
        return (
            <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                className="w-full max-w-sm mx-auto"
            >
                <div className="bg-white rounded-xl shadow-stripe p-6 sm:p-8">
                    <h1 className="text-2xl font-bold text-slate-800 mb-6">Admin Login</h1>
                    <form onSubmit={handleLogin} className="space-y-4">
                        <div>
                            <label className="block text-sm font-medium text-slate-700 mb-2">
                                Password
                            </label>
                            <input
                                type="password"
                                value={password}
                                onChange={(e) => setPassword(e.target.value)}
                                placeholder="Enter admin password"
                                className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all text-slate-800"
                                required
                            />
                        </div>
                        {error && (
                            <p className="text-red-500 text-sm">{error}</p>
                        )}
                        <button
                            type="submit"
                            disabled={loading}
                            className="w-full bg-slate-900 hover:bg-slate-800 text-white font-medium py-2.5 rounded-lg shadow-sm hover:shadow-md transition-all active:scale-[0.98] disabled:opacity-50"
                        >
                            {loading ? 'Checking...' : 'Login'}
                        </button>
                    </form>
                </div>
            </motion.div>
        );
    }

    const origin = typeof window !== 'undefined' ? window.location.origin : '';

    return (
        <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            className="w-full"
        >
            <div className="bg-white rounded-xl shadow-stripe p-6 sm:p-8">
                <div className="flex justify-between items-center mb-6">
                    <h1 className="text-2xl font-bold text-slate-800">All Events</h1>
                    <button
                        onClick={() => setEvents(null)}
                        className="text-sm text-slate-500 hover:text-slate-700 transition-colors"
                    >
                        Logout
                    </button>
                </div>

                {events.length === 0 ? (
                    <p className="text-slate-500 text-center py-8">No events yet.</p>
                ) : (
                    <div className="overflow-x-auto">
                        <table className="w-full text-left">
                            <thead>
                                <tr className="border-b border-slate-200">
                                    <th className="pb-3 text-xs font-bold text-slate-400 uppercase tracking-wider">Event</th>
                                    <th className="pb-3 text-xs font-bold text-slate-400 uppercase tracking-wider">Dates</th>
                                    <th className="pb-3 text-xs font-bold text-slate-400 uppercase tracking-wider">Links</th>
                                </tr>
                            </thead>
                            <tbody>
                                {events.map((event) => (
                                    <tr key={event.id} className="border-b border-slate-100 hover:bg-slate-50 transition-colors">
                                        <td className="py-4">
                                            <div className="font-medium text-slate-800">{event.name}</div>
                                            {event.description && (
                                                <div className="text-sm text-slate-500 truncate max-w-xs">{event.description}</div>
                                            )}
                                        </td>
                                        <td className="py-4 text-sm text-slate-600">
                                            {format(parseISO(event.start_date), 'MMM d')} - {format(parseISO(event.end_date), 'MMM d, yyyy')}
                                        </td>
                                        <td className="py-4">
                                            <div className="flex gap-3">
                                                <a
                                                    href={`${origin}/event/${event.id}`}
                                                    target="_blank"
                                                    rel="noopener noreferrer"
                                                    className="text-sm text-primary hover:text-primary-hover font-medium transition-colors"
                                                >
                                                    Invite
                                                </a>
                                                <a
                                                    href={`${origin}/event/${event.id}/analytics`}
                                                    target="_blank"
                                                    rel="noopener noreferrer"
                                                    className="text-sm text-slate-500 hover:text-slate-700 font-medium transition-colors"
                                                >
                                                    Analytics
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    </div>
                )}
            </div>
        </motion.div>
    );
}
