"use client";

import { useStatus } from "@/hooks/useStatus";
import StatusHeader from "./StatusHeader";
import ArkBridge from "./ArkBridge";
import DetailPanel from "./DetailPanel";

export default function StatusView() {
  const { snapshot, summary, alerts, loading, error, selectedItem, selectItem, refresh } = useStatus();

  if (loading) return <div className="p-6 text-zinc-500 font-mono">Initializing bridge systems...</div>;
  if (error) return <div className="p-6 text-red-500 font-mono">Bridge offline: {error}</div>;
  if (!snapshot) return <div className="p-6 text-zinc-500 font-mono">No data</div>;

  return (
    <div className="flex h-full flex-col overflow-hidden p-3 md:p-4">
      <StatusHeader summary={summary} lastUpdated={snapshot.last_updated} onRefresh={refresh} />
      <div className="flex flex-1 flex-col gap-4 overflow-hidden md:flex-row" style={{ minHeight: 0 }}>
        <div className="min-w-0 flex-1 overflow-auto">
          <ArkBridge snapshot={snapshot} summary={summary} selectedItem={selectedItem} onSelectItem={selectItem} />
        </div>
        {selectedItem && (
          <div className="shrink-0 border-t border-zinc-700 pt-4 md:w-80 md:border-l md:border-t-0 md:pl-4 md:pt-0 overflow-auto max-h-[40vh] md:max-h-none">
            <DetailPanel item={selectedItem} onClose={() => selectItem(null)} />
          </div>
        )}
      </div>
    </div>
  );
}
