import { Cpu, MemoryStick, Star, WifiOff } from "lucide-react";
import type { CSSProperties } from "react";
import { Link } from "react-router-dom";
import type { Device } from "../api/types";
import { colorToHex, formatDate } from "../lib/utils";
import { Badge } from "./ui";

interface DeviceCardProps {
  device: Device;
  list?: boolean;
  moduleLabel?: string;
}

export function DeviceCard({ device, list = false, moduleLabel }: DeviceCardProps) {
  const color = colorToHex(device.state.colors?.[0]);
  const Icon = device.device_type === "dram" ? MemoryStick : Cpu;
  return <Link to={`/devices/${device.id}`} className={list ? "device-row" : "device-card"}>
    <div className="device-card__visual" style={{ "--device-color": color } as CSSProperties}>
      <span className="device-glow" /><Icon size={list ? 22 : 30} /><span className={`presence ${device.online ? "presence--online" : ""}`} />
    </div>
    <div className="device-card__content">
      <div className="device-card__title"><div><h2>{moduleLabel || device.alias || device.name}</h2><p>{[device.vendor, device.model].filter(Boolean).join(" · ") || device.source}</p></div>{device.favorite ? <Star size={16} className="favorite" fill="currentColor" /> : null}</div>
      <div className="device-card__meta"><Badge tone={device.online ? "success" : "neutral"}>{device.online ? "Online" : <><WifiOff size={12} /> Offline</>}</Badge>{device.room_name ? <Badge>{device.room_name}</Badge> : null}{device.read_only ? <Badge tone="warning">Alleen lezen</Badge> : null}{device.blocked ? <Badge tone="danger">Geblokkeerd</Badge> : null}</div>
      {!list ? <div className="device-card__footer"><span><i style={{ background: color }} />{device.state.mode ?? "Onbekende modus"}</span><span>{device.led_count} leds</span></div> : <div className="device-row__extra"><span>{device.state.brightness ?? "—"}%</span><span>{formatDate(device.last_detected_at)}</span></div>}
    </div>
  </Link>;
}