"use client";

import { useState, useEffect } from "react";
import { FolderOpen, RefreshCw, Disc, Music, ArrowLeft, Trash2, Search, Waves } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { ScrollArea } from "@/components/ui/scroll-area";
import { AlbumSelector } from "@/components/album-selector";
import { AlbumView } from "@/components/album-view";
import { StatusLog } from "@/components/status-log";
import { AudioWave } from "@/components/ui/audio-wave";
import { TidalSearch } from "@/components/tidal-search";
import { motion, AnimatePresence } from "motion/react";
import { Album } from "@/types";

export default function Dashboard() {
    const [albums, setAlbums] = useState<Album[]>([]);
    const [selectedAlbum, setSelectedAlbum] = useState<Album | null>(null);
    const [loading, setLoading] = useState(false);
    const [logs, setLogs] = useState<string[]>([]);
    const [view, setView] = useState<"idle" | "selection" | "details" | "tidal">("idle");

    const addLog = (message: string) => {
        setLogs((prev) => {
            const newLogs = [...prev, `[${new Date().toLocaleTimeString()}] ${message}`];
            if (newLogs.length > 50) return newLogs.slice(newLogs.length - 50);
            return newLogs;
        });
    };

    const scanWatchFolder = async (preserveView = false) => {
        setLoading(true);
        addLog("Scanning watch folder...");
        try {
            const res = await fetch("/api/scan");
            const data = await res.json();
            if (data.albums) {
                setAlbums(data.albums);
                addLog(`Found ${data.albums.length} albums.`);

                if (!preserveView) {
                    if (data.albums.length > 0) {
                        setView("selection");
                    } else {
                        setView("idle");
                    }
                }
            }
        } catch (error) {
            addLog("Error scanning watch folder.");
            console.error(error);
        } finally {
            setLoading(false);
        }
    };

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

    // Auto-refresh watch folder
    useEffect(() => {
        const interval = setInterval(() => {
            // Silent scan - don't show loading spinner for auto-refresh
            fetch("/api/scan")
                .then(res => res.json())
                .then((data: { albums: Album[] }) => {
                    if (data.albums) {
                        // Only update if count changed or deep comparison (simplified here by length/names check)
                        setAlbums(prev => {
                            const prevNames = prev.map(a => a.path).sort().join(',');
                            const newNames = data.albums.map((a) => a.path).sort().join(',');
                            if (prevNames !== newNames) {
                                addLog(`Watch folder updated: ${data.albums.length} albums found.`);
                                return data.albums;
                            }
                            // Even if list didn't change structure, update to get new cover paths if they appeared
                            // But we need to be careful not to cause re-renders if nothing changed.
                            // Let's check if any coverPath changed for the selected album
                            return data.albums;
                        });

                        // Sync selectedAlbum with new data to ensure cover art updates
                        if (selectedAlbum) {
                            const updatedSelected = data.albums.find((a) => a.path === selectedAlbum.path);
                            if (updatedSelected && updatedSelected.coverPath !== selectedAlbum.coverPath) {
                                setSelectedAlbum(updatedSelected);
                            }
                        }

                        // If we are in idle view and albums appear, switch to selection
                        if (view === "idle" && data.albums.length > 0) {
                            setView("selection");
                        }

                        // If we are in selection view and albums disappear, switch to idle.
                        // However, if we are in TIDAL view, we shouldn't force switch back.
                        if (view === "selection" && data.albums.length === 0) {
                            setView("idle");
                        }
                    }
                })
                .catch(err => console.error("Auto-scan failed", err));
        }, 1000);

        return () => clearInterval(interval);
    }, [view, selectedAlbum]);

    const handleAlbumUpdate = async (newPath?: string) => {
        await scanWatchFolder(true);
        if (newPath) {
            const name = newPath.split('/').pop() || "";
            if (selectedAlbum) {
                setSelectedAlbum({ ...selectedAlbum, path: newPath, name });
            }
        }
    };

    const handleSelectAlbum = (album: Album) => {
        setSelectedAlbum(album);
        setView("details");
    };

    const handleBack = () => {
        setSelectedAlbum(null);
        setView(albums.length > 0 ? "selection" : "idle");
    };

    return (
        <div className="min-h-screen bg-background text-foreground flex flex-col font-sans selection:bg-primary/20 max-w-5xl mx-auto">
            {/* Header */}
            <header className="flex justify-between items-center p-6 shrink-0 z-40 max-w-5xl">
                <div className="flex items-center gap-3">
                    <motion.div
                        animate={{ rotate: 360 }}
                        transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
                    >
                        <Disc className="w-8 h-8 text-primary" />
                    </motion.div>
                    <h1 className="text-3xl font-bold tracking-tight bg-linear-to-r from-white to-white/50 bg-clip-text text-transparent">
                        crossfade
                    </h1>
                </div>
                <div className="flex gap-2">
                    {view === "details" && (
                        <Button onClick={handleBack} variant="ghost" className="text-muted-foreground hover:text-foreground">
                            <ArrowLeft className="w-4 h-4 mr-2" />
                            Back to Albums
                        </Button>
                    )}
                    {view === "tidal" ? (
                        <Button onClick={handleBack} variant="ghost" className="text-muted-foreground hover:text-foreground cursor-pointer">
                            <ArrowLeft className="w-4 h-4 mr-2" />
                            Back
                        </Button>
                    ) : (
                        <Button
                            onClick={() => setView("tidal")}
                            variant="secondary"
                            className="bg-primary/10 text-primary hover:bg-primary/20 border-primary/20"
                        >
                            <Waves className="w-4 h-4 mr-2" />
                            TIDAL Search
                        </Button>
                    )}

                    <Button
                        onClick={async () => {
                            if (confirm("Are you sure you want to delete ALL generated spectrograms? This cannot be undone.")) {
                                addLog("Purging spectrograms...");
                                try {
                                    const res = await fetch("/api/spectrogram", { method: "DELETE" });
                                    const result = await res.json();
                                    if (result.success) {
                                        addLog("Spectrograms purged successfully.");
                                    } else {
                                        addLog(`Failed to purge: ${result.error}`);
                                    }
                                } catch (e) {
                                    addLog("Purge request failed.");
                                }
                            }
                        }}
                        variant="destructive"
                        className="bg-red-500/10 hover:bg-red-500/20 text-red-500 border-red-500/20"
                    >
                        <Trash2 className="w-4 h-4 mr-2" />
                        Purge Spectrograms
                    </Button>
                    <Button onClick={() => scanWatchFolder()} disabled={loading} variant="outline" className="bg-background/50 backdrop-blur border-white/10 hover:bg-white/10">
                        <RefreshCw className={`w-4 h-4 mr-2 ${loading ? "animate-spin" : ""}`} />
                        Manual Rescan
                    </Button>
                </div>
            </header>

            {/* Main Content Area */}
            <main className="flex-1 relative flex flex-col">
                <AnimatePresence mode="wait" initial={true}>
                    {view === "idle" && (
                        <motion.div
                            key="idle"
                            initial={{ opacity: 0 }}
                            animate={{ opacity: 1 }}
                            exit={{ opacity: 0 }}
                            transition={{ duration: 0.2 }}
                            className="flex-1 flex flex-col items-center justify-center gap-8 p-6"
                        >
                            <div className="relative">
                                <div className="absolute inset-0 bg-primary/20 blur-3xl rounded-full" />
                                <AudioWave />
                            </div>
                            <div className="text-center space-y-2 max-w-md z-10">
                                <h2 className="text-2xl font-medium text-foreground">Waiting for Music</h2>
                                <p className="text-muted-foreground">
                                    Place albums in the watch folder to begin.
                                </p>
                            </div>
                        </motion.div>
                    )}

                    {view === "selection" && (
                        <motion.div
                            key="selection"
                            initial={{ opacity: 0, y: 10 }}
                            animate={{ opacity: 1, y: 0 }}
                            exit={{ opacity: 0, y: -10 }}
                            transition={{ duration: 0.2 }}
                            className="flex-1 p-6 overflow-hidden flex flex-col"
                        >
                            <div className="max-w-5xl mx-auto w-full h-full flex flex-col">
                                <div className="mb-6">
                                    <h2 className="text-xl font-semibold flex items-center gap-2">
                                        <FolderOpen className="w-5 h-5 text-primary" />
                                        Select Album
                                    </h2>
                                    <p className="text-sm text-muted-foreground">
                                        Found {albums.length} albums ready for processing
                                    </p>
                                </div>
                                <ScrollArea className="flex-1 -mx-6 px-6">
                                    <div className="pb-6">
                                        <AlbumSelector
                                            albums={albums}
                                            selectedAlbum={selectedAlbum}
                                            onSelect={handleSelectAlbum}
                                        />
                                    </div>
                                </ScrollArea>
                            </div>
                        </motion.div>
                    )}

                    {view === "tidal" && (
                        <motion.div
                            key="tidal"
                            initial={{ opacity: 0, y: 10 }}
                            animate={{ opacity: 1, y: 0 }}
                            exit={{ opacity: 0, y: -10 }}
                            transition={{ duration: 0.2 }}
                            className="flex-1 p-6 overflow-hidden flex flex-col"
                        >
                            <div className="max-w-5xl mx-auto w-full h-full flex flex-col">
                                <div className="mb-6">
                                    <h2 className="text-xl font-semibold flex items-center gap-2">
                                        <Waves className="w-5 h-5 text-primary" />
                                        TIDAL Search
                                    </h2>
                                    <p className="text-sm text-muted-foreground">
                                        Search and copy links from TIDAL
                                    </p>
                                </div>
                                <ScrollArea className="flex-1 -mx-6 px-6">
                                    <div className="pb-6">
                                        <TidalSearch />
                                    </div>
                                </ScrollArea>
                            </div>
                        </motion.div>
                    )}

                    {view === "details" && selectedAlbum && (
                        <motion.div
                            key="details"
                            initial={{ opacity: 0, x: 20 }}
                            animate={{ opacity: 1, x: 0 }}
                            exit={{ opacity: 0, x: 20 }}
                            transition={{ duration: 0.2 }}
                            className="flex-1 p-6 overflow-y-auto flex flex-col"
                        >
                            <div className="max-w-5xl mx-auto w-full">
                                <AlbumView
                                    album={selectedAlbum}
                                    addLog={addLog}
                                    onReset={handleBack}
                                    onAlbumUpdate={handleAlbumUpdate}
                                />
                            </div>
                        </motion.div>
                    )}
                </AnimatePresence>
            </main>

            {/* Status Log */}
            {process.env.NEXT_PUBLIC_SHOW_SYSTEM_LOG === "true" && (
                <div className="shrink-0 p-6 pt-0 z-10">
                    <StatusLog logs={logs} />
                </div>
            )}
        </div>
    );
}