import Link from "next/link";
import clsx from "clsx";
import type { Instance, License } from "@/lib/api";
import { daysRemaining, formatDate, licenceState } from "@/lib/format";
import { StatePill } from "./StatePill";

const STRIPE = {
    valid: "before:bg-valid",
    warn: "before:bg-warn",
    expired: "before:bg-expired",
    none: "before:bg-accent",
} as const;

export function InstanceCard({ instance, license }: { instance: Instance; license?: License }) {
    const state = licenceState(license?.expires_at, Boolean(license));
    const days = license ? daysRemaining(license.expires_at) : 0;
    const cloud = instance.deployment === "cloud";

    return (
        <article
            className={clsx(
                "relative grid gap-3 rounded border border-rule bg-panel p-4 pl-5",
                "before:absolute before:inset-y-0 before:left-0 before:w-1 before:content-['']",
                STRIPE[state],
            )}
        >
            <div className="flex items-start justify-between gap-3">
                <div>
                    <h3 className="text-lg">{instance.name || "Unnamed instance"}</h3>
                    <p className="font-mono text-[0.72rem] uppercase tracking-[0.1em] text-ink-3">
                        {cloud ? "Cloud" : "Self-hosted"}
                        {instance.tier ? ` · ${instance.tier.replace("_", " ")}` : ""}
                    </p>
                </div>
                <StatePill state={state} />
            </div>

            {state === "expired" && (
                <p className="text-[0.82rem] text-ink-2">
                    Servers and monitors are still running, and your agents keep their keys. Changes
                    are disabled until you renew.
                </p>
            )}

            {state === "none" && (
                <p className="text-[0.82rem] text-ink-2">
                    You have paid for this but it is not attached to an install yet, so no licence
                    has been issued. Linking takes a minute.
                </p>
            )}

            {license && state !== "expired" && (
                <div className="grid gap-1 font-mono text-[0.82rem] tabular-nums text-ink-2">
                    <span>{days} days remaining</span>
                    <div className="h-[3px] overflow-hidden rounded-sm bg-rule-soft">
                        <div
                            className={clsx("h-full", state === "warn" ? "bg-warn" : "bg-valid")}
                            style={{ width: `${Math.max(2, Math.min(100, (days / 365) * 100))}%` }}
                        />
                    </div>
                    <span>Renews {formatDate(license.expires_at)}</span>
                </div>
            )}

            {state === "none" ? (
                <Link
                    href="/instances/link"
                    className="justify-self-start text-[0.82rem] font-semibold text-accent underline"
                >
                    Link an install
                </Link>
            ) : cloud && instance.slug ? (
                <a
                    href={`https://${instance.slug}.vantage.hostxtra.co.uk`}
                    className="justify-self-start text-[0.82rem] font-semibold text-accent underline"
                >
                    Open {instance.slug}.vantage.hostxtra.co.uk
                </a>
            ) : (
                <Link
                    href={`/instances/${instance.instance_id}`}
                    className="justify-self-start text-[0.82rem] font-semibold text-accent underline"
                >
                    {state === "expired" ? "Renew and download" : "Licence and download"}
                </Link>
            )}
        </article>
    );
}