// Author: Simon-Pierre Boucher
// Contact: contact@spboucher.ai
// Project: chat.spboucher.ai

"use client";

import { useRouter } from "next/navigation";
import type { ApiConversation } from "./types";

interface SidebarProps {
  conversations: ApiConversation[];
  activeId: string | null;
  open: boolean;
  onSelect: (id: string) => void;
  onNew: () => void;
  onDelete: (id: string) => void;
  onClose: () => void;
}

export function Sidebar({ conversations, activeId, open, onSelect, onNew, onDelete, onClose }: SidebarProps) {
  const router = useRouter();

  async function logout() {
    await fetch("/api/auth/logout", { method: "POST" });
    router.replace("/login");
    router.refresh();
  }

  return (
    <>
      <div className={`drawer-scrim${open ? " open" : ""}`} onClick={onClose} aria-hidden />
      <aside className={`sidebar${open ? " open" : ""}`}>
        <div className="sidebar-header">
          <span className="wordmark">
            chat.spboucher<span className="tld">.ai</span>
          </span>
        </div>
        <button className="new-chat-btn" onClick={onNew}>
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6">
            <path d="M8 3v10M3 8h10" strokeLinecap="round" />
          </svg>
          New conversation
        </button>
        <nav className="conv-list">
          {conversations.map((c) => (
            <div
              key={c.id}
              className={`conv-item${c.id === activeId ? " active" : ""}`}
              role="button"
              tabIndex={0}
              onClick={() => onSelect(c.id)}
              onKeyDown={(e) => e.key === "Enter" && onSelect(c.id)}
            >
              <span className="conv-title">{c.title}</span>
              <button
                className="conv-del"
                aria-label={`Delete "${c.title}"`}
                onClick={(e) => {
                  e.stopPropagation();
                  if (confirm(`Delete "${c.title}"? This cannot be undone.`)) onDelete(c.id);
                }}
              >
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.4">
                  <path d="M2 3.5h10M5.5 3.5V2h3v1.5M3.5 3.5l.7 8a1 1 0 0 0 1 .9h3.6a1 1 0 0 0 1-.9l.7-8" strokeLinecap="round" />
                </svg>
              </button>
            </div>
          ))}
          {conversations.length === 0 && (
            <p style={{ padding: "10px", fontSize: 13, color: "var(--text-dim)" }}>
              No conversations yet.
            </p>
          )}
        </nav>
        <div className="sidebar-footer">
          <a className="foot-btn" href="/settings" style={{ textDecoration: "none" }}>
            <svg width="15" height="15" viewBox="0 0 15 15" fill="none" stroke="currentColor" strokeWidth="1.4">
              <circle cx="7.5" cy="7.5" r="2.2" />
              <path d="M7.5 1.5v2M7.5 11.5v2M1.5 7.5h2M11.5 7.5h2M3.3 3.3l1.4 1.4M10.3 10.3l1.4 1.4M11.7 3.3l-1.4 1.4M4.7 10.3l-1.4 1.4" strokeLinecap="round" />
            </svg>
            Settings
          </a>
          <button className="foot-btn" onClick={logout}>
            <svg width="15" height="15" viewBox="0 0 15 15" fill="none" stroke="currentColor" strokeWidth="1.4">
              <path d="M9.5 2H4a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h5.5M12.5 7.5H6.5M10.5 5l2.5 2.5L10.5 10" strokeLinecap="round" />
            </svg>
            Sign out
          </button>
        </div>
      </aside>
    </>
  );
}
