import { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { Plus, Trash2, MessageSquare, Workflow as WorkflowIcon, Pencil, Check, Box } from 'lucide-react';
import apiClient from '../../api/client';
import type { Workflow } from '../../types';
import { useChatStore } from '../../store/useChatStore';
import { useAppStore } from '../../store/useAppStore';

interface LeftPanelProps {
  activeTab: string;
}

export function LeftPanel({ activeTab }: LeftPanelProps) {
  const { t } = useTranslation();
  const [workflows, setWorkflows] = useState<Workflow[]>([]);
  const [loadingWorkflows, setLoadingWorkflows] = useState(false);
  const [renamingId, setRenamingId] = useState<string | null>(null);
  const [renameValue, setRenameValue] = useState('');

  const {
    sessions,
    activeSessionId,
    setActiveSessionId,
    removeSession,
    selectedWorkflow,
    setSelectedWorkflow,
    updateSessionTitle,
  } = useChatStore();

  const installedHeavyPlugins = useAppStore((s) => s.installedHeavyPlugins);
  const activeHeavyPlugin = useAppStore((s) => s.activeHeavyPlugin);
  const setActiveHeavyPlugin = useAppStore((s) => s.setActiveHeavyPlugin);
  const heavyPluginsWithUi = installedHeavyPlugins.filter((p) => p.has_ui);


  useEffect(() => {
    let intervalId: ReturnType<typeof setInterval>;

    const fetchWorkflows = async (isInitial = false) => {
      if (isInitial) setLoadingWorkflows(true);
      try {
        const response = await apiClient.get('/api/v1/workflow/list');
        const data = response.data;
        let parsedWorkflows: Workflow[] = [];
        if (Array.isArray(data)) {
          parsedWorkflows = data;
        } else if (data && typeof data === 'object') {
          parsedWorkflows = data.workflows || Object.values(data);
        }
        setWorkflows(parsedWorkflows);
      } catch (error) {
        console.error('Failed to fetch workflows', error);
        setWorkflows([]);
      } finally {
        if (isInitial) setLoadingWorkflows(false);
      }
    };

    if (activeTab === 'workflows') {
      fetchWorkflows(true);
      intervalId = setInterval(() => fetchWorkflows(false), 2000);
    }

    return () => {
      if (intervalId) clearInterval(intervalId);
    };
  }, [activeTab]);

  const handleNewChat = () => {
    setActiveSessionId(null);
    setActiveHeavyPlugin(null);
  };

  const handleDeleteChat = (e: React.MouseEvent, id: string) => {
    e.stopPropagation();
    removeSession(id);
  };

  const handleStartRename = (e: React.MouseEvent, id: string, title: string) => {
    e.stopPropagation();
    setRenamingId(id);
    setRenameValue(title);
  };

  const handleConfirmRename = (e: React.MouseEvent) => {
    e.stopPropagation();
    if (renamingId && renameValue.trim()) {
      updateSessionTitle(renamingId, renameValue.trim());
    }
    setRenamingId(null);
  };

  const isChats = activeTab === 'chats';

  return (
    <div className="w-[260px] bg-bg-sidebar border-r border-border-primary flex flex-col shrink-0">
      <div className="flex items-center justify-between px-4 py-4">
        <span className="text-[11px] font-semibold text-text-muted uppercase tracking-[1.5px]">
          {isChats ? t('chat.chatHistory') : t('nav.workflow')}
        </span>
        <button
          onClick={() => {
            if (isChats) handleNewChat();
            else setSelectedWorkflow('new');
          }}
          className="w-[26px] h-[26px] rounded-md bg-bg-card text-text-secondary hover:bg-accent hover:text-white transition-all flex items-center justify-center shadow-[0_1px_2px_rgba(0,0,0,0.04)]"
          title={isChats ? t('chat.newChat') : t('workflow.createWorkflow')}
        >
          <Plus size={12} />
        </button>
      </div>

      <div className="flex-1 overflow-y-auto px-2 pb-2">
        {isChats ? (
          sessions.length === 0 ? (
            <div className="px-3 py-8 text-center text-text-muted text-xs">
              {t('chat.noHistory')}
            </div>
          ) : (
            sessions.map((session) => {
              const isActive = activeSessionId === session.id;
              const isRenaming = renamingId === session.id;
              return (
                <div
                  key={session.id}
                  onClick={() => {
                    setActiveSessionId(session.id);
                    setActiveHeavyPlugin(null);
                  }}
                  className={`group flex items-center gap-2.5 px-2.5 py-2 rounded-lg cursor-pointer transition-all mb-px ${
                    isActive
                      ? 'bg-bg-card shadow-[0_1px_3px_rgba(0,0,0,0.04)]'
                      : 'hover:bg-white/60 dark:hover:bg-white/[0.04]'
                  }`}
                >
                  <div className={`w-7 h-7 rounded-[7px] flex items-center justify-center flex-shrink-0 ${isActive ? 'bg-accent-light' : 'bg-bg-primary'}`}>
                    <MessageSquare size={12} className={isActive ? 'text-accent' : 'text-text-muted'} />
                  </div>
                  <div className="flex-1 min-w-0">
                    {isRenaming ? (
                      <input
                        autoFocus
                        value={renameValue}
                        onChange={(e) => setRenameValue(e.target.value)}
                        onClick={(e) => e.stopPropagation()}
                        onKeyDown={(e) => { if (e.key === 'Enter') handleConfirmRename(e as any); if (e.key === 'Escape') setRenamingId(null); }}
                        className="w-full text-xs bg-bg-input border border-border-primary rounded px-1.5 py-0.5 text-text-primary focus:outline-none focus:border-accent"
                      />
                    ) : (
                      <h3 className={`text-xs truncate ${isActive ? 'text-text-primary font-medium' : 'text-text-secondary'}`}>
                        {session.title}
                      </h3>
                    )}
                  </div>
                  {isRenaming ? (
                    <button onClick={handleConfirmRename} className="p-1 rounded text-accent hover:bg-accent-light transition-all">
                      <Check size={11} />
                    </button>
                  ) : (
                    <div className="flex items-center opacity-0 group-hover:opacity-100 transition-all">
                      <button onClick={(e) => handleStartRename(e, session.id, session.title)} className="p-1 rounded text-text-muted hover:text-accent transition-all">
                        <Pencil size={11} />
                      </button>
                      <button onClick={(e) => handleDeleteChat(e, session.id)} className="p-1 rounded text-text-muted hover:text-danger transition-all">
                        <Trash2 size={11} />
                      </button>
                    </div>
                  )}
                </div>
              );
            })
          )
        ) : (
          <>
            {loadingWorkflows ? (
              <div className="px-3 py-8 text-center text-text-muted text-xs">{t('workflow.loading')}</div>
            ) : workflows.length === 0 ? (
              <div className="px-3 py-8 text-center text-text-muted text-xs">
                {t('workflow.noWorkflows')}
              </div>
            ) : (
              workflows.map((wf) => {
                const isActive = selectedWorkflow === wf.trace_id;
                return (
                  <div
                    key={wf.trace_id}
                    onClick={() => setSelectedWorkflow(wf.trace_id)}
                    className={`group flex items-center gap-2.5 px-2.5 py-2 rounded-lg cursor-pointer transition-all mb-px ${
                      isActive
                        ? 'bg-bg-card shadow-[0_1px_3px_rgba(0,0,0,0.04)]'
                        : 'hover:bg-white/60 dark:hover:bg-white/[0.04]'
                    }`}
                  >
                    <div className={`w-7 h-7 rounded-[7px] flex items-center justify-center flex-shrink-0 ${isActive ? 'bg-accent-light' : 'bg-bg-primary'}`}>
                      <WorkflowIcon size={12} className={isActive ? 'text-accent' : 'text-text-muted'} />
                    </div>
                    <div className="flex-1 min-w-0">
                      <h3 className={`text-xs truncate ${isActive ? 'text-text-primary font-medium' : 'text-text-secondary'}`}>
                        {wf.title || t('common.unnamed')}
                      </h3>
                    </div>
                  </div>
                );
              })
            )}
          </>
        )}
      </div>

      {isChats && heavyPluginsWithUi.length > 0 && (
        <div className="border-t border-border-primary px-2 py-3 shrink-0">
          <div className="px-2.5 text-[10px] font-semibold text-text-muted uppercase tracking-[1.2px] mb-1.5">
            {t('chat.plugins.title')}
          </div>
          {heavyPluginsWithUi.map((p) => {
            const isActive = activeHeavyPlugin === p.name;
            return (
              <button
                key={p.name}
                onClick={() => {
                  setActiveHeavyPlugin(p.name);
                  setActiveSessionId(null);
                }}
                className={`w-full flex items-center gap-2.5 px-2.5 py-2 rounded-lg transition-all mb-px ${
                  isActive
                    ? 'bg-bg-card shadow-[0_1px_3px_rgba(0,0,0,0.04)]'
                    : 'hover:bg-white/60 dark:hover:bg-white/[0.04]'
                }`}
              >
                <div className={`w-7 h-7 rounded-[7px] flex items-center justify-center flex-shrink-0 ${isActive ? 'bg-accent-light' : 'bg-bg-primary'}`}>
                  <Box size={12} className={isActive ? 'text-accent' : 'text-text-muted'} />
                </div>
                <span className={`text-xs truncate ${isActive ? 'text-text-primary font-medium' : 'text-text-secondary'}`}>
                  {p.display_name}
                </span>
              </button>
            );
          })}
        </div>
      )}
    </div>
  );
}