'use client'

import { usePanelStore } from '@/lib/stores/panel-store'
import { cn } from '@/lib/utils'
import { FileText, LayoutGrid } from 'lucide-react'
import type { SceneInstance, ScenesCatalog, Scene } from '@prisma/client'

type SceneWithCatalog = SceneInstance & {
  catalog: ScenesCatalog
  scene: Pick<Scene, 'id' | 'wordCount' | 'status'> | null
}

interface LeftPanelProps {
  scenes: SceneWithCatalog[]
  currentSceneIndex: number
  onSelectScene: (index: number) => void
  format: string
}

export function LeftPanel({
  scenes,
  currentSceneIndex,
  onSelectScene,
  format,
}: LeftPanelProps) {
  const { leftPanelWidth, leftPanelTab, setLeftPanelTab } = usePanelStore()

  return (
    <aside
      className="border-r border-border bg-muted/30 flex flex-col overflow-hidden shrink-0"
      style={{ width: leftPanelWidth }}
    >
      {/* Tab switcher */}
      <div className="flex border-b border-border">
        <button
          onClick={() => setLeftPanelTab('scenes')}
          className={cn(
            'flex-1 flex items-center justify-center gap-1.5 px-3 py-2 text-xs font-medium transition-colors',
            leftPanelTab === 'scenes'
              ? 'text-foreground border-b-2 border-brand-500'
              : 'text-muted-foreground hover:text-foreground'
          )}
        >
          <FileText className="h-3.5 w-3.5" />
          Scenes
        </button>
        <button
          onClick={() => setLeftPanelTab('cards')}
          className={cn(
            'flex-1 flex items-center justify-center gap-1.5 px-3 py-2 text-xs font-medium transition-colors',
            leftPanelTab === 'cards'
              ? 'text-foreground border-b-2 border-brand-500'
              : 'text-muted-foreground hover:text-foreground'
          )}
        >
          <LayoutGrid className="h-3.5 w-3.5" />
          Cards
        </button>
      </div>

      {/* Scene list */}
      <div className="flex-1 overflow-y-auto">
        {leftPanelTab === 'scenes' ? (
          <div className="p-2 space-y-0.5">
            {scenes.map((si, index) => (
              <button
                key={si.id}
                onClick={() => onSelectScene(index)}
                className={cn(
                  'w-full text-left rounded-md px-3 py-2 transition-colors',
                  index === currentSceneIndex
                    ? 'bg-brand-500/10 text-brand-600'
                    : 'hover:bg-accent text-foreground'
                )}
              >
                <div className="flex items-center gap-2">
                  <span className="text-[10px] font-mono text-muted-foreground w-6 shrink-0">
                    {si.positionNumber}
                  </span>
                  <div className="min-w-0 flex-1">
                    <p className="text-xs font-medium truncate">
                      {si.catalog.slugline}
                    </p>
                    {si.catalog.synopsis && (
                      <p className="text-[10px] text-muted-foreground truncate mt-0.5">
                        {si.catalog.synopsis}
                      </p>
                    )}
                  </div>
                  {/* Status dot */}
                  <div
                    className={cn('h-1.5 w-1.5 rounded-full shrink-0', {
                      'bg-emerald-500': si.scene?.status === 'complete',
                      'bg-brand-500': si.scene?.status === 'writing',
                      'bg-blue-400': si.scene?.status === 'generated',
                      'bg-muted-foreground/30': !si.scene || si.scene.status === 'empty',
                    })}
                  />
                </div>
              </button>
            ))}
          </div>
        ) : (
          <div className="p-3 grid grid-cols-2 gap-2">
            {scenes.map((si, index) => (
              <button
                key={si.id}
                onClick={() => onSelectScene(index)}
                className={cn(
                  'rounded-md border p-2 text-left transition-colors',
                  index === currentSceneIndex
                    ? 'border-brand-500 bg-brand-500/5'
                    : 'border-border hover:border-brand-500/30'
                )}
              >
                <p className="text-[10px] font-mono text-muted-foreground">
                  Act {si.catalog.act} · #{si.positionNumber}
                </p>
                <p className="text-xs font-medium mt-1 line-clamp-2">
                  {si.catalog.slugline}
                </p>
                <p className="text-[10px] text-muted-foreground mt-1">
                  {si.scene?.wordCount ?? 0} words
                </p>
              </button>
            ))}
          </div>
        )}
      </div>
    </aside>
  )
}