"use client";

import { useEffect, useState, useCallback } from "react";
import { useSearchParams, useRouter } from "next/navigation";
import { createClient } from "@/lib/supabase/client";
import Card, { CardHeader } from "@/components/ui/Card";
import Spinner from "@/components/ui/Spinner";
import { Award, CheckCircle, Shield, AwardIcon, Star, HelpCircle, Trophy } from "lucide-react";
import { formatDate } from "@/lib/format";

type Reward = {
  id: string;
  name: string;
  description: string | null;
  points_required: number;
  earned?: boolean;
  earned_at?: string;
};

function useIsMobileViewport() {
  const [isMobile, setIsMobile] = useState(false);
  useEffect(() => {
    const check = () => setIsMobile(window.innerWidth < 768);
    check();
    window.addEventListener("resize", check);
    return () => window.removeEventListener("resize", check);
  }, []);
  return isMobile;
}

export default function AchievementPage() {
  const supabase = createClient();
  const searchParams = useSearchParams();
  const router = useRouter();
  const isViewportMobile = useIsMobileViewport();
  const isPreviewMobile = searchParams.get("preview") === "mobile";
  const isMobile = isViewportMobile || isPreviewMobile;

  const [loading, setLoading] = useState(true);
  const [profile, setProfile] = useState<any>(null);
  const [stats, setStats] = useState({ completedCount: 0 });
  const [badges, setBadges] = useState<Reward[]>([]);

  const load = useCallback(async () => {
    const { data: userRes } = await supabase.auth.getUser();
    if (!userRes.user) {
      router.push("/login");
      return;
    }

    const { data: prof } = await supabase
      .from("profiles")
      .select("*")
      .eq("id", userRes.user.id)
      .single();

    if (!prof) {
      router.push("/login");
      return;
    }
    setProfile(prof);

    // Fetch rewards, earned rewards, and applications
    const [rewardsRes, earnedRes, appsRes] = await Promise.all([
      supabase.from("rewards").select("*").order("points_required"),
      supabase.from("volunteer_rewards").select("reward_id, earned_at").eq("volunteer_id", userRes.user.id),
      supabase.from("applications").select("status, programs(status)").eq("volunteer_id", userRes.user.id),
    ]);

    const rewardsData = rewardsRes.data ?? [];
    const earnedData = earnedRes.data ?? [];
    const appsData = appsRes.data ?? [];

    // Count completed programs
    const completedCount = appsData.filter(
      (a: any) => a.status === "approved" && a.programs?.status === "completed"
    ).length;
    setStats({ completedCount });

    // Map badges: earned if in earnedData OR if student's merit >= points_required
    const mappedBadges = rewardsData.map((r: any) => {
      const explicitEarned = earnedData.find((e: any) => e.reward_id === r.id);
      const pointsEarned = prof.total_merit >= r.points_required;
      const earned = !!explicitEarned || pointsEarned;
      const earned_at = explicitEarned ? explicitEarned.earned_at : undefined;

      return {
        id: r.id,
        name: r.name,
        description: r.description,
        points_required: r.points_required,
        earned,
        earned_at,
      };
    });

    setBadges(mappedBadges);
    setLoading(false);
  }, [supabase, router]);

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

  if (loading) return <Spinner label="Loading achievements…" />;

  // Badges stats
  const earnedCount = badges.filter((b) => b.earned).length;

  // Render badge visual icon helper
  function renderBadgeIcon(badgeName: string, earned: boolean) {
    const color = earned ? "text-amber-500" : "text-sand-dark";
    if (badgeName.includes("Gold")) return <Trophy size={40} className={earned ? "text-yellow-500" : color} />;
    if (badgeName.includes("Silver")) return <Shield size={40} className={earned ? "text-slate-400" : color} />;
    if (badgeName.includes("Bronze")) return <Award size={40} className={earned ? "text-amber-700" : color} />;
    return <Star size={40} className={earned ? "text-emerald" : color} />;
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className={`${isMobile ? "text-xl font-bold" : "text-2xl font-extrabold"} text-ink`}>
            Achievements &amp; Badges
          </h1>
          <p className="text-sm text-muted">Track your volunteer milestones and special honors.</p>
        </div>
      </div>

      {/* Stats Summary Grid */}
      <div className="grid grid-cols-2 gap-4">
        <div className="rounded-card bg-white p-5 shadow-card border border-sand-dark/60 text-center flex flex-col items-center justify-center">
          <AwardIcon size={32} className="text-emerald mb-2" />
          <p className="text-2xl font-extrabold text-ink">{earnedCount}</p>
          <p className="text-xs text-muted font-semibold uppercase tracking-wider mt-0.5">Badges Earned</p>
        </div>
        <div className="rounded-card bg-white p-5 shadow-card border border-sand-dark/60 text-center flex flex-col items-center justify-center">
          <CheckCircle size={32} className="text-teal mb-2" />
          <p className="text-2xl font-extrabold text-ink">{stats.completedCount}</p>
          <p className="text-xs text-muted font-semibold uppercase tracking-wider mt-0.5">Programs Completed</p>
        </div>
      </div>

      {/* Badges Grid */}
      <Card>
        <CardHeader title="Badges Showcase" />
        <div className="p-5 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {badges.length > 0 ? (
            badges.map((b) => {
              const progressPct = profile ? Math.min(100, Math.round((profile.total_merit / b.points_required) * 100)) : 0;
              const pointsRemaining = b.points_required - (profile?.total_merit || 0);

              return (
                <div
                  key={b.id}
                  className={`relative flex flex-col items-center text-center p-5 rounded-card border transition-all ${
                    b.earned
                      ? "border-emerald/20 bg-emerald-light/10 shadow-cardHover"
                      : "border-sand-dark/50 bg-white"
                  }`}
                >
                  {/* Earned Stamp */}
                  {b.earned && (
                    <span className="absolute right-2 top-2 rounded-full bg-emerald-light px-2 py-0.5 text-[8px] font-extrabold text-emerald uppercase tracking-wider">
                      Unlocked
                    </span>
                  )}

                  {/* Badge Graphic */}
                  <div className="mb-4">
                    {renderBadgeIcon(b.name, !!b.earned)}
                  </div>

                  <h3 className="text-sm font-bold text-ink leading-snug">{b.name}</h3>
                  <p className="mt-1 text-xs text-muted line-clamp-2 min-h-[32px] px-2">
                    {b.description || "Earned by achieving specific volunteer milestones."}
                  </p>

                  <div className="mt-4 w-full border-t border-sand-light pt-3">
                    {b.earned ? (
                      <div>
                        <p className="text-[10px] text-emerald font-bold">Requirement Met</p>
                        <p className="text-[9px] text-muted">
                          {b.earned_at ? `Awarded on ${formatDate(b.earned_at)}` : `Unlocked at ${b.points_required} MP`}
                        </p>
                      </div>
                    ) : (
                      <div className="space-y-1.5">
                        <div className="flex justify-between text-[10px] text-muted">
                          <span>Progress</span>
                          <span className="font-semibold">{profile?.total_merit} / {b.points_required} MP</span>
                        </div>
                        {/* Progress bar */}
                        <div className="h-1.5 w-full rounded-full bg-sand">
                          <div
                            className="h-1.5 rounded-full bg-emerald"
                            style={{ width: `${progressPct}%` }}
                          />
                        </div>
                        <p className="text-[9px] text-muted leading-none">
                          Need {pointsRemaining} more MP to unlock
                        </p>
                      </div>
                    )}
                  </div>
                </div>
              );
            })
          ) : (
            <p className="col-span-full text-center py-10 text-xs text-muted">No badges defined.</p>
          )}
        </div>
      </Card>
    </div>
  );
}