// app/documents/page.tsx

"use client";

import { BookCopy, CheckCircle, CloudDownload, Download, ExternalLink, Folder, Loader2, Map, MapPinned, MapPlus, WavesLadder, WifiOff, Archive } from 'lucide-react';
import { useEffect, useState } from 'react';

export default function Documents() {
    const [isHydrated, setIsHydrated] = useState(false);
    const [isOffline, setIsOffline] = useState(false);
    const [syncStatus, setSyncStatus] = useState<'idle' | 'syncing' | 'done'>('idle');
    const [cachedFiles, setCachedFiles] = useState<Set<string>>(new Set());

    const docs = [
        { title: 'Turistkarta', icon: <Map size={24} />, file: '/files/Turistkarta - Kullaberg.pdf', size: '2.51 MB' },
        { title: 'Orienteringskarta', icon: <MapPlus size={24} />, file: '/files/Orienteringskarta - Kullaberg.pdf', size: '3.74 MB' },
        { title: 'Badplatser att besöka', icon: <WavesLadder size={24} />, file: '/files/Badplatser på Kullaberg.pdf', size: '1.88 MB' },
        { title: 'Vandringsrutter', icon: <MapPinned size={24} />, file: '/files/Vandringsrutter.pdf', size: '4.42 MB' },
        { title: 'Underlag för guidediplomering', icon: <BookCopy size={24} />, file: '/files/Underlag för guidediplomering.pdf', size: '3.18 MB' },
        { title: 'Destinationskunskap Kullahalvön', icon: <BookCopy size={24} />, file: '/files/Destinationskunskap.pdf', size: '1.97 MB' }
    ];

    const links = [
        { title: 'Kullabergs Naturreservat', url: 'https://www.kullabergsnatur.se/' },
        { title: 'Vandra på Kullahalvön', url: 'https://www.kullahalvon.com/upptacka--uppleva/friluftsliv--natur/vandra-pa-kullahalvon.html' },
        { title: 'Naturkartan', url: 'https://www.naturkartan.se/en/explore' },
        { title: 'Skåneleden', url: 'https://www.skaneleden.se/en' },
        { title: 'Väderprognos Mölle', url: 'https://www.smhi.se/vader/prognoser-och-varningar/vaderprognos/q/H%C3%B6gan%C3%A4s/M%C3%B6lle/2691501' }
    ];

    const checkCacheStatus = async () => {
        if (!('caches' in window)) return;
        const cached = new Set<string>();
        try {
            for (const doc of docs) {
                const response = await caches.match(doc.file);
                if (response) cached.add(doc.file);
            }
            setCachedFiles(cached);
            if (cached.size === docs.length) setSyncStatus('done');
        } catch (error) {
            console.error("Cache check failed", error);
        }
    };

    useEffect(() => {
        setIsHydrated(true);
        setIsOffline(!navigator.onLine);

        const handleStatus = () => setIsOffline(!navigator.onLine);
        window.addEventListener('online', handleStatus);
        window.addEventListener('offline', handleStatus);

        checkCacheStatus();

        const conn = (navigator as any).connection;
        if (conn && (conn.type === 'wifi' || conn.type === 'ethernet') && !conn.saveData) {
            handleSyncAll();
        }

        return () => {
            window.removeEventListener('online', handleStatus);
            window.removeEventListener('offline', handleStatus);
        };
    }, []);

    const handleSyncAll = async () => {
        setSyncStatus('syncing');
        for (const doc of docs) {
            try {
                await fetch(doc.file);
            } catch (error) {
                console.error("Kunde inte ladda ner:", doc.file);
            }
        }
        await checkCacheStatus();
        setSyncStatus('done');
    };

    if (!isHydrated) {
        return (
            <div className="flex justify-center py-20">
                <Loader2 className="animate-spin text-slate-teal" size={40} />
            </div>
        );
    }

    return (
        <div className="space-y-8 animate-fade-in w-full">
            <div className="flex flex-col md:flex-row md:justify-between md:items-start gap-4">
                <div>
                    <h1 className="text-3xl font-black text-slate-teal tracking-tight flex items-center">
                        <Folder className="mr-3 text-seafoam" size={32} />
                        Info & Dokument
                    </h1>
                    <p className="text-moss font-medium mt-2 ml-11">Allt du behöver för att guida besökarna.</p>
                </div>

                <div className="flex flex-col gap-2 items-start md:items-end">
                    {isOffline && (
                        <div className="bg-goldenrod/10 text-goldenrod border border-goldenrod/20 px-3 py-1.5 rounded-full flex items-center text-xs font-black uppercase tracking-tighter">
                            <WifiOff size={14} className="mr-2" /> Offline-läge
                        </div>
                    )}

                    {!isOffline && syncStatus !== 'done' && (
                        <button
                            onClick={handleSyncAll}
                            disabled={syncStatus === 'syncing'}
                            className="flex items-center gap-2 bg-seafoam/10 text-slate-teal border border-seafoam/20 hover:bg-seafoam/20 px-4 py-2 rounded-lg font-bold text-sm transition-colors"
                        >
                            {syncStatus === 'syncing' ? <Loader2 size={18} className="animate-spin" /> : <CloudDownload size={18} />}
                            {syncStatus === 'syncing' ? 'Laddar ner filer...' : 'Gör tillgänglig offline'}
                        </button>
                    )}

                    {syncStatus === 'done' && (
                        <div className="flex items-center gap-2 text-moss font-bold text-sm bg-moss/10 border border-moss/20 px-4 py-2 rounded-lg">
                            <CheckCircle size={18} /> Redo för offline
                        </div>
                    )}
                </div>
            </div>

            <section>
                <h2 className="text-sm font-black text-ebony/50 uppercase tracking-widest mb-4">Nedladdningar</h2>
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    {docs.map((doc, idx) => {
                        const isCached = cachedFiles.has(doc.file);

                        return (
                            <a key={idx} href={doc.file} target="_blank" rel="noopener noreferrer"
                                className={`group flex items-center justify-between p-5 rounded-2xl border transition-all duration-300 ${isOffline && !isCached ? 'opacity-50 grayscale cursor-not-allowed pointer-events-none bg-white/20 border-transparent' : 'bg-white/60 border-white hover:-translate-y-1 hover:shadow-xl hover:shadow-moss/10 backdrop-blur-sm'}`}
                            >
                                <div className="flex items-center text-slate-teal">
                                    {/* FIX: Keep the original icon, but change the background to green when cached */}
                                    <div className={`p-3 rounded-xl mr-4 text-eggshell shadow-inner shrink-0 transition-colors ${isCached ? 'bg-moss' : 'bg-linear-to-br from-seafoam to-slate-teal'}`}>
                                        {doc.icon}
                                    </div>
                                    <div className="flex flex-col">
                                        <span className="font-bold text-sm leading-tight">{doc.title}</span>
                                        <div className="flex flex-wrap items-center gap-2 mt-1.5">
                                            <span className="text-[10px] font-bold text-moss bg-moss/10 px-2 py-0.5 rounded-md uppercase tracking-wider border border-moss/10">
                                                {doc.size}
                                            </span>

                                            {isCached && (
                                                <span className="flex items-center gap-1 text-[10px] font-bold text-moss bg-moss/10 px-2 py-0.5 rounded-md uppercase tracking-wider">
                                                    <Archive size={12} /> Nedladdad
                                                </span>
                                            )}
                                        </div>
                                    </div>
                                </div>

                                {/* FIX: Swap the Download icon for a Check icon when it is already saved on the phone */}
                                {isCached ? (
                                    <CheckCircle size={20} className="text-moss shrink-0 ml-2" />
                                ) : (
                                    <Download size={20} className="text-slate-teal/50 group-hover:text-slate-teal transition-colors shrink-0 ml-2" />
                                )}
                            </a>
                        );
                    })}
                </div>
            </section>

            <section>
                <h2 className="text-sm font-black text-ebony/50 uppercase tracking-widest mb-4">
                    {isOffline ? "Användbara Länkar (Kräver anslutning)" : "Användbara Länkar"}
                </h2>
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    {links.map((link, idx) => (
                        <a key={idx} href={isOffline ? '#' : link.url} target={isOffline ? '_self' : '_blank'} rel="noopener noreferrer"
                            className={`group flex items-center justify-between p-5 rounded-2xl border transition-all duration-300 ${isOffline ? 'opacity-40 grayscale cursor-not-allowed pointer-events-none bg-white/20 border-transparent' : 'bg-white/60 border-white hover:-translate-y-1 hover:shadow-xl hover:shadow-moss/10 backdrop-blur-sm'}`}
                        >
                            <span className="font-bold text-slate-teal text-sm leading-tight pr-4">{link.title}</span>
                            <div className={`rounded-full p-2 transition-colors shrink-0 ${isOffline ? 'bg-ebony/5' : 'bg-eggshell group-hover:bg-seafoam'}`}>
                                <ExternalLink size={16} className={isOffline ? 'text-ebony/40' : 'text-slate-teal group-hover:text-eggshell'} />
                            </div>
                        </a>
                    ))}
                </div>
            </section>
        </div>
    );
}