'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import { useLanguage } from '@/context/LanguageContext';
import { useAuth } from '@/context/AuthContext';
import { adminApi, DashboardData } from '@/lib/api';
import Card from '@/components/ui/Card';
import {
  UsersIcon,
  CalendarIcon,
  TicketIcon,
  CurrencyDollarIcon,
  EnvelopeIcon,
  UserGroupIcon,
  ExclamationTriangleIcon,
} from '@heroicons/react/24/outline';

export default function AdminDashboardPage() {
  const { t, locale } = useLanguage();
  const { user } = useAuth();
  const [data, setData] = useState<DashboardData | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    adminApi.getDashboard()
      .then(({ dashboard }) => setData(dashboard))
      .catch(console.error)
      .finally(() => setLoading(false));
  }, []);

  const formatDate = (dateStr: string) => {
    return new Date(dateStr).toLocaleDateString(locale === 'es' ? 'es-ES' : 'en-US', {
      month: 'short',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit',
      timeZone: 'America/Asuncion',
    });
  };

  const statCards = data ? [
    { 
      label: t('admin.dashboard.stats.users'), 
      value: data.stats.totalUsers, 
      icon: UsersIcon,
      color: 'bg-blue-100 text-blue-600',
      href: '/admin/users',
    },
    { 
      label: t('admin.dashboard.stats.events'), 
      value: data.stats.totalEvents, 
      icon: CalendarIcon,
      color: 'bg-purple-100 text-purple-600',
      href: '/admin/events',
    },
    { 
      label: t('admin.dashboard.stats.tickets'), 
      value: data.stats.confirmedTickets, 
      icon: TicketIcon,
      color: 'bg-green-100 text-green-600',
      href: '/admin/tickets',
    },
    { 
      label: t('admin.dashboard.stats.revenue'), 
      value: `${data.stats.totalRevenue.toLocaleString()} PYG`, 
      icon: CurrencyDollarIcon,
      color: 'bg-yellow-100 text-yellow-600',
      href: '/admin/payments',
    },
  ] : [];

  if (loading) {
    return (
      <div className="flex items-center justify-center py-12">
        <div className="animate-spin w-8 h-8 border-4 border-primary-yellow border-t-transparent rounded-full" />
      </div>
    );
  }

  return (
    <div>
      <div className="mb-8">
        <h1 className="text-2xl font-bold text-primary-dark">{t('admin.dashboard.title')}</h1>
        <p className="text-gray-600">
          {t('admin.dashboard.welcome')}, {user?.name}
        </p>
      </div>

      {/* Stats Grid */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        {statCards.map((stat) => (
          <Link key={stat.label} href={stat.href}>
            <Card className="p-6 hover:shadow-card-hover transition-shadow">
              <div className="flex items-start justify-between">
                <div>
                  <p className="text-sm text-gray-500">{stat.label}</p>
                  <p className="mt-2 text-2xl font-bold text-primary-dark">{stat.value}</p>
                </div>
                <div className={`w-12 h-12 rounded-btn flex items-center justify-center ${stat.color}`}>
                  <stat.icon className="w-6 h-6" />
                </div>
              </div>
            </Card>
          </Link>
        ))}
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Alerts */}
        <Card className="p-6">
          <h2 className="font-semibold text-lg mb-4">Alerts</h2>
          <div className="space-y-3">
            {/* Low capacity warnings */}
            {data?.upcomingEvents
              .filter(event => {
                const spotsLeft = Math.max(0, event.capacity - (event.bookedCount || 0));
                const percentFull = ((event.bookedCount || 0) / event.capacity) * 100;
                return percentFull >= 80 && spotsLeft > 0;
              })
              .map(event => {
                const spotsLeft = Math.max(0, event.capacity - (event.bookedCount || 0));
                const percentFull = Math.round(((event.bookedCount || 0) / event.capacity) * 100);
                return (
                  <Link 
                    key={event.id}
                    href="/admin/events"
                    className="flex items-center justify-between p-3 bg-orange-50 rounded-btn hover:bg-orange-100 transition-colors"
                  >
                    <div className="flex items-center gap-3">
                      <ExclamationTriangleIcon className="w-5 h-5 text-orange-600" />
                      <div>
                        <span className="text-sm font-medium">{event.title}</span>
                        <p className="text-xs text-gray-500">Only {spotsLeft} spots left ({percentFull}% full)</p>
                      </div>
                    </div>
                    <span className="badge badge-warning">Low capacity</span>
                  </Link>
                );
              })}
            
            {/* Sold out events */}
            {data?.upcomingEvents
              .filter(event => Math.max(0, event.capacity - (event.bookedCount || 0)) === 0)
              .map(event => (
                <Link 
                  key={event.id}
                  href="/admin/events"
                  className="flex items-center justify-between p-3 bg-red-50 rounded-btn hover:bg-red-100 transition-colors"
                >
                  <div className="flex items-center gap-3">
                    <ExclamationTriangleIcon className="w-5 h-5 text-red-600" />
                    <div>
                      <span className="text-sm font-medium">{event.title}</span>
                      <p className="text-xs text-gray-500">Event is sold out!</p>
                    </div>
                  </div>
                  <span className="badge badge-danger">Sold out</span>
                </Link>
              ))}
            
            {data && data.stats.pendingPayments > 0 && (
              <Link 
                href="/admin/payments"
                className="flex items-center justify-between p-3 bg-yellow-50 rounded-btn hover:bg-yellow-100 transition-colors"
              >
                <div className="flex items-center gap-3">
                  <CurrencyDollarIcon className="w-5 h-5 text-yellow-600" />
                  <span className="text-sm">Pending payments</span>
                </div>
                <span className="badge badge-warning">{data.stats.pendingPayments}</span>
              </Link>
            )}
            {data && data.stats.newContacts > 0 && (
              <Link 
                href="/admin/contacts"
                className="flex items-center justify-between p-3 bg-blue-50 rounded-btn hover:bg-blue-100 transition-colors"
              >
                <div className="flex items-center gap-3">
                  <EnvelopeIcon className="w-5 h-5 text-blue-600" />
                  <span className="text-sm">New messages</span>
                </div>
                <span className="badge badge-info">{data.stats.newContacts}</span>
              </Link>
            )}
            
            {/* No alerts */}
            {data && 
             data.stats.pendingPayments === 0 && 
             data.stats.newContacts === 0 && 
             !data.upcomingEvents.some(e => ((e.bookedCount || 0) / e.capacity) >= 0.8) && (
              <p className="text-gray-500 text-sm text-center py-2">No alerts at this time</p>
            )}
          </div>
        </Card>

        {/* Upcoming Events */}
        <Card className="p-6">
          <div className="flex items-center justify-between mb-4">
            <h2 className="font-semibold text-lg">Upcoming Events</h2>
            <Link href="/admin/events" className="text-sm text-secondary-blue hover:underline">
              {t('common.viewAll')}
            </Link>
          </div>
          {data?.upcomingEvents.length === 0 ? (
            <p className="text-gray-500 text-sm">No upcoming events</p>
          ) : (
            <div className="space-y-3">
              {data?.upcomingEvents.slice(0, 5).map((event) => (
                <Link
                  key={event.id}
                  href={`/admin/events`}
                  className="flex items-center justify-between p-3 bg-secondary-gray rounded-btn hover:bg-gray-200 transition-colors"
                >
                  <div>
                    <p className="font-medium text-sm">{event.title}</p>
                    <p className="text-xs text-gray-500">{formatDate(event.startDatetime)}</p>
                  </div>
                  <span className="text-sm text-gray-600">
                    {event.bookedCount || 0}/{event.capacity}
                  </span>
                </Link>
              ))}
            </div>
          )}
        </Card>

        {/* Quick Stats */}
        <Card className="p-6">
          <h2 className="font-semibold text-lg mb-4">Quick Stats</h2>
          <div className="grid grid-cols-2 gap-4">
            <div className="text-center p-4 bg-secondary-gray rounded-btn">
              <UserGroupIcon className="w-8 h-8 mx-auto text-gray-400" />
              <p className="mt-2 text-2xl font-bold">{data?.stats.totalSubscribers || 0}</p>
              <p className="text-xs text-gray-500">Subscribers</p>
            </div>
            <div className="text-center p-4 bg-secondary-gray rounded-btn">
              <TicketIcon className="w-8 h-8 mx-auto text-gray-400" />
              <p className="mt-2 text-2xl font-bold">{data?.stats.totalTickets || 0}</p>
              <p className="text-xs text-gray-500">Total Bookings</p>
            </div>
          </div>
        </Card>
      </div>
    </div>
  );
}