import { Save, CheckCircle2, Ruler, Server, HardDrive } from 'lucide-react';

function Dot({ tone }) {
  const map = { ok: 'bg-emerald-400 shadow-[0_0_8px_rgba(16,185,129,0.6)]', warn: 'bg-amber-400', bad: 'bg-red-500', sim: 'bg-violet-400', idle: 'bg-slate-600' };
  return <span className={`h-1.5 w-1.5 rounded-full ${map[tone] || map.idle}`} />;
}

export default function StatusBar({ project, settings }) {
  const saved = project?.updated_date ? new Date(project.updated_date).toLocaleString(undefined, { hour: '2-digit', minute: '2-digit', month: 'short', day: 'numeric' }) : '—';
  const geoTone = settings?.geometryServiceStatus === 'connected' ? 'ok' : settings?.geometryServiceStatus === 'simulation_only' ? 'sim' : 'idle';
  const geoLabel = settings?.geometryServiceStatus === 'connected' ? 'Online' : settings?.geometryServiceStatus === 'simulation_only' ? 'Simulation' : 'Offline';
  const vaultTone = settings?.shireVaultStatus === 'connected' && settings?.shireVaultWritable ? 'ok' : 'warn';
  const vaultLabel = settings?.shireVaultStatus === 'connected' ? (settings?.shireVaultWritable ? 'Synced' : 'Read-only') : 'Not mounted';

  return (
    <div className="flex h-full items-center gap-4 overflow-x-auto border-t border-white/[0.06] bg-[#0a0d12] px-4 text-[11px] text-slate-500">
      <span className="flex items-center gap-1.5"><Save size={12} />Last saved <b className="mono text-slate-300">{saved}</b></span>
      <span className="hidden items-center gap-1.5 sm:flex"><CheckCircle2 size={12} className="text-emerald-400" />Auto-save <b className="text-slate-300">On</b></span>
      <span className="hidden items-center gap-1.5 md:flex">Version <b className="mono text-slate-300">1.3.7</b></span>
      <span className="hidden items-center gap-1.5 md:flex"><Ruler size={12} />Units <b className="mono text-slate-300">mm</b></span>
      <span className="ml-auto flex items-center gap-1.5"><Server size={12} />Geometry Engine <Dot tone={geoTone} /><b className={geoTone === 'ok' ? 'text-emerald-300' : geoTone === 'sim' ? 'text-violet-300' : 'text-slate-400'}>{geoLabel}</b></span>
      <span className="flex items-center gap-1.5"><HardDrive size={12} />SHiREVault <Dot tone={vaultTone} /><b className={vaultTone === 'ok' ? 'text-emerald-300' : 'text-amber-300'}>{vaultLabel}</b></span>
    </div>
  );
}