'use client';

import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@/components/ui/sheet.js';
import type { DatacenterMarkerData } from './datacenter-marker.js';

interface DatacenterDetailPanelProps {
  datacenter: DatacenterMarkerData | null;
  onClose: () => void;
}

export function DatacenterDetailPanel({ datacenter, onClose }: DatacenterDetailPanelProps) {
  return (
    <Sheet open={datacenter !== null} onOpenChange={open => !open && onClose()}>
      <SheetContent side="right" className="overflow-y-auto bg-zinc-950 text-zinc-100">
        {datacenter && (
          <>
            <SheetHeader>
              <SheetTitle className="text-zinc-100">{datacenter.name}</SheetTitle>
              <SheetDescription className="text-zinc-400">
                {datacenter.operator} &middot; {datacenter.region_name} ({datacenter.region_code})
              </SheetDescription>
            </SheetHeader>

            <div className="flex flex-col gap-4 p-4">
              <div className="grid grid-cols-2 gap-3">
                <MetricItem label="Capacity" value={`${datacenter.capacity_mw} MW`} />
                <MetricItem label="Status" value={datacenter.status} />
                <MetricItem label="Year Opened" value={String(datacenter.year_opened)} />
                <MetricItem label="Grid Region" value={datacenter.region_code} />
              </div>

              <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-3">
                <div className="mb-1 text-xs font-medium text-zinc-500">Location</div>
                <div className="font-mono text-sm text-zinc-300">
                  {datacenter.lat.toFixed(4)}, {datacenter.lng.toFixed(4)}
                </div>
              </div>
            </div>
          </>
        )}
      </SheetContent>
    </Sheet>
  );
}

function MetricItem({ label, value }: { label: string; value: string }) {
  return (
    <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-3">
      <div className="mb-0.5 text-xs font-medium text-zinc-500">{label}</div>
      <div className="text-sm font-semibold text-zinc-200">{value}</div>
    </div>
  );
}