import React, { useEffect, useRef, useState } from "react";
import { motion, AnimatePresence } from "framer-motion";

import { supabase } from "@/integrations/supabase/client";
import { fpInvoke, isFirstPromoterDisabled } from "@/lib/firstPromoterGate";
import {
  DollarSign, Trophy, BookOpen, Flame, TrendingUp, FileVideo, Zap,
  ChevronRight, ChevronDown, Star, Lock, Users, MousePointerClick, Wallet, ArrowUpRight,
  ShoppingCart, RefreshCw, Instagram, Medal, Link2, Copy, Check,
} from "lucide-react";
import { Progress } from "@/components/ui/progress";
import AvatarDisplay from "@/components/AvatarDisplay";
import AccelerateBanner from "@/components/AccelerateBanner";
import { getLevelImg, XP_LEVELS, getNextLevel, getLevelTaskProgress, type UserLevelStats } from "@/lib/levels";
import { LEVELS_ENABLED } from "@/lib/featureFlags";
import "@/styles/home-dashboard.css";
import "@/styles/home-dashboard-light.css";

// Verification is now driven by DB-backed userStats.accountVerified

export interface IgDataProp {
  username?: string;
  followersCount?: number;
  followsCount?: number;
  postsCount?: number;
  loading?: boolean;
}

export interface HomeDashboardProps {
  avatarId: string;
  displayName: string;
  level: { level: number; title: string; emoji: string; color: string; rate: string; postCap: number };
  nextLevel: { level: number; title: string; rate: string } | null;
  todayPosts: number;
  streak: number;
  totalPosts: number;
  streakAtRisk: boolean;
  onNavigate: (view: string) => void;
  postingLog?: Record<string, number>;
  bestStreak?: number;
  hoursUntilReset?: number;
  userStats?: UserLevelStats;
  /** True once totalSales has been loaded from FirstPromoter at least once. */
  salesLoaded?: boolean;
  igData?: IgDataProp;
  /** If provided, skip the live FP fetch and use these mock earnings */
  mockFpStats?: FPStats | null;
  mockMonthlyRecurring?: string;
}

interface FPStats {
  current_balance: string;
  total_earnings: string;
  paid_out_balance: string;
  pending_balance: string;
  total_sales: string;
  active_customers: string;
  total_sale_count: string;
  clicks: string;
  referrals: string;
  commission: string;
  referral_link?: string;
}

function formatCents(raw: string): string {
  const num = parseInt(raw, 10);
  if (isNaN(num) || num === 0) return "$0.00";
  return `$${(num / 100).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
}

const taskTypeIcon = (type: string) => {
  if (type === "posts") return <FileVideo size={14} />;
  if (type === "streak") return <Flame size={14} />;
  if (type === "sales") return <ShoppingCart size={14} />;
  return <Star size={14} />;
};

function getTaskNav(task: import("@/lib/levels").LevelTask): { view: string; label: string } | null {
  if (task.key === "acct_1") return { view: "accounts", label: "Go to Account Generator →" };
  if (task.type === "posts") return { view: "video-creator", label: "Go to Video Creator →" };
  if (task.type === "streak") return { view: "video-creator", label: "Go to Video Creator →" };
  if (task.type === "sales") return { view: "earn", label: "View Earnings →" };
  return null;
}

function HomeTaskCards({ tasks, levelColor, onNavigate }: { tasks: { task: import("@/lib/levels").LevelTask; current: number; done: boolean }[]; levelColor: string; onNavigate: (view: string) => void }) {
  const [openKey, setOpenKey] = useState<string | null>(null);

  return (
    <div className="homeDash__taskCards">
      {tasks.map(({ task, current, done }) => {
        const pct = task.target > 0 ? Math.min((current / task.target) * 100, 100) : 0;
        const isOpen = openKey === task.key;
        return (
          <div key={task.key} className={`homeDash__taskCard ${done ? "homeDash__taskCard--done" : "homeDash__taskCard--active"}`} style={{ "--task-color": done ? "#22c55e" : levelColor } as React.CSSProperties}>
            {!done && <div className="homeDash__taskGlow" />}
            <button
              className="homeDash__taskCardBtn"
              onClick={() => setOpenKey(isOpen ? null : task.key)}
              type="button"
            >
              <div className="homeDash__taskIconWrap" style={done ? { background: "rgba(34,197,94,0.15)", borderColor: "rgba(34,197,94,0.25)" } : {}}>
                {done ? <Check size={14} style={{ color: "#22c55e" }} /> : taskTypeIcon(task.type)}
              </div>
              <div className="homeDash__taskCardBody">
                <span className="homeDash__taskCardLabel">{task.label}</span>
                <div className="homeDash__taskBarOuter">
                  <motion.div
                    className="homeDash__taskBarInner"
                    style={{ backgroundColor: done ? "#22c55e" : levelColor }}
                    initial={{ width: 0 }}
                    animate={{ width: `${pct}%` }}
                    transition={{ duration: 0.8, ease: "easeOut", delay: 0.2 }}
                  />
                </div>
              </div>
              <span className="homeDash__taskCardValue">{current}/{task.target}</span>
              <ChevronDown
                size={14}
                className="homeDash__taskChevron"
                style={{ transform: isOpen ? "rotate(180deg)" : "rotate(0deg)" }}
              />
            </button>
            <AnimatePresence>
              {isOpen && task.description && (
                <motion.div
                  className="homeDash__taskDesc"
                  initial={{ height: 0, opacity: 0 }}
                  animate={{ height: "auto", opacity: 1 }}
                  exit={{ height: 0, opacity: 0 }}
                  transition={{ duration: 0.25, ease: [0.16, 1, 0.3, 1] }}
                >
                  <p>{task.description}</p>
                  {!done && (() => {
                    const nav = getTaskNav(task);
                    return nav ? (
                      <button
                        className="homeDash__taskNavLink"
                        onClick={() => onNavigate(nav.view)}
                        type="button"
                      >
                        {nav.label}
                      </button>
                    ) : null;
                  })()}
                </motion.div>
              )}
            </AnimatePresence>
          </div>
        );
      })}
    </div>
  );
}

function isRealSession(): boolean {
  const params = new URLSearchParams(window.location.search);
  if (params.get("email") && params.get("location")) return true;
  try {
    if (localStorage.getItem("dropcourse_location_id")) return true;
  } catch {}
  return false;
}

function isSystemEmail(em: string | null | undefined): boolean {
  if (!em) return false;
  const e = em.toLowerCase().trim();
  return (
    e.endsWith(".iam.gserviceaccount.com") ||
    e.includes("highlevel-backend") ||
    e.endsWith("@dropcourse.local")
  );
}

function getPreviewEmail(): string | null {
  const params = new URLSearchParams(window.location.search);
  const urlEmail = params.get("email");
  if (urlEmail && !isSystemEmail(urlEmail)) return urlEmail;

  try {
    const storedEmail = localStorage.getItem("dropcourse_preview_email");
    if (storedEmail && !isSystemEmail(storedEmail)) return storedEmail;
  } catch {}

  try {
    const storedEmail = localStorage.getItem("intercom_email");
    if (storedEmail && !isSystemEmail(storedEmail)) return storedEmail;
  } catch {}

  return null;
}

const spring = { type: "spring" as const, stiffness: 300, damping: 28 };

function useCountUp(end: number, duration = 900) {
  const [val, setVal] = useState(0);
  const ref = useRef<number>(0);
  useEffect(() => {
    if (end === 0) { setVal(0); return; }
    const start = performance.now();
    const tick = (now: number) => {
      const t = Math.min((now - start) / duration, 1);
      const eased = 1 - Math.pow(1 - t, 3);
      setVal(Math.floor(eased * end));
      if (t < 1) ref.current = requestAnimationFrame(tick);
    };
    ref.current = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(ref.current);
  }, [end, duration]);
  return val;
}

function getLast7Days(postingLog: Record<string, number>) {
  const days: { key: string; label: string; count: number }[] = [];
  const labels = ["S", "M", "T", "W", "T", "F", "S"];
  for (let i = 6; i >= 0; i--) {
    const d = new Date();
    d.setDate(d.getDate() - i);
    const key = d.toISOString().slice(0, 10);
    days.push({ key, label: labels[d.getDay()], count: postingLog[key] || 0 });
  }
  return days;
}

function getHeatColor(count: number): string {
  if (count === 0) return "var(--heat-empty)";
  if (count <= 2) return "var(--heat-low)";
  if (count <= 5) return "var(--heat-mid)";
  return "var(--heat-high)";
}

export default function HomeDashboard({
  avatarId, displayName, level, nextLevel,
  todayPosts, streak, totalPosts, streakAtRisk, onNavigate,
  postingLog = {}, bestStreak = 0, hoursUntilReset = 0, userStats, salesLoaded = false, igData,
  mockFpStats, mockMonthlyRecurring,
}: HomeDashboardProps) {
  const [fpStats, setFpStats] = useState<FPStats | null>(mockFpStats ?? null);
  const [fpLoading, setFpLoading] = useState(mockFpStats === undefined);
  const [monthlyRecurring, setMonthlyRecurring] = useState<string | null>(mockMonthlyRecurring ?? null);
  const igStats = igData && igData.username ? { followersCount: igData.followersCount ?? 0, followsCount: igData.followsCount ?? 0, postsCount: igData.postsCount ?? 0, username: igData.username } : null;
  const igLoading = igData?.loading ?? false;
  const [affiliateLink, setAffiliateLink] = useState<string>("");
  const [linkCopied, setLinkCopied] = useState(false);
  
  // accountVerified comes from DB-backed userStats prop (no localStorage)
  const accountVerified = userStats?.accountVerified ?? false;

  useEffect(() => {
    if (mockFpStats !== undefined) return; // Skip fetch when mock data provided
    const fetchFP = async () => {
      try {
        const hasPreviewIdentity = !!(new URLSearchParams(window.location.search).get("location") || localStorage.getItem("dropcourse_location_id"));

        if (hasPreviewIdentity) {
          for (let attempt = 0; attempt < 10; attempt += 1) {
            const { data: { session } } = await supabase.auth.getSession();
            if (session?.user) break;
            await new Promise((resolve) => setTimeout(resolve, 150));
          }
        }

        const previewEmail = getPreviewEmail();
        const projectId = import.meta.env.VITE_SUPABASE_PROJECT_ID;
        
        // If email URL param is present, always use direct preview path
        if (previewEmail && projectId && !isFirstPromoterDisabled()) {
          const fnUrl = `https://${projectId}.supabase.co/functions/v1/fp-pabbly-stats?preview_email=${encodeURIComponent(previewEmail)}`;
          const res = await fetch(fnUrl, {
            headers: { "Content-Type": "application/json", "apikey": import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY },
          });
          if (res.ok) {
            const d = await res.json();
            if (!d.error) {
              setFpStats(d as FPStats);
              // Fetch referrals to calculate monthly recurring from active commissions
              if (d.promoter_id) {
                try {
                  const refRes = await fetch(fnUrl, {
                    method: "POST",
                    headers: { "Content-Type": "application/json", "apikey": import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY },
                    body: JSON.stringify({ type: "referrals", promoter_id: d.promoter_id }),
                  });
                  if (refRes.ok) {
                    const refData = await refRes.json();
                    const activeRefs = (refData.referrals || []).filter((r: any) => r.state === "active" || r.state === "customer");
                    const totalRecurring = activeRefs.reduce((sum: number, r: any) => sum + (r.recurring_amount || 0), 0);
                    setMonthlyRecurring(`$${(totalRecurring / 100).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`);
                  }
                } catch {}
              }
            }
          }
          setFpLoading(false);
          return;
        }
        
        // No email param — try authenticated path
        const { data, error } = await fpInvoke("fp-pabbly-stats");
        if (!error && data && !data.error) {
          setFpStats(data as FPStats);
          if (data.promoter_id) {
            try {
              const { data: refData } = await fpInvoke("fp-pabbly-stats", {
                body: { type: "referrals", promoter_id: data.promoter_id },
              });
              const activeRefs = (refData?.referrals || []).filter((r: any) => r.state === "active" || r.state === "customer");
              const totalRecurring = activeRefs.reduce((sum: number, r: any) => sum + (r.recurring_amount || 0), 0);
              setMonthlyRecurring(`$${(totalRecurring / 100).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`);
            } catch {}
          }
        }
      } catch {}
      setFpLoading(false);
    };
    fetchFP();

    // Affiliate link comes from FP stats
  }, []);

  // Set affiliate link from FirstPromoter stats
  useEffect(() => {
    if (fpStats?.referral_link) setAffiliateLink(fpStats.referral_link);
  }, [fpStats?.referral_link]);
  const animatedStreak = useCountUp(streak, 800);
  const animatedTotal = useCountUp(totalPosts, 1000);

  const last7 = getLast7Days(postingLog);

  const currentLevelDef = XP_LEVELS.find(l => l.level === level.level);
  const stats: UserLevelStats = {
    totalPosts: Math.max(userStats?.totalPosts ?? 0, igStats?.postsCount ?? 0, totalPosts),
    bestStreak: userStats?.bestStreak ?? bestStreak,
    totalSales: userStats?.totalSales ?? 0,
    accountVerified: accountVerified || (!!igStats && (igStats.followersCount > 0 || igStats.postsCount > 0)),
  };
  const taskProgress = currentLevelDef ? getLevelTaskProgress(currentLevelDef, stats) : [];
  const completedTasks = taskProgress.filter(t => t.done).length;
  const totalTasks = taskProgress.length;
  const taskPct = totalTasks > 0 ? (completedTasks / totalTasks) * 100 : 100;

  return (
    <div className="homeDash">
      {/* ── Accelerate banner — only shown until first sale lands ──
          Wait for FP sale data to load before deciding, otherwise users
          who already have a sale see the banner flash on mount. */}
      {salesLoaded && (userStats?.totalSales ?? 0) < 1 && (
        <AccelerateBanner onStart={() => onNavigate("video-creator")} />
      )}

      {/* ── Your Rank / Commission ── */}
      {LEVELS_ENABLED ? (
        <>
          <h2 className="homeDash__sectionTitle"><Medal size={14} /> Your Rank</h2>
          <motion.div
            className="homeDash__mission"
            style={{ "--mission-color": level.color } as React.CSSProperties}
            initial={{ opacity: 0, y: 18 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ ...spring, delay: 0.05 }}
          >
            <div className="homeDash__missionShimmer" />
            <div className="homeDash__missionTop">
              <div className="homeDash__missionBadge">
                <img src={getLevelImg(level.level)} alt={level.title} className="homeDash__missionBadgeImg" />
              </div>
              <div className="homeDash__missionInfo">
                <div className="homeDash__missionRank">
                  <span className="homeDash__missionLevel">Level {level.level}</span>
                  <span className="homeDash__missionDot">·</span>
                  <span className="homeDash__missionTitle" style={{ color: level.color }}>{level.title}</span>
                </div>
                <div className="homeDash__missionRate">
                  <Zap size={12} className="homeDash__missionRateIcon" />
                  <span>{level.rate} recurring commission</span>
                </div>
              </div>
              {streak > 0 && (
                <div className="homeDash__missionStreak">
                  <Flame size={13} />
                  <span>{streak}</span>
                </div>
              )}
            </div>

            {/* Task progress */}
            <div className="homeDash__missionProgress">
              <div className="homeDash__missionBarWrap">
                <Progress value={taskPct} className="homeDash__missionBar" style={{ "--progress-color": level.color } as React.CSSProperties} />
              </div>
              <span className="homeDash__missionTaskCount">{completedTasks}/{totalTasks}</span>
            </div>

            {/* Task checklist */}
            {taskProgress.length > 0 && (
              <HomeTaskCards tasks={taskProgress} levelColor={level.color} onNavigate={onNavigate} />
            )}

            {/* Affiliate link */}
            {affiliateLink && (
              <div className="homeDash__affLink">
                <div className="homeDash__affLinkRow">
                  <Link2 size={12} className="homeDash__affLinkIcon" style={{ color: level.color }} />
                  <span className="homeDash__affLinkLabel">Your Link</span>
                </div>
                <button
                  className="homeDash__affLinkCopy"
                  onClick={() => {
                    navigator.clipboard.writeText(affiliateLink);
                    setLinkCopied(true);
                    setTimeout(() => setLinkCopied(false), 2000);
                  }}
                >
                  <span className="homeDash__affLinkUrl">{affiliateLink.replace(/^https?:\/\//, "")}</span>
                  {linkCopied ? <Check size={13} className="homeDash__affCopyIcon homeDash__affCopyIcon--done" style={{ color: level.color }} /> : <Copy size={13} className="homeDash__affCopyIcon" />}
                </button>
              </div>
            )}

            {nextLevel && (
              <div className="homeDash__missionNext">
                <ChevronRight size={11} />
                <span>Next: <strong style={{ color: XP_LEVELS.find(l => l.level === nextLevel.level)?.color }}>{(nextLevel as any).title}</strong></span>
                <span className="homeDash__missionNextRate">→ {(nextLevel as any).rate ?? "higher"}</span>
              </div>
            )}
          </motion.div>
        </>
      ) : null}

      {/* ── Your Earnings ── */}
      <motion.div
        className="homeDash__revenueGrid"
        initial={{ opacity: 0, y: 14 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ ...spring, delay: 0.08 }}
      >
        <h2 className="homeDash__sectionTitle" style={{ gridColumn: "1 / -1", marginBottom: 4 }}><DollarSign size={14} /> Your Earnings</h2>
        <RevenueCard
          icon={<Wallet size={20} />}
          label="Available"
          value={fpLoading ? "—" : formatCents(fpStats?.current_balance || "0")}
          color="#10b981"
          accent
        />
        <RevenueCard
          icon={<DollarSign size={20} />}
          label="Lifetime"
          value={fpLoading ? "—" : formatCents(fpStats?.total_earnings || "0")}
          color="#f59e0b"
        />
        <RevenueCard
          icon={<TrendingUp size={20} />}
          label="Monthly Recurring"
          value={fpLoading ? "—" : (monthlyRecurring || "$0.00")}
          color="#6366f1"
        />
        <RevenueCard
          icon={<Users size={20} />}
          label="Active Subscribers"
          value={fpLoading ? "—" : (fpStats?.active_customers || "0")}
          color="#ec4899"
        />
      </motion.div>

      {/* ── Instagram Stats ── */}
      <h2 className="homeDash__sectionTitle"><Instagram size={14} /> Social Media</h2>
      {igLoading ? (
        <motion.div
          className="homeDash__igCard"
          initial={{ opacity: 0, y: 14 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ ...spring, delay: 0.095 }}
        >
          <div className="homeDash__igHeader">
            <Instagram size={16} />
            <span className="homeDash__igTitle">Instagram</span>
          </div>
          <div className="homeDash__igGrid">
            <div className="homeDash__igStat"><span className="homeDash__igStatValue">—</span><span className="homeDash__igStatLabel">Followers</span></div>
            <div className="homeDash__igStat"><span className="homeDash__igStatValue">—</span><span className="homeDash__igStatLabel">Following</span></div>
            <div className="homeDash__igStat"><span className="homeDash__igStatValue">—</span><span className="homeDash__igStatLabel">Posts</span></div>
          </div>
        </motion.div>
      ) : igStats ? (
        <motion.div
          className="homeDash__igCard"
          initial={{ opacity: 0, y: 14 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ ...spring, delay: 0.095 }}
        >
          <div className="homeDash__igHeader">
            <Instagram size={16} />
            <span className="homeDash__igTitle">@{igStats.username}</span>
          </div>
          <div className="homeDash__igGrid">
            <div className="homeDash__igStat">
              <span className="homeDash__igStatValue">{igStats.followersCount.toLocaleString()}</span>
              <span className="homeDash__igStatLabel">Followers</span>
            </div>
            <div className="homeDash__igStat">
              <span className="homeDash__igStatValue">{igStats.followsCount.toLocaleString()}</span>
              <span className="homeDash__igStatLabel">Following</span>
            </div>
            <div className="homeDash__igStat">
              <span className="homeDash__igStatValue">{igStats.postsCount.toLocaleString()}</span>
              <span className="homeDash__igStatLabel">Posts</span>
            </div>
          </div>
        </motion.div>
      ) : (
        <motion.div
          className="homeDash__igCard homeDash__igCard--empty"
          initial={{ opacity: 0, y: 14 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ ...spring, delay: 0.095 }}
          onClick={() => onNavigate("accounts")}
          style={{ cursor: "pointer" }}
        >
          <div className="homeDash__igHeader">
            <Instagram size={16} />
            <span className="homeDash__igTitle">Instagram</span>
          </div>
          <div className="homeDash__igEmpty">
            <Lock size={20} className="homeDash__igEmptyIcon" />
            <span className="homeDash__igEmptyText">Not set up yet</span>
            <span className="homeDash__igEmptyHint">Create your account to track stats</span>
          </div>
        </motion.div>
      )}


    </div>
  );
}

/* ── Sub-components ── */

const RevenueCard = React.forwardRef<HTMLDivElement, {
  icon: React.ReactNode; label: string; value: string; color: string; accent?: boolean;
}>(({ icon, label, value, color, accent }, ref) => {
  return (
    <div ref={ref} className={`homeDash__revCard ${accent ? "homeDash__revCard--accent" : ""}`}>
      <div className="homeDash__revCardGlow" style={{ background: `radial-gradient(circle at 30% 30%, ${color}15, transparent 70%)` }} />
      <div className="homeDash__revIcon" style={{ color, background: `${color}14` }}>{icon}</div>
      <span className="homeDash__revValue" style={accent ? { color } : undefined}>{value}</span>
      <span className="homeDash__revLabel">{label}</span>
    </div>
  );
});
RevenueCard.displayName = "RevenueCard";

function BreakdownItem({ label, value, icon, color }: {
  label: string; value: string; icon: React.ReactNode; color: string;
}) {
  return (
    <div className="homeDash__breakdownItem">
      <div className="homeDash__breakdownIcon" style={{ color, background: `${color}14` }}>{icon}</div>
      <div className="homeDash__breakdownText">
        <span className="homeDash__breakdownLabel">{label}</span>
        <span className="homeDash__breakdownValue">{value}</span>
      </div>
    </div>
  );
}

function StatCard({ icon, color, value, label }: { icon: React.ReactNode; color: string; value: string; label: string }) {
  return (
    <div className="homeDash__statCard">
      <div className="homeDash__statAccent" style={{ background: `linear-gradient(90deg, ${color}, ${color}88)` }} />
      <div className="homeDash__statIcon shimmer-icon" style={{ color, background: `${color}14` }}>{icon}</div>
      <span className="homeDash__statValue">{value}</span>
      <span className="homeDash__statLabel">{label}</span>
    </div>
  );
}