"use client";

import Link from "next/link";
import { ServerWithKeys } from "@/lib/api";
import { Badge, Button, Card, Table, Tbody, Td, Th, Thead, Tr } from "@/components/ui";
import { formatDate } from "../format";

export function AccessTab({ server, onGenerateKey }: { server: ServerWithKeys; onGenerateKey: () => void }) {
    const assignments = (server.keys ?? []).filter((a) => a.key);
    const active = assignments.filter((a) => !a.revoked_at).length;

    return (
        <Card padding={false}>
            <div className="flex flex-wrap items-center justify-between gap-3 border-b border-border px-6 py-4">
                <h2 className="flex items-center gap-2 text-lg font-semibold text-text-primary">
                    Installed SSH keys
                    <span className="rounded-full bg-surface-2 px-2 py-0.5 font-mono text-[0.68rem] tabular-nums text-text-secondary">{active} active</span>
                </h2>
                <div className="flex items-center gap-2">
                    <Button variant="secondary" size="sm" onClick={onGenerateKey}>
                        Generate key
                    </Button>
                    <Link href="/keys">
                        <Button variant="ghost" size="sm">
                            Manage keys →
                        </Button>
                    </Link>
                </div>
            </div>

            {assignments.length === 0 ? (
                <div className="py-16 text-center">
                    <p className="text-sm text-text-secondary">No keys assigned to this server.</p>
                    <Link href="/keys">
                        <Button variant="secondary" size="sm" className="mt-3">
                            Assign a key
                        </Button>
                    </Link>
                </div>
            ) : (
                <Table>
                    <Thead>
                        <Tr>
                            <Th>Label</Th>
                            <Th>Fingerprint</Th>
                            <Th>Source</Th>
                            <Th>Status</Th>
                            <Th>Assigned</Th>
                            <Th />
                        </Tr>
                    </Thead>
                    <Tbody>
                        {assignments.map((assignment) => (
                            <Tr key={assignment.key_id}>
                                <Td label="Label">
                                    <span className="font-medium">{assignment.key.label}</span>
                                </Td>
                                <Td label="Fingerprint">
                                    <span className="font-mono text-xs text-text-secondary">{assignment.key.fingerprint}</span>
                                </Td>
                                <Td label="Source">
                                    <Badge variant={assignment.key.source === "generated" ? "accent" : "neutral"}>{assignment.key.source}</Badge>
                                </Td>
                                <Td label="Status">
                                    <Badge variant={assignment.revoked_at ? "danger" : "success"}>{assignment.revoked_at ? "revoked" : "active"}</Badge>
                                </Td>
                                <Td label="Assigned">
                                    <span className="text-xs text-text-secondary">{formatDate(assignment.assigned_at)}</span>
                                </Td>
                                <Td>
                                    <Link href={`/keys/${assignment.key_id}`}>
                                        <Button variant="ghost" size="sm">
                                            View
                                        </Button>
                                    </Link>
                                </Td>
                            </Tr>
                        ))}
                    </Tbody>
                </Table>
            )}
        </Card>
    );
}
