import VideoCard from "../components/video/VideoCard";
import PageHeader from "../components/PageHeader";
import NoAccessPage from "../components/NoAccessPage";
import { useEffect, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import { getClips, deleteClip } from "../utils/api/clips";
import { useAuth } from "../utils/AuthContext";
import type { Clip } from "../utils/types";

const MyClips = () => {
    const { user, loading } = useAuth();
    const [clips, setClips] = useState<Clip[]>([]);
    const [error, setError] = useState<null | string>(null);
    const navigate = useNavigate();

    useEffect(() => {
        if (!user) return;
        getClips()
            .then((data) => setClips(data.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())))
            .catch((err) => setError(err instanceof Error ? err.message : "Failed to load clips"));
    }, [user]);

    const handleDelete = async (id: number) => {
        try {
            await deleteClip(id);
            setClips(prev => prev.filter(c => c.id !== id));
        } catch (err) {
            setError(err instanceof Error ? err.message : "Failed to delete clip");
        }
    };

    if (loading) return null;
    if (!user) return <NoAccessPage />;

    return (
        <div className="mx-auto max-w-[1180px] px-13 pt-10 pb-18">
            <PageHeader kicker="Library" title="Clips">
                <p className="font-data text-[13px] text-faint-mono pt-6">{clips.length} cut</p>
            </PageHeader>

            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-[18px]">
                {clips.map((clip) => (
                    <VideoCard
                        key={clip.id}
                        id={clip.id}
                        title={clip.title}
                        duration={clip.duration}
                        createdAt={clip.createdAt}
                        width={clip.width}
                        height={clip.height}
                        fps={clip.fps}
                        fileSize={clip.fileSize}
                        onEdit={() => navigate(`/clips/${clip.id}/edit`)}
                        onDelete={() => handleDelete(clip.id)}
                    />
                ))}
            </div>

            {clips.length === 0 && !error && (
                <div className="flex flex-col items-center justify-center gap-1.5 py-20 text-center">
                    <h2 className="font-heading text-[25px]">No clips yet.</h2>
                    <p className="font-body text-[14.5px] text-muted max-w-[42ch] text-pretty">
                        Cut one from the stream panel, or{" "}
                        <Link to="/create" className="text-accent hover:text-accent-hover">upload a file</Link>{" "}
                        to trim it down here.
                    </p>
                </div>
            )}

            {error && <p className="font-body text-[13px] text-live-red mt-6">{error}</p>}
        </div>
    );
}

export default MyClips;