"use client"

import { fetchWithAuth } from "@/lib/apiClient";
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { BrainCircuit, Play, CheckCircle2, Download, Filter, Lock, FileText, Eye, ShieldAlert, X, Sparkles, Share2, Maximize2, Minimize2, Zap } from "lucide-react"

import { useEffect, useState } from "react"
import Link from "next/link"
import { useActiveUser } from "@/hooks/useActiveUser"

export default function AIDailyPracticePage() {
  const { user, userId, hasAccessTo } = useActiveUser()
  const [dpps, setDpps] = useState<any[]>([])
  const [attempts, setAttempts] = useState<any[]>([])
  const [loading, setLoading] = useState(true)
  const [dateFilter, setDateFilter] = useState("")
  
  const [selectedPdfDpp, setSelectedPdfDpp] = useState<any | null>(null)
  const [isFullScreen, setIsFullScreen] = useState(false)
  const [copiedShare, setCopiedShare] = useState(false)

  useEffect(() => {
    async function fetchDpps() {
      if (!user) return; // Wait for user to be available

      try {
        const pattern = user.target_exam || "JEE_Main";
        // Also fetch from the correct Next.js proxied route instead of localhost:8000
        const res = await fetchWithAuth(`/api/tests?type=DPS`);
        if (res.ok) {
          let data = await res.json()
          
          // Filter by subject based on target exam
          const target = user.target_exam || "JEE_Main";
          data = data.filter((dpp: any) => {
            const title = dpp.title.toLowerCase();
            const isMath = title.includes("math");
            const isBio = title.includes("bio") || title.includes("botany") || title.includes("zoology");
            
            if (target === "NEET" && isMath) return false;
            if (target.startsWith("JEE") && target !== "JEE_NEET" && isBio) return false;
            return true;
          });
          
          setDpps(data)
        }
        
        if (userId) {
          const attemptsRes = await fetchWithAuth(`/api/users/${userId}/attempts`);
          if (attemptsRes.ok) {
            const attemptsData = await attemptsRes.json();
            setAttempts(attemptsData);
          }
        }
      } catch (err) {
        console.error("Failed to fetch DPPs", err)
      } finally {
        setLoading(false)
      }
    }
    fetchDpps()
  }, [user])

  const getDifficultyColor = (diff: string) => {
    switch(diff) {
      case 'Easy': return 'text-emerald-500 bg-emerald-500/10 border-emerald-500/20';
      case 'Medium': return 'text-amber-500 bg-amber-500/10 border-amber-500/20';
      case 'Hard': return 'text-destructive bg-destructive/10 border-destructive/20';
      default: return 'text-primary bg-primary/10 border-primary/20';
    }
  }

  const attemptsByTest = attempts.reduce((acc, curr) => {
    // Isolate analytics to first attempt only - ignore retakes
    if (curr.is_retake) return acc;

    if (!acc[curr.source_id] || acc[curr.source_id].score < curr.score) {
      acc[curr.source_id] = curr;
    }
    return acc;
  }, {} as Record<string, any>);

  const filteredDpps = dpps.filter(dpp => {
    // Only show PDF DPPs here
    if (!dpp.pdf_url) return false;

    if (dateFilter) {
      if (!dpp.scheduled_date) return false;
      const scheduledDate = new Date(dpp.scheduled_date).toISOString().split('T')[0];
      if (scheduledDate !== dateFilter) return false;
    }
    
    return true;
  });

  const formatDate = (dateStr: string) => {
    return new Date(dateStr).toLocaleDateString("en-US", { year: 'numeric', month: 'short', day: 'numeric' });
  }

  const getPdfUrl = (title: string) => {
    const t = title.toLowerCase();
    if (t.includes('phys')) return '/dpps/dps-phy-ch4-20260707.pdf#toolbar=0&navpanes=0&scrollbar=0';
    if (t.includes('chem')) return '/dpps/dps-che-ch4-20260707.pdf#toolbar=0&navpanes=0&scrollbar=0';
    if (t.includes('math')) return '/dpps/dps-mth-ch4-20260707.pdf#toolbar=0&navpanes=0&scrollbar=0';
    if (t.includes('bio')) return '/dpps/dps-bio-ch4-20260707.pdf#toolbar=0&navpanes=0&scrollbar=0';
    return '/dpps/dps-phy-ch4-20260707.pdf#toolbar=0&navpanes=0&scrollbar=0';
  };

  // Strip ugly ExamEnum. prefix from seeded test titles
  const cleanTitle = (title: string) => title.replace(/\s*\(ExamEnum\.[^)]+\)/, '');

  return (
    <div className="p-6 md:p-8 space-y-6 animate-in fade-in zoom-in-95 origin-top duration-500 max-w-7xl mx-auto">
      {/* Page Header */}
      <div className="border-b border-border/50 pb-6">
        <div className="flex items-start justify-between gap-4 flex-wrap">
          <div>
            <h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-1">
              <span className="p-2.5 rounded-xl bg-cyan-50 dark:bg-[var(--cyan-ai-10)] border border-cyan-300/60 dark:border-[var(--cyan-ai-20)]">
                <FileText className="text-primary" size={28} /></span>
              Daily Practice (DPP)
            </h1>
            <p className="text-muted-foreground text-base font-medium max-w-2xl pl-1">
              Launch Daily Practice Problems (DPPs) tailored to your exam pattern.
            </p>
          </div>
          
        </div>
      </div>

      <div className="flex flex-col sm:flex-row justify-between items-center gap-4 border-b border-border pb-6">
        <div className="flex items-center gap-2">
          <input
            type="date"
            value={dateFilter}
            onChange={(e) => setDateFilter(e.target.value)}
            className="px-3 py-1.5 bg-background border border-border rounded-lg text-xs font-bold focus:ring-2 focus:ring-[var(--cyan-ai)] outline-none text-muted-foreground mr-2"
          />
          
        </div>
        <Button variant="outline" className="gap-2 rounded-xl text-sm font-bold">
          <Download size={16} /> Export as PDF
        </Button>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {loading ? (
          <div className="col-span-2 text-center py-12 text-muted-foreground">Loading AI-generated DPPs...</div>
        ) : filteredDpps.length === 0 ? (
          <div className="col-span-2 text-center py-12 text-muted-foreground border border-dashed rounded-xl">No DPPs available for the selected criteria.</div>
        ) : filteredDpps.map((dpp, i) => {
          // Calculate total questions dynamically from sections
          let count = 0;
          if (dpp.sections) {
             Object.values(dpp.sections).forEach((s: any) => { count += (s.questions?.length || 0) });
          }
          
          const attempt = attemptsByTest[dpp.id];
          const isAttempted = !!attempt;
          
          // Date logic
          const now = new Date();
          const scheduledTime = dpp.scheduled_date ? new Date(dpp.scheduled_date) : now;
          const endTime = dpp.end_date ? new Date(dpp.end_date) : null;
          const isUpcoming = scheduledTime > now;
          const isExpired = endTime ? now > endTime : false;

          return (
          <Card key={dpp.id} className={`group cursor-pointer transition-all hover:shadow-md ${isAttempted ? 'opacity-70 hover:opacity-100 bg-secondary/10 border-primary/20' : isExpired ? 'opacity-80' : 'hover:border-[var(--cyan-ai-10)] bg-background'}`}>
            <CardContent className="p-6 flex flex-col md:flex-row md:items-center justify-between gap-4">
              <div className="flex gap-4 items-start w-full">
                <div className={`mt-1 flex-shrink-0 ${isAttempted ? 'text-green-500' : 'text-foreground'}`}>
                  {isAttempted ? <CheckCircle2 size={24} /> : <div className="size-6 rounded-full border-2 border-muted-foreground flex items-center justify-center opacity-50"></div>}
                </div>
                <div>
                  <div className="flex items-center gap-2 mb-1">
                    <span className="text-xs font-bold uppercase tracking-wider text-[var(--cyan-ai)]">
                      {user?.target_exam?.replace("_", " ") || "JEE/NEET"}
                    </span>
                    <span className="text-muted-foreground text-xs font-bold">•</span>
                    <span className="text-xs font-bold uppercase tracking-wider text-muted-foreground">{dpp.difficulty} Level</span>
                    {isUpcoming ? (
                      <>
                        <span className="text-muted-foreground text-xs font-bold">•</span>
                        <span className="text-[10px] font-bold uppercase text-yellow-500 bg-yellow-500/10 px-1.5 py-0.5 rounded">Upcoming</span>
                      </>
                    ) : isExpired ? (
                      <>
                        <span className="text-muted-foreground text-xs font-bold">•</span>
                        <span className="text-[10px] font-bold uppercase text-muted-foreground bg-secondary px-1.5 py-0.5 rounded">Expired</span>
                      </>
                    ) : null}
                  </div>
                  <h3 className="font-bold text-lg leading-tight group-hover:text-[var(--cyan-ai)] transition-colors">
                    {cleanTitle(dpp.title)}
                  </h3>
                  <div className="mt-1">
                    <span className={`text-[10px] uppercase px-2 py-0.5 rounded-md border font-bold tracking-wider ${getDifficultyColor(dpp.difficulty)}`}>
                      {dpp.difficulty}
                    </span>
                  </div>
                  <div className="text-sm text-muted-foreground mt-2 font-medium">
                    {count} Questions • {dpp.total_time} mins
                    {dpp.scheduled_date && (
                      <span className="ml-2 border-l border-border pl-2">
                        {isUpcoming ? `Available on ${formatDate(dpp.scheduled_date)}` : isExpired ? `Expired on ${formatDate(dpp.end_date!)}` : 'Available Now'}
                      </span>
                    )}
                  </div>
                </div>
              </div>
              <div className="flex flex-col sm:flex-row gap-2 shrink-0 md:self-center">
                {isUpcoming ? (
                  <Button disabled variant="outline" size="sm" className="font-bold">Starts Soon</Button>
                ) : isExpired && !isAttempted ? (
                  <Button disabled variant="outline" size="sm" className="font-bold bg-secondary/50">Expired</Button>
                ) : (
                  hasAccessTo('PRO') ? (
                    <Button onClick={() => setSelectedPdfDpp(dpp)} variant="secondary" size="sm" className="rounded-xl bg-[var(--cyan-ai)] text-black hover:bg-[var(--cyan-ai-80)] font-extrabold gap-2 text-xs shadow-[0_0_12px_rgba(12,96,96,0.2)]">
                      <FileText size={14} className="text-black" /> View PDF
                    </Button>
                  ) : (
                    <Button variant="outline" size="sm" className="opacity-50" disabled><Lock size={14} className="mr-2"/> View PDF</Button>
                  )
                )}
              </div>
            </CardContent>
          </Card>
        )})}
      </div>

      {/* ── PROTECTED PDF READER MODAL (FREE TIER) ── */}
      {selectedPdfDpp && (
        <div className={`fixed inset-0 z-50 bg-black/90 backdrop-blur-md flex items-center justify-center ${isFullScreen ? 'p-0' : 'p-4'}`}>
          <div className={`bg-background border border-border ${isFullScreen ? 'w-screen h-screen max-w-none max-h-none rounded-none border-0' : 'rounded-3xl w-full max-w-7xl max-h-[95vh]'} flex flex-col overflow-hidden shadow-2xl transition-all duration-300`}>
            {/* Modal Header */}
            <div className="p-4 md:p-5 border-b border-border bg-secondary/30 flex items-center justify-between">
              <div className="flex items-center gap-3">
                <div className="p-2.5 bg-primary/10 rounded-xl border border-primary/20 text-primary hidden sm:flex">
                  <FileText size={22} />
                </div>
                <div>
                  <h3 className="font-black text-base sm:text-lg flex items-center gap-2">
                    {selectedPdfDpp.title}
                    <span className="text-[10px] bg-yellow-500/10 text-yellow-500 border border-yellow-500/20 px-2 py-0.5 rounded-full uppercase tracking-wider font-extrabold hidden md:inline-block">
                      Protected In-App PDF View
                    </span>
                  </h3>
                  <p className="text-xs text-muted-foreground font-medium">
                    {selectedPdfDpp.difficulty} Level • {user?.target_exam?.replace("_", " ") || "JEE/NEET"} Practice Sheet
                  </p>
                </div>
              </div>
              <div className="flex items-center gap-2">
                <Button 
                  size="sm" 
                  variant="outline" 
                  onClick={() => {
                    navigator.clipboard.writeText(window.location.origin + '/dashboard/ai-coach/cbt-dpp');
                    setCopiedShare(true);
                    setTimeout(() => setCopiedShare(false), 2000);
                  }}
                  className="rounded-xl font-bold text-xs gap-1.5 h-9 px-3"
                >
                  {copiedShare ? <CheckCircle2 size={14} className="text-green-500" /> : <Share2 size={14} />}
                  <span>{copiedShare ? "Copied" : "Share PDF"}</span>
                </Button>
                <Button 
                  size="sm" 
                  variant="outline" 
                  onClick={() => setIsFullScreen(!isFullScreen)} 
                  className="rounded-xl font-bold text-xs gap-1.5 h-9 px-3 bg-primary/10 text-primary border-primary/20 hover:bg-primary/20"
                >
                  {isFullScreen ? <Minimize2 size={14} /> : <Maximize2 size={14} />}
                  <span>{isFullScreen ? "Exit Fullscreen" : "Fullscreen"}</span>
                </Button>
                <button 
                  onClick={() => { setSelectedPdfDpp(null); setIsFullScreen(false); }}
                  className="ml-1 flex-shrink-0 w-9 h-9 rounded-full border border-border bg-secondary flex items-center justify-center text-foreground hover:bg-destructive hover:border-destructive hover:text-white transition-all"
                >
                  <X size={18} />
                </button>
              </div>
            </div>

            {/* Security Notice Banner */}
            <div className="bg-amber-500/10 border-b border-amber-500/20 px-4 sm:px-6 py-2 flex items-center justify-between text-xs text-amber-400 font-bold">
              <span className="flex items-center gap-2 truncate">
                <ShieldAlert size={16} className="shrink-0" /> Read-Only Mode (Free Tier) — Downloads & direct copying are restricted.
              </span>
              <Link href="/upgrade" className="hidden sm:block shrink-0 ml-2">
                <Button size="sm" className="bg-amber-500 text-black hover:bg-amber-400 font-extrabold h-7 text-[11px] rounded-lg">
                  Upgrade for Interactive Practice Mode →
                </Button>
              </Link>
            </div>

            {/* Protected PDF Document Sheet Content (select-none) */}
            <div 
              onContextMenu={(e) => e.preventDefault()}
              className="flex-1 w-full select-none bg-[#525659] overflow-hidden" 
              style={{minHeight: isFullScreen ? 'calc(100vh - 120px)' : '75vh'}}
            >
              <embed 
                src={selectedPdfDpp.pdf_url || getPdfUrl(selectedPdfDpp.title)} 
                type="application/pdf" 
                className="w-full h-full"
                style={{height: isFullScreen ? 'calc(100vh - 120px)' : '75vh'}}
              />
            </div>

            {/* Modal Footer */}
            <div className="p-3.5 sm:p-4 border-t border-border bg-secondary/30 flex items-center justify-between flex-wrap gap-2">
              <span className="text-xs text-muted-foreground font-medium flex items-center gap-2">
                📄 PragatiVeer Protected PDF Reader v2.0
              </span>
              <div className="flex gap-2 items-center">
                <Button onClick={() => setIsFullScreen(!isFullScreen)} variant="secondary" className="rounded-xl font-bold text-xs h-9 bg-primary/10 text-primary hover:bg-primary/20 flex items-center gap-1.5">
                  {isFullScreen ? <Minimize2 size={14} /> : <Maximize2 size={14} />}
                  <span>{isFullScreen ? "Exit Fullscreen" : "Fullscreen"}</span>
                </Button>
                <Button onClick={() => { setSelectedPdfDpp(null); setIsFullScreen(false); }} variant="outline" className="rounded-xl font-bold text-xs h-9">
                  Close Reader
                </Button>
                <Link href="/upgrade">
                  <Button className="bg-[var(--cyan-ai)] text-black hover:bg-[var(--cyan-ai-80)] font-extrabold rounded-xl shadow-[0_0_15px_rgba(12,96,96,0.2)] text-xs h-9">
                    <Sparkles size={14} className="mr-1.5" /> Upgrade to AI Coach
                  </Button>
                </Link>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}