'use client'

import { cn } from '@/lib/utils'
import { CheckCircle2, Loader2 } from 'lucide-react'
import type { SceneInstance, ScenesCatalog, Scene } from '@prisma/client'

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

interface StatusBarProps {
  currentScene: SceneWithCatalog | null
  currentSceneIndex: number
  totalScenes: number
  totalWordCount: number
}

export function StatusBar({
  currentScene,
  currentSceneIndex,
  totalScenes,
  totalWordCount,
}: StatusBarProps) {
  // Rough page estimate: ~250 words per screenplay page
  const estimatedPages = Math.round(totalWordCount / 250)

  return (
    <footer className="flex items-center justify-between border-t border-border px-4 py-1.5 bg-muted/30 text-[10px] text-muted-foreground">
      <div className="flex items-center gap-4">
        {/* Scene position */}
        <span>
          Scene {currentSceneIndex + 1} of {totalScenes}
        </span>

        {/* Scene word count */}
        {currentScene?.scene && (
          <span>{currentScene.scene.wordCount} words (scene)</span>
        )}

        {/* Total word count */}
        <span>
          {totalWordCount.toLocaleString()} words total
          {estimatedPages > 0 && ` · ~${estimatedPages} pages`}
        </span>
      </div>

      <div className="flex items-center gap-4">
        {/* Auto-save indicator */}
        <span className="flex items-center gap-1">
          <CheckCircle2 className="h-3 w-3 text-emerald-500" />
          Saved
        </span>

        {/* AI tier badge */}
        <span className="rounded-full bg-muted px-2 py-0.5 text-[9px] font-medium uppercase tracking-wider">
          AI: Private API
        </span>
      </div>
    </footer>
  )
}