'use client';

import type { RecentThought } from '@/entities/session';
import type { AppHubVisualMode } from '@/shared/config/appHubVisualMode';
import { cn } from '@/shared/lib/cn';
import { AppUtilityDrawer } from './AppUtilityDrawer';
import { type AppUtilityPanelId } from '../model/types';
import { InboxDrawerPanel } from './panels/InboxDrawerPanel';
import { SettingsDrawerPanel } from './panels/SettingsDrawerPanel';
import { StatsDrawerPanel } from './panels/StatsDrawerPanel';

interface AppUtilityRailWidgetProps {
  visualMode: AppHubVisualMode;
  activePanel: AppUtilityPanelId | null;
  thoughts: RecentThought[];
  thoughtCount: number;
  onOpenPanel: (panel: AppUtilityPanelId) => void;
  onClosePanel: () => void;
  onClearInbox: () => void;
}

const RAIL_ITEMS: Array<{
  id: AppUtilityPanelId;
  icon: string;
  label: string;
}> = [
  { id: 'inbox', icon: '📨', label: 'Inbox' },
  { id: 'stats', icon: '📊', label: 'Stats' },
  { id: 'settings', icon: '⚙', label: 'Settings' },
];

const PANEL_TITLE_MAP: Record<AppUtilityPanelId, string> = {
  inbox: '임시 보관함',
  stats: '집중 요약',
  settings: '설정',
};

export const AppUtilityRailWidget = ({
  visualMode,
  activePanel,
  thoughts,
  thoughtCount,
  onOpenPanel,
  onClosePanel,
  onClearInbox,
}: AppUtilityRailWidgetProps) => {
  const cinematic = visualMode === 'cinematic';

  return (
    <>
      <div className="fixed right-3 top-1/2 z-30 -translate-y-1/2">
        <div
          className={cn(
            'flex w-12 flex-col items-center gap-2 rounded-2xl border py-2 backdrop-blur-xl',
            cinematic
              ? 'border-white/18 bg-slate-950/34 shadow-[0_18px_32px_rgba(2,6,23,0.42)]'
              : 'border-brand-dark/12 bg-white/54 shadow-[0_18px_32px_rgba(15,23,42,0.14)]',
          )}
        >
          {RAIL_ITEMS.map((item) => {
            const selected = activePanel === item.id;

            return (
              <button
                key={item.id}
                type="button"
                title={item.label}
                aria-label={item.label}
                onClick={() => onOpenPanel(item.id)}
                className={cn(
                  'relative inline-flex h-9 w-9 items-center justify-center rounded-xl border text-base transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/75',
                  selected
                    ? cinematic
                      ? 'border-sky-200/64 bg-sky-200/22'
                      : 'border-brand-primary/44 bg-brand-primary/14'
                    : cinematic
                      ? 'border-white/18 bg-white/8 hover:bg-white/14'
                      : 'border-brand-dark/14 bg-white/72 hover:bg-white',
                )}
              >
                <span aria-hidden>{item.icon}</span>
                {item.id === 'inbox' && thoughtCount > 0 ? (
                  <span
                    className={cn(
                      'absolute -right-1 -top-1 inline-flex min-w-[1rem] items-center justify-center rounded-full px-1 py-0.5 text-[9px] font-semibold',
                      cinematic
                        ? 'bg-sky-200/28 text-sky-50'
                        : 'bg-brand-primary/18 text-brand-primary',
                    )}
                  >
                    {thoughtCount > 99 ? '99+' : `${thoughtCount}`}
                  </span>
                ) : null}
              </button>
            );
          })}
        </div>
      </div>

      <AppUtilityDrawer
        open={activePanel !== null}
        title={activePanel ? PANEL_TITLE_MAP[activePanel] : ''}
        visualMode={visualMode}
        onClose={onClosePanel}
      >
        {activePanel === 'inbox' ? (
          <InboxDrawerPanel
            visualMode={visualMode}
            thoughts={thoughts}
            onClear={onClearInbox}
          />
        ) : null}
        {activePanel === 'stats' ? <StatsDrawerPanel visualMode={visualMode} /> : null}
        {activePanel === 'settings' ? (
          <SettingsDrawerPanel visualMode={visualMode} />
        ) : null}
      </AppUtilityDrawer>
    </>
  );
};