"use client";

import React, { useState } from 'react';
import { Search, BookOpen, Tag, Trash2, Star, Archive, X } from 'lucide-react';
import { PaneLayout } from '@/app/carnet/page';

interface NavigationProps {
  onLayoutChange?: (layout: PaneLayout) => void;
}

export const Navigation: React.FC<NavigationProps> = ({ onLayoutChange }) => {
  const [searchQuery, setSearchQuery] = useState('');

  return (
    <div className="flex flex-col h-full bg-carnet-sidebar">
      {/* Search */}
      <div className="p-4">
        <div className="relative">
          <input
            type="text"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            placeholder="Search tags..."
            className="w-full pl-9 pr-4 py-2 bg-white border border-carnet-border rounded-md text-sm text-carnet-text-primary placeholder-carnet-text-muted focus:outline-none focus:ring-1 focus:ring-primary"
          />
          <Search className="absolute left-3 top-2.5 h-4 w-4 text-carnet-text-muted" />
          {searchQuery && (
            <button
              onClick={() => setSearchQuery('')}
              className="absolute right-3 top-2.5 text-carnet-text-muted hover:text-carnet-text-primary"
            >
              <X className="h-4 w-4" />
            </button>
          )}
        </div>
      </div>

      {/* Navigation Items */}
      <div className="flex-1 overflow-y-auto">
        <div className="px-3">
          <div className="space-y-0.5">
            <div 
              className="flex items-center px-3 py-2 rounded-md hover:bg-carnet-hover cursor-pointer text-carnet-text-primary"
              onClick={() => onLayoutChange?.(PaneLayout.ItemSelection)}
            >
              <BookOpen className="w-4 h-4 mr-3" />
              <span className="text-sm">Notes</span>
              <span className="ml-auto text-xs text-carnet-text-muted">54</span>
            </div>
            
            <div 
              className="flex items-center px-3 py-2 rounded-md hover:bg-carnet-hover cursor-pointer text-carnet-text-primary"
              onClick={() => onLayoutChange?.(PaneLayout.TagSelection)}
            >
              <Star className="w-4 h-4 mr-3" />
              <span className="text-sm">Starred</span>
            </div>

            <div 
              className="flex items-center px-3 py-2 rounded-md hover:bg-carnet-hover cursor-pointer text-carnet-text-primary"
            >
              <Archive className="w-4 h-4 mr-3" />
              <span className="text-sm">Archived</span>
              <span className="ml-auto text-xs text-carnet-text-muted">18</span>
            </div>
            
            <div 
              className="flex items-center px-3 py-2 rounded-md hover:bg-carnet-hover cursor-pointer text-carnet-text-primary"
              onClick={() => onLayoutChange?.(PaneLayout.TableView)}
            >
              <Trash2 className="w-4 h-4 mr-3" />
              <span className="text-sm">Trash</span>
            </div>
          </div>
        </div>

        {/* Favorites Section */}
        <div className="mt-6 px-3">
          <h3 className="px-3 mb-2 text-xs font-medium text-carnet-text-muted uppercase">Favorites</h3>
          <div className="space-y-0.5">
            <div className="flex items-center px-3 py-2 rounded-md hover:bg-carnet-hover cursor-pointer">
              <span className="text-sm text-carnet-text-primary">Blogs</span>
              <span className="ml-auto text-xs text-carnet-text-muted">2</span>
            </div>
            <div className="flex items-center px-3 py-2 rounded-md hover:bg-carnet-hover cursor-pointer">
              <span className="text-sm text-carnet-text-primary">Bugs</span>
              <span className="ml-auto text-xs text-carnet-text-muted">1</span>
            </div>
            <div className="flex items-center px-3 py-2 rounded-md hover:bg-carnet-hover cursor-pointer">
              <span className="text-sm text-carnet-text-primary">Daily Notes</span>
              <span className="ml-auto text-xs text-carnet-text-muted">7</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};