'use client';

import { useState } from 'react';
import {
  Database,
  PanelLeftClose,
  X,
  Plus,
  Search,
  Download,
  Upload,
  Star,
  Trash2,
  PanelLeft,
  FileEdit,
  History,
} from 'lucide-react';
import { ChatSession, formatRelativeTime } from '@/lib/chat-session';

type HistoryPanelProps = {
  sessions: ChatSession[];
  hasAnySessions: boolean;
  activeSessionId: string | null;
  historyQuery: string;
  onHistoryQueryChange: (value: string) => void;
  onSelectSession: (session: ChatSession) => void;
  onNewSession: () => void;
  onDeleteSession: (id: string) => void;
  onTogglePin: (id: string) => void;
  onExport: () => void;
  onImportClick: () => void;
  onClose?: () => void;
  onCollapse?: () => void;
};

export const HistoryPanel = ({
  sessions,
  hasAnySessions,
  activeSessionId,
  historyQuery,
  onHistoryQueryChange,
  onSelectSession,
  onNewSession,
  onDeleteSession,
  onTogglePin,
  onExport,
  onImportClick,
  onClose,
  onCollapse,
}: HistoryPanelProps) => (
  <div className="flex h-full w-full flex-col bg-white dark:bg-warm-900">
    <div className="px-5 py-4 border-b border-cream-300 dark:border-warm-700 flex-shrink-0">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <div className="w-8 h-8 rounded-lg bg-warm-800 dark:bg-cream-100 flex items-center justify-center">
            <Database className="w-4 h-4 text-cream-100 dark:text-warm-800" />
          </div>
          <span className="font-semibold text-warm-800 dark:text-cream-100">FinOps</span>
        </div>
        <div className="flex items-center gap-1">
          {onCollapse && (
            <button
              type="button"
              onClick={onCollapse}
              className="w-8 h-8 rounded-full text-warm-500 hover:text-warm-700 hover:bg-cream-200 dark:text-warm-400 dark:hover:text-cream-100 dark:hover:bg-warm-700 transition-all flex items-center justify-center"
              aria-label="Collapse sidebar"
              title="Collapse sidebar"
            >
              <PanelLeftClose className="w-4 h-4" />
            </button>
          )}
          {onClose && (
            <button
              type="button"
              onClick={onClose}
              className="w-8 h-8 rounded-full text-warm-500 hover:text-warm-700 hover:bg-cream-200 dark:text-warm-400 dark:hover:text-cream-100 dark:hover:bg-warm-700 transition-all flex items-center justify-center"
              aria-label="Close history panel"
            >
              <X className="w-4 h-4" />
            </button>
          )}
        </div>
      </div>
    </div>

    <div className="px-4 py-4">
      <button
        type="button"
        onClick={onNewSession}
        className="w-full flex items-center gap-3 px-4 py-3 rounded-xl text-warm-600 dark:text-warm-300 hover:bg-cream-200 dark:hover:bg-warm-700 transition-all text-sm font-medium"
      >
        <Plus className="w-4 h-4" />
        <span>New task</span>
      </button>
    </div>

    <div className="px-4 pb-2">
      <div className="relative">
        <Search className="w-4 h-4 text-warm-400 absolute left-3 top-1/2 -translate-y-1/2" />
        <input
          type="text"
          value={historyQuery}
          onChange={(e) => onHistoryQueryChange(e.target.value)}
          placeholder="Search"
          className="w-full pl-9 pr-4 py-2.5 rounded-xl border border-cream-300 dark:border-warm-600 bg-cream-100 dark:bg-warm-800 text-sm text-warm-700 dark:text-cream-200 placeholder:text-warm-400 focus:ring-2 focus:ring-accent/20 focus:border-accent outline-none transition-all"
        />
        {historyQuery && (
          <button
            type="button"
            onClick={() => onHistoryQueryChange('')}
            className="absolute right-2 top-1/2 -translate-y-1/2 w-6 h-6 rounded-full hover:bg-cream-200 dark:hover:bg-warm-700 flex items-center justify-center text-warm-400 hover:text-warm-600 dark:hover:text-cream-200 transition-colors"
            aria-label="Clear search"
          >
            <X className="w-3 h-3" />
          </button>
        )}
      </div>
    </div>

    <div className="px-4 py-2 flex items-center gap-2">
      <button
        type="button"
        onClick={onImportClick}
        className="flex-1 flex items-center justify-center gap-2 py-2 rounded-lg text-warm-500 dark:text-warm-400 hover:bg-cream-200 dark:hover:bg-warm-700 transition-all text-xs font-medium"
        title="Import history"
      >
        <Download className="w-3.5 h-3.5" />
        Import
      </button>
      <button
        type="button"
        onClick={onExport}
        className="flex-1 flex items-center justify-center gap-2 py-2 rounded-lg text-warm-500 dark:text-warm-400 hover:bg-cream-200 dark:hover:bg-warm-700 transition-all text-xs font-medium"
        title="Export history"
      >
        <Upload className="w-3.5 h-3.5" />
        Export
      </button>
    </div>

    <div className="flex-1 overflow-y-auto px-3 py-3 space-y-1 scrollbar-thin">
      {sessions.length === 0 && (
        <div className="rounded-xl border border-dashed border-cream-300 dark:border-warm-600 p-6 text-center text-sm text-warm-500 dark:text-warm-400 mx-1">
          {hasAnySessions ? 'No matches found.' : 'Create a new task to get started'}
        </div>
      )}
      {sessions.map((session) => (
        <div
          key={session.id}
          onClick={() => onSelectSession(session)}
          onKeyDown={(event) => {
            if (event.key === 'Enter') {
              onSelectSession(session);
            }
          }}
          role="button"
          tabIndex={0}
          className={`group rounded-xl px-3 py-3 transition-all duration-200 cursor-pointer focus:outline-none border-l-2 ${
            session.id === activeSessionId
              ? 'bg-cream-200 dark:bg-warm-700 border-accent'
              : 'hover:bg-cream-100 dark:hover:bg-warm-800 border-transparent hover:border-accent/50'
          }`}
        >
          <div className="flex items-start justify-between gap-2">
            <div className="flex-1 min-w-0">
              <p className="text-sm font-medium text-warm-800 dark:text-cream-100 truncate">{session.title}</p>
              <p className="text-xs text-warm-500 dark:text-warm-400 mt-1">{formatRelativeTime(session.updatedAt)}</p>
            </div>
            <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
              <button
                type="button"
                onClick={(event) => {
                  event.stopPropagation();
                  onTogglePin(session.id);
                }}
                className={`w-6 h-6 rounded-full flex items-center justify-center transition-colors ${
                  session.pinned ? 'text-accent' : 'text-warm-400 hover:text-accent'
                }`}
                aria-label={session.pinned ? 'Unpin' : 'Pin'}
              >
                <Star className={`w-3 h-3 ${session.pinned ? 'fill-current' : ''}`} />
              </button>
              <button
                type="button"
                onClick={(event) => {
                  event.stopPropagation();
                  onDeleteSession(session.id);
                }}
                className="w-6 h-6 rounded-full text-warm-400 hover:text-red-500 transition-colors flex items-center justify-center"
                aria-label="Delete"
              >
                <Trash2 className="w-3 h-3" />
              </button>
            </div>
          </div>
        </div>
      ))}
    </div>
  </div>
);

type CollapsedSidebarProps = {
  sessions: ChatSession[];
  onExpand: () => void;
  onNewSession: () => void;
  onSelectSession: (session: ChatSession) => void;
};

export const CollapsedSidebar = ({
  sessions,
  onExpand,
  onNewSession,
  onSelectSession,
}: CollapsedSidebarProps) => {
  const [showRecent, setShowRecent] = useState(false);

  return (
    <div className="flex h-full w-14 flex-col bg-white dark:bg-warm-900 border-r border-cream-300 dark:border-warm-700 py-3">
      <div className="px-2 mb-2">
        <button
          type="button"
          onClick={onExpand}
          className="w-10 h-10 rounded-xl flex items-center justify-center text-warm-500 hover:text-warm-700 hover:bg-cream-200 dark:text-warm-400 dark:hover:text-cream-100 dark:hover:bg-warm-700 transition-all"
          title="Expand sidebar"
        >
          <PanelLeft className="w-5 h-5" />
        </button>
      </div>

      <div className="px-2 mb-1">
        <button
          type="button"
          onClick={onNewSession}
          className="w-10 h-10 rounded-xl flex items-center justify-center text-warm-500 hover:text-accent hover:bg-accent/10 dark:text-warm-400 dark:hover:text-accent transition-all"
          title="New task"
        >
          <FileEdit className="w-5 h-5" />
        </button>
      </div>

      <div className="px-2 mb-1">
        <button
          type="button"
          onClick={onExpand}
          className="w-10 h-10 rounded-xl flex items-center justify-center text-warm-500 hover:text-warm-700 hover:bg-cream-200 dark:text-warm-400 dark:hover:text-cream-100 dark:hover:bg-warm-700 transition-all"
          title="Search"
        >
          <Search className="w-5 h-5" />
        </button>
      </div>

      <div className="px-2 mb-1 relative">
        <button
          type="button"
          onClick={() => setShowRecent(!showRecent)}
          className={`w-10 h-10 rounded-xl flex items-center justify-center transition-all ${
            showRecent
              ? 'text-accent bg-accent/10'
              : 'text-warm-500 hover:text-warm-700 hover:bg-cream-200 dark:text-warm-400 dark:hover:text-cream-100 dark:hover:bg-warm-700'
          }`}
          title="Recent tasks"
        >
          <History className="w-5 h-5" />
        </button>

        {showRecent && sessions.length > 0 && (
          <div
            className="absolute left-full top-0 ml-2 w-64 bg-white dark:bg-warm-800 rounded-xl shadow-warm-xl border border-cream-200 dark:border-warm-700 py-2 z-50"
            onMouseLeave={() => setShowRecent(false)}
          >
            <div className="px-3 py-2 text-xs font-medium text-warm-500 dark:text-warm-400 uppercase tracking-wider">
              Recent Tasks
            </div>
            {sessions.slice(0, 5).map((session) => (
              <button
                key={session.id}
                type="button"
                onClick={() => {
                  onSelectSession(session);
                  setShowRecent(false);
                }}
                className="w-full px-3 py-2.5 text-left hover:bg-cream-100 dark:hover:bg-warm-700 transition-colors"
              >
                <p className="text-sm font-medium text-warm-800 dark:text-cream-100 truncate">{session.title}</p>
                <p className="text-xs text-warm-500 dark:text-warm-400 mt-0.5">
                  {formatRelativeTime(session.updatedAt)}
                </p>
              </button>
            ))}
          </div>
        )}
      </div>

      <div className="flex-1" />
    </div>
  );
};