import { Menu, Network, RotateCcw } from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import { useRepoStore } from '../../store/useRepoStore';
import StatusPill from '../shared/StatusPill';

export default function TopBar({ title, subtitle, action }) {
  const navigate = useNavigate();
  const { repoId, resetAll } = useRepoStore();

  const reset = () => {
    resetAll();
    navigate('/ingest');
  };

  return (
    <header className="mb-6 flex flex-col gap-4 border-b border-white/10 pb-5 md:flex-row md:items-center md:justify-between">
      <div className="flex items-center gap-3">
        <div className="flex h-10 w-10 items-center justify-center rounded-lg border border-white/10 bg-white/5 lg:hidden">
          <Menu className="h-5 w-5 text-slate-300" />
        </div>
        <div className="min-w-0">
          <h1 className="font-display text-2xl font-bold text-white md:text-3xl">{title}</h1>
          {subtitle && <p className="path-text mt-1 text-sm text-slate-500">{subtitle}</p>}
        </div>
      </div>
      <div className="flex flex-wrap items-center gap-2">
        {repoId && <StatusPill tone="ready" pulse>Repository ready</StatusPill>}
        <StatusPill tone="active">
          <Network className="h-3.5 w-3.5" />
          IBM Bob
        </StatusPill>
        {action}
        {repoId && (
          <button
            onClick={reset}
            className="inline-flex items-center gap-2 rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm text-slate-300 transition-colors hover:bg-white/10"
          >
            <RotateCcw className="h-4 w-4" />
            New Scan
          </button>
        )}
      </div>
    </header>
  );
}