"use client";

import { useState } from "react";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { licence } from "@/lib/api";
import { useLicense } from "@/lib/useLicense";

function cap(n: number) {
    return n === -1 ? "Unlimited" : String(n);
}

export default function LicensePage() {
    const { license } = useLicense();
    const queryClient = useQueryClient();
    const [blob, setBlob] = useState("");
    const [error, setError] = useState("");

    const save = useMutation({
        mutationFn: () => licence.put(blob.trim()),
        onSuccess: () => {
            setBlob("");
            setError("");
            queryClient.invalidateQueries({ queryKey: ["license"] });
        },
        onError: (e: Error) => setError(e.message),
    });

    if (!license) return null;

    return (
        <div className="space-y-6">
            <h1 className="text-2xl font-bold text-text-primary">Licence</h1>

            <section className="rounded border border-border p-4">
                <p className="text-sm text-text-secondary">
                    State: <b>{license.state}</b>
                    {license.tier ? <> · Tier: <b>{license.tier}</b></> : null}
                    {license.expires_at ? <> · Expires {new Date(license.expires_at).toLocaleDateString()}</> : null}
                </p>
                <p className="mt-2 text-xs text-text-tertiary">
                    Instance ID — quote this when buying or activating a licence
                </p>
                <div className="mt-1 flex items-center gap-2">
                    <code className="text-sm">{license.instance_id}</code>
                    <button
                        type="button"
                        className="text-xs underline"
                        onClick={() => navigator.clipboard.writeText(license.instance_id)}
                    >
                        Copy
                    </button>
                </div>
            </section>

            <section className="rounded border border-border p-4">
                <h2 className="font-semibold text-text-primary">Usage</h2>
                <ul className="mt-2 space-y-1 text-sm text-text-secondary">
                    <li>Servers: {license.usage.servers} of {cap(license.limits.max_servers)}</li>
                    <li>Secret groups: {license.usage.secret_groups} of {cap(license.limits.max_secret_groups)}</li>
                    <li>Notification channels: {license.usage.channels} of {cap(license.limits.max_channels)}</li>
                    <li>Browser console: {license.features.console ? "Included" : "Not included"}</li>
                    <li>Single sign-on: {license.features.oidc ? "Included" : "Not included"}</li>
                </ul>
            </section>

            <section className="rounded border border-border p-4">
                <h2 className="font-semibold text-text-primary">Add or replace a licence</h2>
                <textarea
                    className="mt-2 h-32 w-full rounded border border-border bg-transparent p-2 font-mono text-xs"
                    placeholder="Paste your licence key"
                    value={blob}
                    onChange={(e) => setBlob(e.target.value)}
                />
                <input
                    type="file"
                    accept=".lic,.txt"
                    className="mt-2 block text-xs"
                    onChange={async (e) => {
                        const f = e.target.files?.[0];
                        if (f) setBlob((await f.text()).trim());
                    }}
                />
                {error ? <p className="mt-2 text-sm text-red-400">{error}</p> : null}
                <button
                    type="button"
                    className="mt-3 rounded bg-accent px-3 py-1.5 text-sm"
                    disabled={!blob.trim() || save.isPending}
                    onClick={() => save.mutate()}
                >
                    {save.isPending ? "Checking…" : "Save licence"}
                </button>
            </section>
        </div>
    );
}
