'use client';

import { useState } from 'react';
import { Plus, Pencil, X } from 'lucide-react';
import { useDashboardStore } from '@/stores/dashboardStore';

interface DashboardSidebarProps {
  onAddDashboard: () => void;
  onRenameDashboard: (id: string) => void;
  onDeleteDashboard: (id: string) => void;
  onSwitchDashboard: (id: string) => void;
}

export function DashboardSidebar({
  onAddDashboard,
  onRenameDashboard,
  onDeleteDashboard,
  onSwitchDashboard,
}: DashboardSidebarProps) {
  const dashboards = useDashboardStore((s) => s.dashboards);
  const activeDashboardId = useDashboardStore((s) => s.activeDashboardId);

  return (
    <div className="dash-side">
      <div className="dash-side-sec">내 대시보드</div>
      {dashboards.map((d) => {
        const id = d.dashboard_id ?? d.DASHBOARD_ID;
        const name = d.name ?? d.NAME ?? '대시보드';
        const icon = d.icon ?? d.ICON ?? '📋';
        const isActive = id === activeDashboardId;

        return (
          <div
            key={id}
            className={`dash-si${isActive ? ' on' : ''}`}
            onClick={() => onSwitchDashboard(id)}
          >
            <span className="ic">{icon}</span>
            <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
              {name}
            </span>
            <div className="dash-si-actions">
              <button
                className="dash-si-act"
                title="이름 변경"
                onClick={(e) => { e.stopPropagation(); onRenameDashboard(id); }}
              >
                <Pencil size={11} />
              </button>
              <button
                className="dash-si-act danger"
                title="삭제"
                onClick={(e) => { e.stopPropagation(); onDeleteDashboard(id); }}
              >
                <X size={11} />
              </button>
            </div>
          </div>
        );
      })}
      <button className="dash-add-btn" onClick={onAddDashboard}>
        <Plus size={14} />
        <span>새 대시보드</span>
      </button>
    </div>
  );
}