'use client'

import { useEffect, useState } from "react"
import { useParams } from "next/navigation"
import axios from 'axios';
import { QrCode, Loader2 , Globe, Smartphone, MousePointer2, Calendar } from "lucide-react";
import { useRouter } from "next/navigation";
import ClickChart from '@/components/analytics/ClickChart';
import ClickLog from "@/components/analytics/ClickLog";
import { API_BASE_URL } from "../../../../../lib/api-config";

export default function LinkDetailsPage() {
    const { id } = useParams();
    const router = useRouter();

    const [linkData, setLinkData] = useState<any>(null);
    const [statData, setStatData] = useState<any>(null);
    const [qrCode, setQrCode] = useState<string | null>(null);
    const [qrLoading, setQrLoading] = useState(false);

    const getAuthToken = () => document.cookie.split('; ').find(row => row.startsWith('wtihub_token='))?.split('=')[1];

    useEffect(() => {
        const fetchDetails = async () => {
            try {
                const token = getAuthToken();
                if(!token) return router.push('/login');

                const res = await axios.get(`${API_BASE_URL}/api/links/${id}`, {
                    headers: { Authorization: `Bearer ${token}`}
                });

                setLinkData(res.data.data);
                setStatData(res.data);
            } catch (e) {
                console.error('wtihub-error: Analytics Sync Failed', e);
                router.push('/dashboard');
            }
        };

        if(id) fetchDetails();
       
    }, [id, router]);

    const handleGenerateQR = async () => {
        if (!linkData?.wtihub_short_id) return;

        setQrLoading(true);
        try {
            const token = getAuthToken();
            const res = await axios.get(`${API_BASE_URL}/api/links/${linkData.wihub_short_id}/qr`, {
                headers: { Authorization: `Bearer ${token}`}
            });
            setQrCode(res.data.qrCode);
        } catch (e) {
            alert("wtihub-error: Pixel Engine unreachable.");
        } finally {
            setQrLoading(false);
        }
    }

    if (!linkData) return <div className="p-20 text-center animate-pulse text-wtihub-green">Syncing Analytics...</div>;

    const regionNames = new Intl.DisplayNames(['en'], { type: 'region'});

    return (
        <div className="min-h-screen bg-wtihub-bg p-8">
            <div className="max-w-5xl mx-auto">
                <header className="mb-12">
                    <div>
                    <h1 className="text-3xl font-black text-wtihub-text">Stream <span className="text-wtihub-green">Analysis</span></h1>
                    <p className="text-gray-500 font-mono text-sm mt-1">{linkData.wtihub_short_id}</p>
                    </div>
                    <button 
                        onClick={() => router.push('/dashboard')}
                        className="text-xs text-gray-500 hover:text-wtihub-green transition-colors mb-2"
                    >
                        ← Return to Terminal
                    </button>
                </header>

                {/* Metric Grid */}
                <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
                    <MetricCard icon={<MousePointer2 />} label="Total Interactions" value={linkData.wtihub_clicks} color="text-wtihub-green" />
                    <MetricCard icon={<Globe />} label="Top Region" value={statData?.insights?.topRegion && statData.insights.topRegion.length === 2 ? regionNames.of(statData.insights.topRegion) : statData?.insights?.topRegion === "Unknown" ? "Local/VPN" : "Scanning..."} color="text-blue-400" />
                    <MetricCard icon={<Smartphone />} label="Primary Device" value={statData?.insights?.topDevice || "Unknown"} color="text-purple-400" />
                </div>

                

                {/* QR and Details Area */}
                <div className="grid md:grid-cols-2 gap-8">
                    <div className="bg-wtihub-surface p-8 rounded-2xl border border-wtihub-border">
                        <h3 className="text-sm font-bold uppercase tracking-widest text-gray-500 mb-6 flex items-center gap-2">
                            <Calendar size={16} /> Temporal Identity
                        </h3>
                        <div className="space-y-4">
                            <div>
                            <p className="text-[10px] text-gray-500 uppercase">Original Destination</p>
                            <p className="text-wtihub-text truncate text-sm">{linkData.wtihub_original_url}</p>
                            </div>
                            <div>
                                <p className="text-[10px] text-gray-500 uppercase">Architecture Date</p>
                                <p className="text-wtihub-text text-sm">{new Date(linkData.wtihub_created_at).toLocaleDateString()}</p>
                            </div>
                        </div>
                    </div>
                    
                    
                    {/* ClickChart Analytics */}
                    <div className="mb-8">
                        <ClickChart chartData={statData?.stat || []}/>
                    </div>

                    {/* QR Pixel Engine */}

                    <div className="bg-wtihub-surface p-8 rounded-2xl border border-wtihub-border flex flex-col items-center justify-center text-center">
                        {qrCode ? (
                            <>
                              <img 
                                src={qrCode}
                                alt="Branded QR"
                                className="w-44 h-44 rounded-xl mb-4 border-4 border-wtihub-bg shadow-2xl animate-in zoom-in-95 duration-300"
                               />
                               <button 
                                 onClick={() => setQrCode(null)}
                                 className="text-[10px] text-gray-500 uppercase hover:text-wtihub-green transition-colors"
                                >
                                    Clear Asset
                                </button>
                            </>
                        ) : (
                          <div className="flex flex-col items-center">
                            <div className="w-44 h-44 bg-wtihub-bg rounded-xl mb-6 border-2 border-dashed border-wtihub-border flex items-center justify-center">
                                <QrCode size={40} className="text-wtihub-border" />
                            </div>
                          <button 
                            onClick={handleGenerateQR}
                            disabled={qrLoading}
                            className="btn-wtihub flex items-center gap-2"
                          >
                            {qrLoading ? <Loader2 className="animate-spin" size={16} /> : <QrCode size={16}/>}
                            {qrLoading ? 'Engaging Pixel...' : 'Generate QR'}
                          </button>
                          </div>
                        )}
                    </div>

                    {/* Click Logs */}
                    <div className="mt-12">
                        <ClickLog logs={statData?.rawClick || []} />
                    </div>
                </div>
            </div>
        </div>
    );
}

function MetricCard({icon, label, value, color}: any) {
    return (
        <div className="bg-wtihub-surface p-6 rounded-2xl border border-wtihub-border">
            <div className={`mb-4 ${color}`}>{icon}</div>
            <p className="text-xs text-gray-500 uppercase font-bold tracking-tighter">{label}</p>
            <p className={`text-4xl font-black mt-1 ${color}`}>{value}</p>
        </div>
    )
}