'use client';

import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import { useAuth } from '@/components/auth-provider';
import { auth, db } from '@/lib/firebase';
import {
  collection,
  onSnapshot,
  Timestamp,
  query,
  where,
  orderBy,
} from 'firebase/firestore';
import {
  Plus,
  Calendar,
  Users,
  Image as ImageIcon,
  Settings,
  ChevronRight,
  Clock,
  QrCode,
  AlertCircle,
  Shield,
  CreditCard,
  TrendingUp,
  Crown,
} from 'lucide-react';
import { Skeleton } from '@/components/ui/skeleton';
import { useLanguage } from '@/hooks/use-language';
import { t } from '@/lib/i18n';

interface EventItem {
  id: string;
  name: string;
  eventType: string;
  startDate: Timestamp;
  status: string;
  guests?: number;
  photos?: number;
  tier?: string;
  paymentStatus?: string;
  paidAt?: Timestamp;
}

function getStatusColor(status: string) {
  switch (status) {
    case 'active':
      return 'text-emerald-400 bg-emerald-950/50 border-emerald-800';
    case 'upcoming':
      return 'text-amber-400 bg-amber-950/50 border-amber-800';
    case 'ended':
      return 'text-zinc-400 bg-zinc-900/50 border-zinc-700';
    case 'revealed':
      return 'text-violet-400 bg-violet-950/50 border-violet-800';
    default:
      return 'text-zinc-400 bg-zinc-900/50 border-zinc-700';
  }
}

const tierColors: Record<string, string> = {
  basic: 'text-zinc-400 bg-zinc-900/50 border-zinc-700',
  standard: 'text-indigo-400 bg-indigo-950/50 border-indigo-800',
  premium: 'text-amber-400 bg-amber-950/50 border-amber-800',
};

const tierNames: Record<string, string> = {
  basic: 'Basic',
  standard: 'Plus',
  premium: 'Premium',
};

export default function DashboardPage() {
  const router = useRouter();
  const { user, loading: authLoading, isAdmin } = useAuth();
  const { lang } = useLanguage();
  const [events, setEvents] = useState<EventItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const formatDate = (timestamp: Timestamp | undefined) => {
    if (!timestamp) return t(lang, 'noDate');
    const date = timestamp.toDate();
    return date.toLocaleDateString('en-US', {
      month: 'short',
      day: 'numeric',
      year: 'numeric',
    });
  };

  useEffect(() => {
    if (!authLoading && !user) {
      router.push('/auth?redirect=/dashboard');
      return;
    }
    if (!user) return;

    // Fetch all events and filter client-side (works with existing rules)
    const unsubscribe = onSnapshot(
      collection(db, 'events'),
      (snapshot) => {
        const eventsData = snapshot.docs
          .map((doc) => ({
            id: doc.id,
            ...doc.data(),
          }))
          .filter((e: any) => e.hostId === user.uid)
          .sort((a: any, b: any) => {
            const aTime = a.createdAt?.seconds || 0;
            const bTime = b.createdAt?.seconds || 0;
            return bTime - aTime;
          }) as EventItem[];
        setEvents(eventsData);
        setLoading(false);
      },
      (err) => {
        console.error('Error fetching events:', err);
        setError(`${t(lang, 'failedLoadEvents')}: ${err.message}`);
        setLoading(false);
      }
    );

    return () => unsubscribe();
  }, [user, authLoading, router]);

  if (authLoading || loading) {
    return (
      <div className="min-h-screen bg-background">
        <header className="sticky top-0 z-50 border-b border-zinc-900 bg-background/80 backdrop-blur-md">
          <div className="max-w-3xl mx-auto px-4 h-14 flex items-center justify-between">
            <Skeleton className="h-6 w-16" />
            <Skeleton className="h-9 w-24 rounded-full" />
          </div>
        </header>
        <main className="max-w-3xl mx-auto px-4 py-8">
          <div className="mb-8">
            <Skeleton className="h-8 w-48 mb-2" />
            <Skeleton className="h-4 w-64" />
          </div>
          <div className="space-y-3">
            {[1, 2, 3].map((i) => (
              <div key={i} className="flex items-center gap-4 p-4 rounded-2xl border border-zinc-800">
                <Skeleton className="h-12 w-12 rounded-xl shrink-0" />
                <div className="flex-1 space-y-2">
                  <Skeleton className="h-5 w-48" />
                  <Skeleton className="h-3 w-32" />
                </div>
                <Skeleton className="h-5 w-5" />
              </div>
            ))}
          </div>
        </main>
      </div>
    );
  }

  if (!user) return null;

  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="sticky top-0 z-50 border-b border-zinc-900 bg-background/80 backdrop-blur-md">
        <div className="max-w-3xl mx-auto px-4 h-14 flex items-center justify-between">
          <Link href="/" className="text-lg font-bold">
            Momira
          </Link>
          <div className="flex items-center gap-3">
            {isAdmin && (
              <Link
                href="/admin"
                className="h-8 px-3 rounded-full bg-amber-500/10 border border-amber-500/30 flex items-center gap-1.5 text-xs font-medium text-amber-400 hover:bg-amber-500/20 transition-colors"
              >
                <Shield className="h-3 w-3" />
                Admin
              </Link>
            )}
            <Link
              href="/settings"
              className="h-8 px-3 rounded-full bg-zinc-800 flex items-center justify-center text-xs font-medium hover:bg-zinc-700 transition-colors"
            >
              {user?.phoneNumber || t(lang, 'user')}
            </Link>
            <Link
              href="/event/create"
              className="inline-flex items-center gap-1.5 h-9 px-4 rounded-full bg-gradient-to-r from-indigo-500 to-purple-600 text-white text-sm font-medium hover:from-indigo-600 hover:to-purple-700 transition-all shadow-md shadow-indigo-500/20"
            >
              <Plus className="h-4 w-4" />
              {t(lang, 'newEvent')}
            </Link>
          </div>
        </div>
      </header>

      <main className="max-w-3xl mx-auto px-4 py-8">
        {/* Welcome */}
        <div className="mb-6">
          <h1 className="text-2xl font-bold mb-1 text-white">{t(lang, 'yourEvents')}</h1>
          <p className="text-zinc-500 text-sm">
            {events.length} {t(lang, 'events').toLowerCase()}
          </p>
        </div>

        {/* Stats Cards */}
        {events.length > 0 && (
          <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-6">
            <div className="p-4 rounded-2xl border border-zinc-800 bg-zinc-900/30">
              <Calendar className="h-4 w-4 text-indigo-400 mb-2" />
              <div className="text-2xl font-bold text-white">{events.length}</div>
              <div className="text-xs text-zinc-500">{t(lang, 'events')}</div>
            </div>
            <div className="p-4 rounded-2xl border border-zinc-800 bg-zinc-900/30">
              <ImageIcon className="h-4 w-4 text-emerald-400 mb-2" />
              <div className="text-2xl font-bold text-white">{events.reduce((s, e) => s + (e.photos || 0), 0)}</div>
              <div className="text-xs text-zinc-500">{lang === 'ar' ? '\u0635\u0648\u0631\u0629' : 'Photos'}</div>
            </div>
            <div className="p-4 rounded-2xl border border-zinc-800 bg-zinc-900/30">
              <Users className="h-4 w-4 text-violet-400 mb-2" />
              <div className="text-2xl font-bold text-white">{events.reduce((s, e) => s + (e.guests || 0), 0)}</div>
              <div className="text-xs text-zinc-500">{lang === 'ar' ? '\u0636\u064a\u0641' : 'Guests'}</div>
            </div>
            <div className="p-4 rounded-2xl border border-zinc-800 bg-zinc-900/30">
              <TrendingUp className="h-4 w-4 text-amber-400 mb-2" />
              <div className="text-2xl font-bold text-white">{events.filter(e => e.status === 'active').length}</div>
              <div className="text-xs text-zinc-500">{lang === 'ar' ? '\u0646\u0634\u0637\u0629' : 'Active'}</div>
            </div>
          </div>
        )}

        {error && (
          <div className="mb-6 p-4 rounded-2xl border border-red-800 bg-red-950/20 flex items-center gap-3 text-red-400 text-sm">
            <AlertCircle className="h-4 w-4 shrink-0" />
            {error}
          </div>
        )}

        {/* Events List */}
        {events.length === 0 ? (
          <div className="text-center py-16">
            <div className="h-16 w-16 rounded-2xl bg-zinc-900 flex items-center justify-center mx-auto mb-4">
              <Calendar className="h-8 w-8 text-zinc-600" />
            </div>
            <h3 className="text-lg font-semibold mb-2 text-white">{t(lang, 'noEvents')}</h3>
            <p className="text-zinc-500 text-sm mb-6">{t(lang, 'createEvent')}</p>
            <Link
              href="/event/create"
              className="inline-flex items-center gap-2 h-10 px-6 rounded-full bg-gradient-to-r from-indigo-500 to-purple-600 text-white text-sm font-medium hover:from-indigo-600 hover:to-purple-700 transition-all shadow-md shadow-indigo-500/20"
            >
              <Plus className="h-4 w-4" />
              {t(lang, 'createEvent')}
            </Link>
          </div>
        ) : (
          <div className="space-y-3">
            {events.map((event) => (
              <Link
                key={event.id}
                href={`/event/${event.id}`}
                className="flex items-center gap-4 p-4 rounded-2xl border border-zinc-800 bg-zinc-900/30 hover:border-zinc-700 transition-colors group"
              >
                <div className="h-12 w-12 rounded-xl bg-zinc-800 flex items-center justify-center text-2xl shrink-0">
                  {event.eventType === 'wedding' && '💍'}
                  {event.eventType === 'party' && '🎉'}
                  {event.eventType === 'birthday' && '🎂'}
                  {event.eventType === 'trip' && '✈️'}
                  {event.eventType === 'corporate' && '🏢'}
                  {event.eventType === 'other' && '📸'}
                </div>
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-2 mb-1">
                    <h3 className="font-semibold truncate text-white">{event.name}</h3>
                    <span
                      className={`text-[10px] uppercase tracking-wider px-2 py-0.5 rounded-full border ${getStatusColor(
                        event.status
                      )}`}
                    >
                      {event.status}
                    </span>
                  </div>
                  <div className="flex items-center gap-3 text-xs text-zinc-500">
                    <span className="flex items-center gap-1">
                      <Calendar className="h-3 w-3" />
                      {formatDate(event.startDate)}
                    </span>
                    <span className="flex items-center gap-1">
                      <Users className="h-3 w-3" />
                      {event.guests || 0} guests
                    </span>
                    {(event.photos || 0) > 0 && (
                      <span className="flex items-center gap-1">
                        <ImageIcon className="h-3 w-3" />
                        {event.photos} photos
                      </span>
                    )}
                    {event.tier && event.tier !== 'free' && (
                      <span className={`text-[9px] uppercase tracking-wider px-1.5 py-0.5 rounded-full border ${tierColors[event.tier] || tierColors.basic}`}>
                        {tierNames[event.tier] || event.tier}
                      </span>
                    )}
                    {event.paymentStatus === 'paid' && (
                      <span className="text-[9px] text-emerald-400 flex items-center gap-0.5">
                        <CreditCard className="h-2.5 w-2.5" /> Paid
                      </span>
                    )}
                  </div>
                </div>
                <ChevronRight className="h-5 w-5 text-zinc-600 group-hover:text-zinc-400 transition-colors" />
              </Link>
            ))}
          </div>
        )}

        {/* Quick Actions */}
        <div className="mt-12 grid grid-cols-2 sm:grid-cols-4 gap-3">
          {[
            { icon: QrCode, label: t(lang, 'scanQR'), href: '/qr' },
            { icon: Crown, label: lang === 'ar' ? 'الباقات' : 'Pricing', href: '/pricing' },
            { icon: ImageIcon, label: t(lang, 'gallery'), href: '#' },
            { icon: Settings, label: t(lang, 'settings'), href: '/settings' },
          ].map((action) => (
            <Link
              key={action.label}
              href={action.href}
              className="flex flex-col items-center gap-2 p-4 rounded-2xl border border-zinc-800 bg-zinc-900/30 hover:border-zinc-700 transition-colors"
            >
              <action.icon className="h-5 w-5 text-zinc-400" />
              <span className="text-xs text-zinc-400">{action.label}</span>
            </Link>
          ))}
        </div>
      </main>
    </div>
  );
}