import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Plus, Download, Map, LogOut, Tag } from 'lucide-react';
import { toast } from 'sonner';
import { toPng } from 'html-to-image';
import { Button } from '../ui/Button';
import { AddRackModal } from '../modals/AddRackModal';
import { useAuthStore } from '../../store/useAuthStore';

interface RackToolbarProps {
  rackCanvasRef: React.RefObject<HTMLDivElement | null>;
}

export function RackToolbar({ rackCanvasRef }: RackToolbarProps) {
  const navigate = useNavigate();
  const { logout } = useAuthStore();
  const [addRackOpen, setAddRackOpen] = useState(false);
  const [exporting, setExporting] = useState(false);

  async function handleExport() {
    if (!rackCanvasRef.current) return;
    setExporting(true);
    const toastId = toast.loading('Exporting…');
    try {
      const dataUrl = await toPng(rackCanvasRef.current, { cacheBust: true });
      const link = document.createElement('a');
      link.download = `rackmapper-rack-${Date.now()}.png`;
      link.href = dataUrl;
      link.click();
      toast.success('Exported successfully', { id: toastId });
    } catch {
      toast.error('Export failed', { id: toastId });
    } finally {
      setExporting(false);
    }
  }

  async function handleLogout() {
    await logout();
    navigate('/login', { replace: true });
  }

  return (
    <>
      <div className="flex items-center justify-between px-4 py-2 bg-slate-800 border-b border-slate-700">
        {/* Left: brand */}
        <div className="flex items-center gap-3">
          <div className="flex items-center gap-2">
            <div className="w-6 h-6 bg-blue-500 rounded flex items-center justify-center">
              <svg width="14" height="14" viewBox="0 0 18 18" fill="none">
                <rect x="1" y="2" width="16" height="3" rx="1" fill="white" />
                <rect x="1" y="7" width="16" height="3" rx="1" fill="white" opacity="0.7" />
                <rect x="1" y="12" width="16" height="3" rx="1" fill="white" opacity="0.4" />
              </svg>
            </div>
            <span className="text-sm font-bold text-slate-200 tracking-wider">RACKMAPPER</span>
          </div>
          <span className="text-slate-600 text-xs hidden sm:inline">Rack Planner</span>
        </div>

        {/* Right: actions */}
        <div className="flex items-center gap-2">
          <Button size="sm" variant="secondary" onClick={() => navigate('/map')}>
            <Map size={14} />
            Service Map
          </Button>
          <Button size="sm" variant="secondary" onClick={() => navigate('/vlans')}>
            <Tag size={14} />
            VLANs
          </Button>
          <Button size="sm" onClick={() => setAddRackOpen(true)}>
            <Plus size={14} />
            Add Rack
          </Button>
          <Button size="sm" variant="secondary" onClick={handleExport} loading={exporting} disabled={exporting}>
            <Download size={14} />
            Export PNG
          </Button>
          <Button size="sm" variant="ghost" onClick={handleLogout} aria-label="Sign out">
            <LogOut size={14} />
          </Button>
        </div>
      </div>

      <AddRackModal open={addRackOpen} onClose={() => setAddRackOpen(false)} />
    </>
  );
}