"use client";

import { useEffect, useState } from "react";
import { Users, Video, CheckCircle2, Clock, TrendingUp, UserCheck } from "lucide-react";
import { PageHeader, ErrorBanner } from "@/components/ui/page-components";
import { Card, CardContent } from "@/components/ui/card";
import { cn } from "@/lib/utils";
import { useAdminStore } from "@/store";
import {
  GoogleMeetIcon,
  MicrosoftTeamsIcon,
  ZoomIcon,
  JitsiIcon,
} from "@/components/ui/platform-icons";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";

interface StatCardProps {
  label: string;
  value: number | string;
  icon: React.ElementType;
  gradient: string;
  loading?: boolean;
}

function StatCard({ label, value, icon: Icon, gradient, loading }: StatCardProps) {
  return (
    <Card className={cn("overflow-hidden border-0", gradient)}>
      <CardContent className="p-5 text-white">
        <div className="flex items-center gap-4">
          <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-white/20">
            <Icon className="h-5 w-5 text-white" />
          </div>
          <div>
            <p className="text-xs font-medium opacity-70">{label}</p>
            {loading ? (
              <div className="h-7 w-12 bg-white/30 rounded animate-pulse mt-1" />
            ) : (
              <p className="text-2xl font-bold">{value}</p>
            )}
          </div>
        </div>
      </CardContent>
    </Card>
  );
}
export default function AdminPage() {
  const { stats, loading, error, fetchStats } = useAdminStore();

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

  const statCards = [
    {
      label: "Total Users",
      value: stats?.total_users ?? 0,
      icon: Users,
      gradient: "bg-gradient-to-br from-blue-500 to-blue-600 dark:from-blue-600 dark:to-blue-700",
    },
    {
      label: "Approved Users",
      value: stats?.approved_users ?? 0,
      icon: UserCheck,
      gradient: "bg-gradient-to-br from-emerald-500 to-emerald-600 dark:from-emerald-600 dark:to-emerald-700",
    },
    {
      label: "Pending Approval",
      value: stats?.pending_approval ?? 0,
      icon: Clock,
      gradient: "bg-gradient-to-br from-amber-500 to-amber-600 dark:from-amber-600 dark:to-amber-700",
    },
    {
      label: "Total Meetings",
      value: stats?.total_meetings ?? 0,
      icon: Video,
      gradient: "bg-gradient-to-br from-violet-500 to-violet-600 dark:from-violet-600 dark:to-violet-700",
    },
    {
      label: "Completed",
      value: stats?.completed_meetings ?? 0,
      icon: CheckCircle2,
      gradient: "bg-gradient-to-br from-green-500 to-green-600 dark:from-green-600 dark:to-green-700",
    },
    {
      label: "Active Now",
      value: stats?.active_now ?? 0,
      icon: TrendingUp,
      gradient: "bg-gradient-to-br from-orange-500 to-orange-600 dark:from-orange-600 dark:to-orange-700",
    },
  ];

  return (
    <div className="space-y-6">
      <PageHeader
        title="Admin Dashboard"
        description="Manage users, monitor meetings, and view platform statistics"
      />

      {error && (
        <ErrorBanner message={error} onRetry={fetchStats} />
      )}

      <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
        {statCards.map((card) => (
          <StatCard key={card.label} {...card} loading={loading && !stats} />
        ))}
      </div>

      {stats && (
        <div className="grid gap-6 grid-cols-1 lg:grid-cols-3">
          {stats.recording_statistics && (
            <Card className="lg:col-span-2 border border-gray-100 dark:border-gray-800 shadow-sm bg-white dark:bg-gray-900 rounded-2xl overflow-hidden">
              <CardContent className="p-6">
                <h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-6 flex items-center gap-2">
                  <Video className="h-4 w-4 text-violet-500" />
                  Recording Statistics
                </h3>
                <div className="grid gap-4 grid-cols-1 sm:grid-cols-3">
                  <div className="rounded-xl border border-gray-150 dark:border-gray-800 p-4 bg-gray-50/50 dark:bg-gray-950/20">
                    <p className="text-xs text-gray-500 dark:text-gray-400 font-medium">Recorded Meetings</p>
                    <p className="text-2xl font-bold text-gray-900 dark:text-gray-100 mt-2">
                      {stats.recording_statistics.recorded_meetings_count}
                    </p>
                  </div>
                  <div className="rounded-xl border border-gray-150 dark:border-gray-800 p-4 bg-gray-50/50 dark:bg-gray-950/20">
                    <p className="text-xs text-gray-500 dark:text-gray-400 font-medium">Total Recorded Time</p>
                    <p className="text-2xl font-bold text-gray-900 dark:text-gray-100 mt-2">
                      {stats.recording_statistics.total_recorded_duration_formatted}
                    </p>
                  </div>
                  <div className="rounded-xl border border-gray-150 dark:border-gray-800 p-4 bg-gray-50/50 dark:bg-gray-950/20">
                    <p className="text-xs text-gray-500 dark:text-gray-400 font-medium">Average Duration</p>
                    <p className="text-2xl font-bold text-gray-900 dark:text-gray-100 mt-2">
                      {stats.recording_statistics.average_duration_formatted}
                    </p>
                  </div>
                </div>
              </CardContent>
            </Card>
          )}

          {/* Platform Usage Insights */}
          <Card className="lg:col-span-1 border border-gray-100 dark:border-gray-800 shadow-sm bg-white dark:bg-gray-900 rounded-2xl overflow-hidden">
            <CardContent className="p-6">
              <h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-6 flex items-center gap-2">
                <Video className="h-4 w-4 text-indigo-500" />
                Integration & Platform Popularity
              </h3>
              
              <div className="space-y-4">
                {/* Google Meet */}
                <div className="flex items-center gap-3">
                  <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-50 dark:bg-emerald-950/40 text-emerald-600 dark:text-emerald-400 shrink-0">
                    <GoogleMeetIcon size={16} />
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center justify-between text-xs mb-1">
                      <span className="font-semibold text-gray-700 dark:text-gray-300">Google Meet</span>
                      <span className="text-gray-500 dark:text-gray-400 font-medium">
                        {(() => {
                          const val = stats.platform_statistics?.platforms?.google_meet ?? 0;
                          return val % 1 === 0 ? `${val}%` : `${val.toFixed(1)}%`;
                        })()}
                      </span>
                    </div>
                    <div className="h-2 w-full bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden">
                      <div 
                        className="h-full bg-emerald-500 dark:bg-emerald-450 rounded-full transition-all duration-500" 
                        style={{ width: `${stats.platform_statistics?.platforms?.google_meet ?? 0}%` }} 
                      />
                    </div>
                  </div>
                </div>

                {/* Microsoft Teams */}
                <div className="flex items-center gap-3">
                  <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-indigo-50 dark:bg-indigo-950/40 text-indigo-600 dark:text-indigo-400 shrink-0">
                    <MicrosoftTeamsIcon size={16} />
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center justify-between text-xs mb-1">
                      <span className="font-semibold text-gray-700 dark:text-gray-300">Microsoft Teams</span>
                      <span className="text-gray-500 dark:text-gray-400 font-medium">
                        {(() => {
                          const val = stats.platform_statistics?.platforms?.microsoft_teams ?? 0;
                          return val % 1 === 0 ? `${val}%` : `${val.toFixed(1)}%`;
                        })()}
                      </span>
                    </div>
                    <div className="h-2 w-full bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden">
                      <div 
                        className="h-full bg-indigo-500 dark:bg-indigo-450 rounded-full transition-all duration-500" 
                        style={{ width: `${stats.platform_statistics?.platforms?.microsoft_teams ?? 0}%` }} 
                      />
                    </div>
                  </div>
                </div>

                {/* Zoom */}
                <div className="flex items-center gap-3">
                  <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-50 dark:bg-blue-950/40 text-blue-600 dark:text-blue-400 shrink-0">
                    <ZoomIcon size={16} />
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center justify-between text-xs mb-1">
                      <span className="font-semibold text-gray-700 dark:text-gray-300">Zoom</span>
                      <span className="text-gray-500 dark:text-gray-400 font-medium">
                        {(() => {
                          const val = stats.platform_statistics?.platforms?.zoom ?? 0;
                          return val % 1 === 0 ? `${val}%` : `${val.toFixed(1)}%`;
                        })()}
                      </span>
                    </div>
                    <div className="h-2 w-full bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden">
                      <div 
                        className="h-full bg-blue-500 dark:bg-blue-450 rounded-full transition-all duration-500" 
                        style={{ width: `${stats.platform_statistics?.platforms?.zoom ?? 0}%` }} 
                      />
                    </div>
                  </div>
                </div>

                {/* Jitsi */}
                <div className="flex items-center gap-3">
                  <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-sky-50 dark:bg-sky-950/40 text-sky-600 dark:text-sky-400 shrink-0">
                    <JitsiIcon size={16} />
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center justify-between text-xs mb-1">
                      <span className="font-semibold text-gray-700 dark:text-gray-300">Jitsi</span>
                      <span className="text-gray-500 dark:text-gray-400 font-medium">
                        {(() => {
                          const val = stats.platform_statistics?.platforms?.jitsi ?? 0;
                          return val % 1 === 0 ? `${val}%` : `${val.toFixed(1)}%`;
                        })()}
                      </span>
                    </div>
                    <div className="h-2 w-full bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden">
                      <div 
                        className="h-full bg-sky-500 dark:bg-sky-400 rounded-full transition-all duration-500" 
                        style={{ width: `${stats.platform_statistics?.platforms?.jitsi ?? 0}%` }} 
                      />
                    </div>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      )}
    </div>
  );
}