'use client'

import { usePanelStore, type RightPanelTab } from '@/lib/stores/panel-store'
import { cn } from '@/lib/utils'
import {
  HelpCircle,
  Users,
  StickyNote,
  Sparkles,
  Search,
  MessageSquare,
  BarChart3,
} from 'lucide-react'
import type { SceneInstance, ScenesCatalog, Scene, Character } from '@prisma/client'

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

interface RightPanelProps {
  activeTab: RightPanelTab
  storyId: string
  scene: SceneWithCatalog | null
  characters: Character[]
  format: string
}

const TABS: { id: RightPanelTab; label: string; icon: typeof HelpCircle }[] = [
  { id: 'questions', label: 'Questions', icon: HelpCircle },
  { id: 'characters', label: 'Characters', icon: Users },
  { id: 'notes', label: 'Notes', icon: StickyNote },
  { id: 'ai', label: 'AI', icon: Sparkles },
  { id: 'mirror', label: 'Mirror', icon: Search },
  { id: 'comments', label: 'Comments', icon: MessageSquare },
  { id: 'structure', label: 'Structure', icon: BarChart3 },
]

export function RightPanel({
  activeTab,
  storyId,
  scene,
  characters,
  format,
}: RightPanelProps) {
  const { rightPanelWidth, setRightPanelTab } = usePanelStore()

  return (
    <aside
      className="border-l border-border bg-background flex flex-col overflow-hidden shrink-0"
      style={{ width: rightPanelWidth }}
    >
      {/* Tab bar */}
      <div className="flex border-b border-border overflow-x-auto">
        {TABS.map((tab) => (
          <button
            key={tab.id}
            onClick={() => setRightPanelTab(tab.id)}
            className={cn(
              'flex items-center gap-1 px-2.5 py-2 text-[10px] font-medium whitespace-nowrap transition-colors',
              activeTab === tab.id
                ? 'text-foreground border-b-2 border-brand-500'
                : 'text-muted-foreground hover:text-foreground'
            )}
            title={tab.label}
          >
            <tab.icon className="h-3.5 w-3.5" />
            <span className="hidden xl:inline">{tab.label}</span>
          </button>
        ))}
      </div>

      {/* Panel content */}
      <div className="flex-1 overflow-y-auto p-4">
        {activeTab === 'questions' && (
          <div>
            <h3 className="text-sm font-semibold mb-3">Guided Questions</h3>
            <p className="text-xs text-muted-foreground">
              Answer questions about your story to shape the scene structure.
              The question flow will be loaded here.
            </p>
            {/* TODO: GuidedQuestionsFlow component */}
          </div>
        )}

        {activeTab === 'characters' && (
          <div>
            <h3 className="text-sm font-semibold mb-3">Characters</h3>
            {characters.length === 0 ? (
              <p className="text-xs text-muted-foreground">
                No characters yet. Create your first character.
              </p>
            ) : (
              <div className="space-y-2">
                {characters.map((char) => (
                  <div
                    key={char.id}
                    className="rounded-md border border-border p-3"
                  >
                    <p className="text-sm font-medium">{char.name}</p>
                    {char.archetype && (
                      <p className="text-[10px] text-muted-foreground mt-0.5">
                        {char.archetype}
                      </p>
                    )}
                    {char.bio && (
                      <p className="text-xs text-muted-foreground mt-1 line-clamp-2">
                        {char.bio}
                      </p>
                    )}
                  </div>
                ))}
              </div>
            )}
            {/* TODO: CharacterEditor component */}
          </div>
        )}

        {activeTab === 'notes' && (
          <div>
            <h3 className="text-sm font-semibold mb-3">Scene Notes</h3>
            {scene ? (
              <div>
                <p className="text-xs text-muted-foreground mb-2">
                  Notes for: {scene.catalog.slugline}
                </p>
                {/* TODO: SceneNotes component */}
                <textarea
                  className="w-full rounded-md border border-input bg-background px-3 py-2 text-xs resize-none min-h-[200px] focus:outline-none focus:ring-2 focus:ring-ring"
                  placeholder="Add notes for this scene..."
                />
              </div>
            ) : (
              <p className="text-xs text-muted-foreground">
                Select a scene to view its notes.
              </p>
            )}
          </div>
        )}

        {activeTab === 'ai' && (
          <div>
            <h3 className="text-sm font-semibold mb-3">AI Suggestions</h3>
            <p className="text-xs text-muted-foreground">
              AI-powered suggestions for your current scene.
              Configure your AI tier in Settings.
            </p>
            {/* TODO: AISuggestionPanel component */}
          </div>
        )}

        {activeTab === 'mirror' && (
          <div>
            <h3 className="text-sm font-semibold mb-3">Script Mirror</h3>
            <p className="text-xs text-muted-foreground">
              Multi-lens analysis of your screenplay.
              Run a full analysis when you have at least 5 written scenes.
            </p>
            {/* TODO: ScriptMirrorPanel component */}
          </div>
        )}

        {activeTab === 'comments' && (
          <div>
            <h3 className="text-sm font-semibold mb-3">Comments</h3>
            <p className="text-xs text-muted-foreground">
              Collaboration comments for this scene.
            </p>
            {/* TODO: CollaborationComments component */}
          </div>
        )}

        {activeTab === 'structure' && (
          <div>
            <h3 className="text-sm font-semibold mb-3">Structure Check</h3>
            <p className="text-xs text-muted-foreground">
              Format rules analysis for {format.replace(/_/g, ' ')}.
              Structural checks will appear here.
            </p>
            {/* TODO: FormatRulesPanel component */}
          </div>
        )}
      </div>
    </aside>
  )
}