"use client";

import React, { useState } from 'react';
import { Search, BookOpen, Tag, Trash2, Star, Archive, X, Folder, FileText, Calendar, Heart, Users, LucideIcon, ChevronRight } from 'lucide-react';

interface NavigationProps {
  nextcloudFolders: string[];
  onFolderSelect: (folder: string) => void;
}

type FolderType = 'Notes' | 'Diary' | 'Health' | 'Contacts';

interface FolderConfig {
  icon: LucideIcon;
  order: number;
}

// Define folder order and icons
const FOLDER_CONFIG: Record<FolderType, FolderConfig> = {
  'Notes': { icon: FileText, order: 1 },
  'Diary': { icon: Calendar, order: 2 },
  'Health': { icon: Heart, order: 3 },
  'Contacts': { icon: Users, order: 4 }
};

interface ContactGroup {
  name: string;
  contacts: string[];
}

export default function Navigation({ nextcloudFolders, onFolderSelect }: NavigationProps) {
  const [searchQuery, setSearchQuery] = useState('');
  const [expandedGroups, setExpandedGroups] = useState<Set<string>>(new Set());
  const [contactGroups, setContactGroups] = useState<ContactGroup[]>([
    { name: 'Family', contacts: [] },
    { name: 'Friends', contacts: [] },
    { name: 'Work', contacts: [] },
    { name: 'Other', contacts: [] }
  ]);

  const toggleGroup = (groupName: string) => {
    const newExpanded = new Set(expandedGroups);
    if (newExpanded.has(groupName)) {
      newExpanded.delete(groupName);
    } else {
      newExpanded.add(groupName);
    }
    setExpandedGroups(newExpanded);
  };

  const getFolderIcon = (folder: string) => {
    switch (folder) {
      case 'Notes':
        return FileText;
      case 'Diary':
        return Calendar;
      case 'Health':
        return Heart;
      case 'Contacts':
        return Users;
      default:
        return FileText;
    }
  };

  // Sort folders according to the specified order
  const sortedFolders = [...nextcloudFolders].sort((a, b) => {
    const orderA = (FOLDER_CONFIG[a as FolderType]?.order) || 999;
    const orderB = (FOLDER_CONFIG[b as FolderType]?.order) || 999;
    return orderA - orderB;
  });

  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="Recherché..."
            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>

      {/* Folders */}
      <div className="flex-1 overflow-y-auto p-4">
        <div className="space-y-1">
          {sortedFolders.map((folder) => {
            const Icon = getFolderIcon(folder);
            return (
              <div key={folder}>
                <button
                  onClick={() => onFolderSelect(folder)}
                  className="w-full flex items-center space-x-2 px-3 py-2 text-sm rounded-md text-carnet-text-primary hover:bg-carnet-hover"
                >
                  <Icon className="h-4 w-4" />
                  <span>{folder}</span>
                </button>
                {folder === 'Contacts' && (
                  <div className="ml-4 mt-1 space-y-1">
                    {contactGroups.map((group) => (
                      <div key={group.name}>
                        <button
                          onClick={() => toggleGroup(group.name)}
                          className="w-full flex items-center space-x-2 px-3 py-2 text-sm rounded-md text-carnet-text-primary hover:bg-carnet-hover"
                        >
                          <ChevronRight 
                            className={`h-4 w-4 transition-transform ${
                              expandedGroups.has(group.name) ? 'transform rotate-90' : ''
                            }`}
                          />
                          <Folder className="h-4 w-4" />
                          <span>{group.name}</span>
                        </button>
                        {expandedGroups.has(group.name) && (
                          <div className="ml-4 space-y-1">
                            {group.contacts.map((contact) => (
                              <button
                                key={contact}
                                onClick={() => onFolderSelect(`${folder}/${group.name}/${contact}`)}
                                className="w-full flex items-center space-x-2 px-3 py-2 text-sm rounded-md text-carnet-text-muted hover:bg-carnet-hover"
                              >
                                <span>{contact}</span>
                              </button>
                            ))}
                          </div>
                        )}
                      </div>
                    ))}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}