"use client"

import { Pool } from "@/lib/api"
import { formatBytes } from "@/lib/utils"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"

interface PoolCardProps {
  pool: Pool
  onClick?: () => void
}

export function PoolCard({ pool, onClick }: PoolCardProps) {
  const usedBytes = pool.alloc
  const freeBytes = pool.free
  const totalBytes = pool.size
  const capacityPercent = parseInt(pool.capacity)

  let badgeVariant: "success" | "warning" | "destructive" = "success"
  if (pool.health === "DEGRADED") badgeVariant = "warning"
  else if (pool.health !== "ONLINE") badgeVariant = "destructive"

  return (
    <Card
      onClick={onClick}
      className={`cursor-pointer hover:shadow-lg transition-shadow ${onClick ? "cursor-pointer" : ""}`}
    >
      <CardHeader>
        <div className="flex items-center justify-between">
          <CardTitle className="text-xl">{pool.name}</CardTitle>
          <Badge variant={badgeVariant}>{pool.health}</Badge>
        </div>
      </CardHeader>
      <CardContent className="space-y-4">
        {/* Capacity Bar */}
        <div>
          <div className="flex justify-between text-sm mb-2">
            <span className="text-muted-foreground">Capacity</span>
            <span className="font-medium">{pool.capacity}</span>
          </div>
          <Progress value={capacityPercent} max={100} />
        </div>

        {/* Size Information */}
        <div className="grid grid-cols-3 gap-4 text-sm">
          <div>
            <div className="text-muted-foreground text-xs">Total</div>
            <div className="font-medium">{formatBytes(totalBytes)}</div>
          </div>
          <div>
            <div className="text-muted-foreground text-xs">Used</div>
            <div className="font-medium">{formatBytes(usedBytes)}</div>
          </div>
          <div>
            <div className="text-muted-foreground text-xs">Free</div>
            <div className="font-medium">{formatBytes(freeBytes)}</div>
          </div>
        </div>

        {/* Fragmentation */}
        <div className="flex justify-between items-center text-sm pt-2 border-t border-border">
          <span className="text-muted-foreground">Fragmentation</span>
          <span className="font-medium">{pool.fragmentation}</span>
        </div>
      </CardContent>
    </Card>
  )
}