import { useState } from "react";
import {
    FileCheck,
    FileWarning,
    HardDrive,
    Loader2,
    Server,
} from "lucide-react";
import { DownloadStatus, DownloadTask, useSession } from "../../context/session-context";
import { formatBytes, formatSpeed } from "../../lib/utils";
import { Button } from "../ui/Button";
import { Card, CardContent } from "../ui/Card";
import { Progress } from "../ui/ProgressBar";

const API_URL = import.meta.env.VITE_API_URL || "";
const createdAtFormatter = new Intl.DateTimeFormat(undefined, {
    hour: "2-digit",
    minute: "2-digit",
});

interface DownloadItemProps {
    item: DownloadTask;
}

const statusLabel: Record<DownloadStatus, string> = {
    queued: "Queued",
    downloading: "Transferring",
    completed: "Ready",
    error: "Issue",
};

function getDownloadErrorMessage(error: unknown): string {
    if (error instanceof Error && error.message) {
        return error.message;
    }

    return "Failed to download file.";
}

export function DownloadItem({ item }: DownloadItemProps) {
    const { sessionId } = useSession();
    const [downloadError, setDownloadError] = useState<string | null>(null);
    const [isSaving, setIsSaving] = useState(false);
    const isCompleted = item.status === "completed";
    const isError = item.status === "error";
    const isQueued = item.status === "queued";

    const statusBadgeClass = isCompleted
        ? "border-emerald-400/20 bg-emerald-400/10 text-emerald-300"
        : isError
            ? "border-destructive/30 bg-destructive/10 text-destructive"
            : isQueued
                ? "border-amber-400/20 bg-amber-400/10 text-amber-300"
                : "border-primary/20 bg-primary/10 text-primary";

    const statusDetail = isCompleted
        ? "File cached and ready to be saved locally."
        : isError
            ? "The transfer stopped before completion."
            : isQueued
                ? "Waiting for the server to start processing."
                : "Receiving data from the source URL.";

    const handleDownloadFile = async (): Promise<void> => {
        try {
            setDownloadError(null);
            setIsSaving(true);
            const response = await fetch(`${API_URL}/api/download/${item.id}`, {
                headers: { "x-session-id": sessionId },
            });

            if (!response.ok) {
                throw new Error("Failed to fetch the stored file.");
            }

            const blob = await response.blob();
            const url = window.URL.createObjectURL(blob);
            const anchor = document.createElement("a");
            anchor.href = url;
            anchor.download = item.filename;
            document.body.appendChild(anchor);
            anchor.click();
            window.URL.revokeObjectURL(url);
            document.body.removeChild(anchor);
        } catch (error: unknown) {
            setDownloadError(getDownloadErrorMessage(error));
        } finally {
            setIsSaving(false);
        }
    };

    return (
        <Card className="group overflow-hidden border-border/80 bg-card/75 transition-all duration-200 hover:-translate-y-0.5 hover:border-primary/25 hover:bg-card/90">
            <CardContent className="p-5">
                <div className="flex flex-col gap-5">
                    <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
                        <div className="flex min-w-0 gap-4">
                            <div className="mt-1">
                                {isCompleted ? (
                                    <div className="flex h-12 w-12 items-center justify-center rounded-[1.25rem] border border-emerald-400/20 bg-emerald-400/10 text-emerald-300">
                                        <FileCheck className="h-5 w-5" />
                                    </div>
                                ) : isError ? (
                                    <div className="flex h-12 w-12 items-center justify-center rounded-[1.25rem] border border-destructive/30 bg-destructive/10 text-destructive">
                                        <FileWarning className="h-5 w-5" />
                                    </div>
                                ) : isQueued ? (
                                    <div className="flex h-12 w-12 items-center justify-center rounded-[1.25rem] border border-amber-400/20 bg-amber-400/10 text-amber-300">
                                        <Server className="h-5 w-5" />
                                    </div>
                                ) : (
                                    <div className="flex h-12 w-12 items-center justify-center rounded-[1.25rem] border border-primary/20 bg-primary/10 text-primary">
                                        <Loader2 className="h-5 w-5 animate-spin" />
                                    </div>
                                )}
                            </div>

                            <div className="min-w-0 space-y-3">
                                <div className="flex flex-wrap items-center gap-2">
                                    <span className={`inline-flex rounded-full border px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.2em] ${statusBadgeClass}`}>
                                        {statusLabel[item.status]}
                                    </span>
                                    <span className="text-xs text-muted-foreground">
                                        Created at {createdAtFormatter.format(item.createdAt)}
                                    </span>
                                </div>

                                <div className="space-y-1">
                                    <h3 className="truncate text-base font-semibold tracking-tight text-foreground" title={item.filename || item.url}>
                                        {item.filename || item.url}
                                    </h3>
                                    <p className="truncate text-sm text-muted-foreground" title={item.url}>
                                        {item.url}
                                    </p>
                                </div>
                            </div>
                        </div>

                        {isCompleted ? (
                            <Button size="sm" onClick={handleDownloadFile} disabled={isSaving} className="w-full gap-2 lg:w-auto lg:shrink-0">
                                {isSaving ? <Loader2 className="h-4 w-4 animate-spin" /> : <HardDrive className="h-4 w-4" />}
                                {isSaving ? "Saving..." : "Save file"}
                            </Button>
                        ) : null}
                    </div>

                    <div className="grid gap-3 md:grid-cols-3">
                        <div className="rounded-[1.25rem] border border-white/6 bg-background/35 p-4">
                            <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-muted-foreground/75">
                                Status
                            </p>
                            <p className="mt-2 text-sm font-medium text-foreground">{statusDetail}</p>
                        </div>
                        <div className="rounded-[1.25rem] border border-white/6 bg-background/35 p-4">
                            <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-muted-foreground/75">
                                Size
                            </p>
                            <p className="mt-2 text-sm font-medium text-foreground">
                                {item.totalBytes ? formatBytes(item.totalBytes) : "Unknown until available"}
                            </p>
                        </div>
                        <div className="rounded-[1.25rem] border border-white/6 bg-background/35 p-4">
                            <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-muted-foreground/75">
                                Throughput
                            </p>
                            <p className="mt-2 text-sm font-medium text-foreground">
                                {item.speed ? formatSpeed(item.speed) : "Waiting for activity"}
                            </p>
                        </div>
                    </div>

                    {!isCompleted && !isError ? (
                        <div className="rounded-[1.5rem] border border-white/6 bg-background/45 p-4">
                            <div className="flex items-center justify-between text-[11px] font-semibold uppercase tracking-[0.22em] text-muted-foreground/75">
                                <span>{isQueued ? "Waiting on server" : "Transfer progress"}</span>
                                <span>{item.progress ? `${Math.round(item.progress)}%` : "0%"}</span>
                            </div>
                            <Progress
                                value={item.progress || 0}
                                className="mt-3"
                                indicatorClassName={isQueued ? "opacity-60" : undefined}
                            />
                            <div className="mt-3 flex flex-col gap-2 text-sm text-muted-foreground sm:flex-row sm:items-center sm:justify-between">
                                <span>
                                    {formatBytes(item.receivedBytes || 0)} / {item.totalBytes ? formatBytes(item.totalBytes) : "Unknown"}
                                </span>
                                <span>{item.speed ? formatSpeed(item.speed) : "No transfer speed yet"}</span>
                            </div>
                        </div>
                    ) : null}

                    {isCompleted ? (
                        <div className="rounded-[1.5rem] border border-emerald-400/20 bg-emerald-400/10 p-4 text-sm text-foreground">
                            <p className="font-semibold text-emerald-300">Transfer completed successfully</p>
                            <p className="mt-2 text-muted-foreground">
                                The file is ready in the current session and can be saved to disk at any time before expiration.
                            </p>
                        </div>
                    ) : null}

                    {downloadError ? (
                        <div className="rounded-[1.5rem] border border-destructive/30 bg-destructive/10 p-4 text-sm text-foreground">
                            <p className="font-semibold text-destructive">Unable to save file</p>
                            <p className="mt-2 text-muted-foreground">{downloadError}</p>
                        </div>
                    ) : null}

                    {isError ? (
                        <div className="rounded-[1.5rem] border border-destructive/30 bg-destructive/10 p-4 text-sm text-foreground">
                            <p className="font-semibold text-destructive">Transfer failed</p>
                            <p className="mt-2 text-muted-foreground">
                                {item.error || "Unknown error occurred during the transfer."}
                            </p>
                        </div>
                    ) : null}
                </div>
            </CardContent>
        </Card>
    );
}