"use client"

import { Vdev } from "@/lib/api"

function stateColor(state: string) {
  switch (state?.toUpperCase()) {
    case "ONLINE":  return "text-green-500"
    case "DEGRADED": return "text-yellow-500"
    case "FAULTED":
    case "OFFLINE":
    case "UNAVAIL":  return "text-red-500"
    default:         return "text-muted-foreground"
  }
}

function stateIcon(state: string) {
  switch (state?.toUpperCase()) {
    case "ONLINE":   return "●"
    case "DEGRADED": return "◑"
    default:         return "○"
  }
}

interface VdevRowProps {
  vdev: Vdev
  depth?: number
}

function VdevRow({ vdev, depth = 0 }: VdevRowProps) {
  const hasErrors =
    vdev.read !== 0 || vdev.write !== 0 || vdev.cksum !== 0

  return (
    <>
      <tr className="border-b border-border/50 last:border-0 hover:bg-muted/30">
        <td className="py-2 pr-4">
          <span style={{ paddingLeft: `${depth * 20}px` }} className="flex items-center gap-2">
            <span className={`text-sm ${stateColor(vdev.state)}`}>{stateIcon(vdev.state)}</span>
            <span className={`font-mono text-sm ${depth === 0 ? "font-semibold" : ""}`}>
              {vdev.name}
            </span>
          </span>
        </td>
        <td className={`py-2 px-3 text-sm font-medium ${stateColor(vdev.state)}`}>
          {vdev.state}
        </td>
        <td className={`py-2 px-3 text-sm font-mono text-center ${hasErrors ? "text-red-500 font-bold" : "text-muted-foreground"}`}>
          {vdev.read}
        </td>
        <td className={`py-2 px-3 text-sm font-mono text-center ${hasErrors ? "text-red-500 font-bold" : "text-muted-foreground"}`}>
          {vdev.write}
        </td>
        <td className={`py-2 px-3 text-sm font-mono text-center ${hasErrors ? "text-red-500 font-bold" : "text-muted-foreground"}`}>
          {vdev.cksum}
        </td>
      </tr>
      {vdev.children?.map((child) => (
        <VdevRow key={child.name} vdev={child} depth={depth + 1} />
      ))}
    </>
  )
}

interface VdevTreeProps {
  vdevs: Vdev[]
}

export function VdevTree({ vdevs }: VdevTreeProps) {
  if (!vdevs || vdevs.length === 0) {
    return (
      <p className="text-sm text-muted-foreground py-4">
        No VDEV information available.
      </p>
    )
  }

  return (
    <div className="overflow-x-auto">
      <table className="w-full text-left">
        <thead>
          <tr className="border-b border-border text-xs text-muted-foreground uppercase tracking-wide">
            <th className="pb-2 pr-4">Name</th>
            <th className="pb-2 px-3">State</th>
            <th className="pb-2 px-3 text-center">Read</th>
            <th className="pb-2 px-3 text-center">Write</th>
            <th className="pb-2 px-3 text-center">CkSum</th>
          </tr>
        </thead>
        <tbody>
          {vdevs.map((vdev) => (
            <VdevRow key={vdev.name} vdev={vdev} depth={0} />
          ))}
        </tbody>
      </table>
    </div>
  )
}