'use client';

import React, { useState } from "react";
import Image from "next/image";
import { ChevronDown, ChevronRight } from "lucide-react";
import { motion, AnimatePresence } from "framer-motion";
import { useSelectedClient } from "@/context/SelectedClientContext";
import { getClients } from "@/helpers/axios_helper";

export default function Navbar() {
  const [open, setOpen] = useState(false);
  const [clients, setClients] = React.useState<any[]>([]);
  const { selectedClient, setSelectedClient } = useSelectedClient();

  React.useEffect(() => {
    getClients().then(setClients);
  }, []);

  const handleSelect = (client: any) => {
    setSelectedClient(client);
    setOpen(false); // auto-close
  };

  return (
    <aside className="fixed left-0 top-0 h-screen w-[80px] md:w-[220px] bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 flex flex-col z-40 shadow-sm">
      {/* Logo + Datanope flush top */}
      <div className="flex items-center gap-2 px-4 py-4">
        <Image src="/public/logo.png" alt="Logo" width={32} height={32} className="w-8 h-8" />
        <span className="font-bold text-lg text-gray-900 dark:text-white hidden md:inline">Datanope</span>
      </div>
      {/* Accordéon Client Liste */}
      <div className="px-2 mt-2">
        <button
          className="w-full flex items-center justify-between px-3 py-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition"
          onClick={() => setOpen((v) => !v)}
        >
          <span className="font-medium text-gray-700 dark:text-gray-200 text-sm">Client Liste</span>
          <motion.span animate={{ rotate: open ? 180 : 0 }} transition={{ duration: 0.2 }}>
            <ChevronDown className="w-4 h-4" />
          </motion.span>
        </button>
        <AnimatePresence initial={false}>
          {open && (
            <motion.div
              initial={{ height: 0, opacity: 0 }}
              animate={{ height: 'auto', opacity: 1 }}
              exit={{ height: 0, opacity: 0 }}
              transition={{ duration: 0.25 }}
              className="overflow-hidden rounded shadow"
            >
              <ul className="mt-2 space-y-1 bg-white dark:bg-white">
                {clients.map((client) => (
                  <li key={client.id}>
                    <button
                      className={`w-full text-left px-4 py-2 rounded text-black hover:bg-blue-100 hover:text-blue-900 dark:hover:bg-blue-600 dark:hover:text-white transition-colors text-sm ${selectedClient?.id === client.id ? 'font-semibold' : ''}`}
                      onClick={() => handleSelect(client)}
                    >
                      {client.firstName} {client.lastName}
                    </button>
                  </li>
                ))}
                {clients.length === 0 && (
                  <li className="px-4 py-2 text-gray-400 text-xs">Aucun client</li>
                )}
              </ul>
            </motion.div>
          )}
        </AnimatePresence>
      </div>
      {/* Spacer pour full height */}
      <div className="flex-1" />
    </aside>
  );
}