"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Eye, Pencil, RotateCw, Trash2 } from "lucide-react";
import type { Credential } from "@/lib/api/credentials";
import { getExpiryStatus } from "@/lib/api/credentials";

interface CredentialCardProps {
  credential: Credential;
  onView: (credential: Credential) => void;
  onEdit: (credential: Credential) => void;
  onRotate: (credential: Credential) => void;
  onDelete: (credential: Credential) => void;
}

export function CredentialCard({
  credential,
  onView,
  onEdit,
  onRotate,
  onDelete,
}: CredentialCardProps): React.ReactElement {
  const expiryInfo = getExpiryStatus(credential.expiresAt);

  return (
    <Card>
      <CardHeader>
        <div className="flex items-start justify-between">
          <div className="flex-1">
            <CardTitle className="flex items-center gap-2">
              {credential.name}
              {!credential.isActive && <Badge variant="outline">Inactive</Badge>}
            </CardTitle>
            {credential.description && (
              <p className="mt-1 text-sm text-muted-foreground">{credential.description}</p>
            )}
          </div>
          <div className="flex gap-1">
            <Button
              variant="ghost"
              size="sm"
              onClick={() => {
                onView(credential);
              }}
              title="View details"
            >
              <Eye className="h-4 w-4" />
            </Button>
            <Button
              variant="ghost"
              size="sm"
              onClick={() => {
                onEdit(credential);
              }}
              title="Edit metadata"
            >
              <Pencil className="h-4 w-4" />
            </Button>
            <Button
              variant="ghost"
              size="sm"
              onClick={() => {
                onRotate(credential);
              }}
              title="Rotate value"
            >
              <RotateCw className="h-4 w-4" />
            </Button>
            <Button
              variant="ghost"
              size="sm"
              onClick={() => {
                onDelete(credential);
              }}
              title="Remove credential"
            >
              <Trash2 className="h-4 w-4 text-destructive" />
            </Button>
          </div>
        </div>
      </CardHeader>
      <CardContent>
        <div className="grid gap-3">
          {/* Provider & Type */}
          <div className="flex gap-4 text-sm">
            <div>
              <span className="text-muted-foreground">Provider:</span>
              <Badge variant="outline" className="ml-2">
                {credential.provider}
              </Badge>
            </div>
            <div>
              <span className="text-muted-foreground">Type:</span>
              <Badge variant="outline" className="ml-2">
                {credential.type.replace(/_/g, " ")}
              </Badge>
            </div>
          </div>

          {/* Masked Value */}
          <div>
            <p className="mb-1 text-sm text-muted-foreground">Value (masked)</p>
            <code className="block rounded bg-muted px-3 py-2 font-mono text-sm">
              {credential.maskedValue ?? "••••••••"}
            </code>
          </div>

          {/* Expiry & Last Used */}
          <div className="flex flex-wrap gap-4 text-sm">
            {credential.expiresAt && (
              <div>
                <span className="text-muted-foreground">Target:</span>
                <Badge variant="outline" className={`ml-2 ${expiryInfo.className}`}>
                  {expiryInfo.label}
                </Badge>
              </div>
            )}
            {credential.lastUsedAt && (
              <div>
                <span className="text-muted-foreground">Last used:</span>
                <span className="ml-2">{new Date(credential.lastUsedAt).toLocaleDateString()}</span>
              </div>
            )}
          </div>
        </div>
      </CardContent>
    </Card>
  );
}
