kithara-studio/frontend/src/components/DetailPanel.tsx

import { useRef, useState, useEffect } from 'react'
import { getKeyColor, getBPMColor } from '../utils/musicColors'

interface Clip {
  id: string
  title?: string
  prompt: string
  model: string
  duration_seconds: number
  status: string
  error_message?: string
  file_size_bytes?: number
  artwork_filename?: string | null
  bpm?: number | null
  key?: string | null
  created_at: string
}

interface Props {
  clip: Clip
  onClose: () => void
  onRename: (id: string, title: string) => void
  onDelete: (id: string) => void
  onUploadArtwork: (id: string, file: File) => void
  onRemoveArtwork: (id: string) => void
  onPlay?: (clip: Clip) => void
}

const modelName = (modelId: string) => {
  const names: Record<string, string> = {
    'lyria-3-clip-preview': 'Clip Preview',
    'lyria-3-pro-preview': 'Pro',
  }
  return names[modelId] || modelId
}

export default function DetailPanel({ clip, onClose, onRename, onDelete, onUploadArtwork, onRemoveArtwork, onPlay }: Props) {
  const artworkInputRef = useRef<HTMLInputElement>(null)
  const [isEditingTitle, setIsEditingTitle] = useState(false)
  const [editTitle, setEditTitle] = useState(clip.title || '')
  const titleInputRef = useRef<HTMLInputElement>(null)

  // Focus and select when entering edit mode
  useEffect(() => {
    if (isEditingTitle && titleInputRef.current) {
      titleInputRef.current.focus()
      titleInputRef.current.select()
    }
  }, [isEditingTitle])

  const startEditing = () => {
    setEditTitle(clip.title || '')
    setIsEditingTitle(true)
  }

  const saveTitle = () => {
    if (editTitle.trim() !== (clip.title || '')) {
      onRename(clip.id, editTitle.trim())
    }
    setIsEditingTitle(false)
  }

  const cancelEditing = () => {
    setEditTitle(clip.title || '')
    setIsEditingTitle(false)
  }

  const handleTitleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
      saveTitle()
    } else if (e.key === 'Escape') {
      cancelEditing()
    }
  }

  const formatDate = (dateStr: string) => {
    return new Date(dateStr).toLocaleDateString('en-US', {
      weekday: 'short',
      year: 'numeric',
      month: 'short',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit',
    })
  }

  const statusColor = (status: string) => {
    switch (status) {
      case 'ready': return 'bg-green-500/20 text-green-400'
      case 'generating': return 'bg-yellow-500/20 text-yellow-400'
      case 'failed': return 'bg-red-500/20 text-red-400'
      default: return 'bg-white/10 text-lyria-muted'
    }
  }

  const statusLabel = (status: string) => {
    switch (status) {
      case 'ready': return 'Ready'
      case 'generating': return 'Generating...'
      case 'failed': return 'Failed'
      default: return status
    }
  }

  return (
    <>
      {/* Backdrop */}
      <div
        className="fixed inset-0 bg-black/50 z-40"
        onClick={onClose}
      />
      {/* Panel */}
      <div className="fixed right-0 top-0 bottom-0 w-full max-w-md bg-lyria-panel border-l border-white/10 z-50 overflow-y-auto">
        {/* Header */}
        <div className="sticky top-0 bg-lyria-panel border-b border-white/10 px-5 py-4 flex items-center justify-between">
          <h2 className="text-sm font-semibold text-white uppercase tracking-wider">Track Details</h2>
          <button
            onClick={onClose}
            className="text-lyria-muted hover:text-white transition-colors"
          >
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>

        <div className="p-5 space-y-5">
          {/* Album Artwork */}
          <div>
            <div className="flex items-center justify-between mb-2">
              <label className="text-xs text-lyria-muted uppercase tracking-wider">Album Art</label>
              <div className="flex items-center gap-2">
                <button
                  onClick={() => artworkInputRef.current?.click()}
                  className="text-xs text-lyria-accent hover:text-lyria-accent/80 transition-colors"
                >
                  {clip.artwork_filename ? 'Change' : 'Upload'}
                </button>
                {clip.artwork_filename && (
                  <button
                    onClick={() => onRemoveArtwork(clip.id)}
                    className="text-xs text-red-400 hover:text-red-300 transition-colors"
                  >
                    Remove
                  </button>
                )}
              </div>
            </div>
            {clip.artwork_filename ? (
              <div
                className="relative w-full aspect-square rounded-lg overflow-hidden cursor-pointer group"
                onClick={() => onPlay?.(clip)}
              >
                <img
                  src={`/api/clips/${clip.id}/artwork`}
                  alt="Album art"
                  className="w-full h-full object-cover"
                />
                <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                  <svg className="w-12 h-12 text-white" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M8 5v14l11-7z" />
                  </svg>
                </div>
              </div>
            ) : (
              <div
                className="relative w-full aspect-square bg-white/5 rounded-lg flex flex-col items-center justify-center text-lyria-accent/20 cursor-pointer group hover:bg-white/10 transition-colors"
                onClick={() => onPlay?.(clip)}
              >
                <svg className="w-14 h-14" viewBox="0 0 24 24">
                  <text x="12" y="19" textAnchor="middle" fontSize="20" fill="currentColor">𝄞</text>
                </svg>
                <span className="text-xs mt-1 text-lyria-muted/40">No album art</span>
                <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                  <svg className="w-12 h-12 text-white" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M8 5v14l11-7z" />
                  </svg>
                </div>
              </div>
            )}
            <input
              ref={artworkInputRef}
              type="file"
              accept="image/jpeg,image/png,image/gif,image/webp"
              className="hidden"
              onChange={(e) => {
                const file = e.target.files?.[0]
                if (file) {
                  onUploadArtwork(clip.id, file)
                }
                e.target.value = ''
              }}
            />
          </div>

          {/* FFT Waveform */}
          {clip.status === 'ready' && (
            <div className="rounded-lg overflow-hidden">
              <img
                src={`/api/clips/${clip.id}/waveform`}
                alt="Waveform"
                className="w-full h-20 object-cover"
              />
            </div>
          )}

          {/* Title — inline editable */}
          <div>
            <div className="flex items-center justify-between mb-1">
              <label className="text-xs text-lyria-muted uppercase tracking-wider">Title</label>
              {!isEditingTitle && (
                <button
                  onClick={startEditing}
                  className="text-xs text-lyria-accent hover:text-lyria-accent/80 transition-colors"
                >
                  Rename
                </button>
              )}
            </div>
            {isEditingTitle ? (
              <input
                ref={titleInputRef}
                type="text"
                value={editTitle}
                onChange={(e) => setEditTitle(e.target.value)}
                onBlur={saveTitle}
                onKeyDown={handleTitleKeyDown}
                className="w-full bg-white/5 border border-lyria-accent/50 rounded-md px-3 py-2 text-white text-lg font-medium outline-none focus:border-lyria-accent focus:ring-1 focus:ring-lyria-accent/30 transition-all"
                placeholder="Track title..."
              />
            ) : (
              <p className="text-white text-lg font-medium px-3 py-2 -mx-3 rounded-md hover:bg-white/5 transition-colors cursor-pointer"
                 onClick={startEditing}
                 title="Click to rename"
              >
                {clip.title || <span className="text-lyria-muted italic">Untitled</span>}
              </p>
            )}
          </div>

          {/* Prompt */}
          <div>
            <label className="text-xs text-lyria-muted uppercase tracking-wider mb-1 block">Prompt</label>
            <p className="text-sm text-white/90 whitespace-pre-wrap break-words bg-white/5 rounded-md p-3">
              {clip.prompt}
            </p>
          </div>

          {/* Status */}
          <div>
            <label className="text-xs text-lyria-muted uppercase tracking-wider mb-1 block">Status</label>
            <span className={`text-xs px-2 py-1 rounded ${statusColor(clip.status)}`}>
              {statusLabel(clip.status)}
            </span>
          </div>

          {/* Error message */}
          {clip.status === 'failed' && clip.error_message && (
            <div>
              <label className="text-xs text-lyria-muted uppercase tracking-wider mb-1 block">Error</label>
              <p className="text-sm text-red-400/90 bg-red-500/10 rounded-md p-3 break-words">
                {clip.error_message}
              </p>
            </div>
          )}

          {/* Metadata grid */}
          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="text-xs text-lyria-muted uppercase tracking-wider block">Model</label>
              <p className="text-sm text-white">{modelName(clip.model)}</p>
            </div>
            <div>
              <label className="text-xs text-lyria-muted uppercase tracking-wider block">Duration</label>
              <p className="text-sm text-white">{clip.duration_seconds}s</p>
            </div>
            {clip.file_size_bytes && (
              <div>
                <label className="text-xs text-lyria-muted uppercase tracking-wider block">File Size</label>
                <p className="text-sm text-white">{(clip.file_size_bytes / 1024).toFixed(0)} KB</p>
              </div>
            )}
            {clip.bpm && (() => {
              const c = getBPMColor(clip.bpm)
              return c ? (
                <div>
                  <label className="text-xs text-lyria-muted uppercase tracking-wider block">BPM</label>
                  <span
                    className="text-sm px-2 py-0.5 rounded font-medium inline-block"
                    style={{ backgroundColor: c.bg, color: c.text, border: `1px solid ${c.border}` }}
                  >
                    {Math.round(clip.bpm)}
                  </span>
                </div>
              ) : null
            })()}
            {clip.key && (() => {
              const c = getKeyColor(clip.key)
              return c ? (
                <div>
                  <label className="text-xs text-lyria-muted uppercase tracking-wider block">Key</label>
                  <span
                    className="text-sm px-2 py-0.5 rounded font-medium inline-block"
                    style={{ backgroundColor: c.bg, color: c.text, border: `1px solid ${c.border}` }}
                  >
                    {clip.key}
                  </span>
                </div>
              ) : null
            })()}
            <div>
              <label className="text-xs text-lyria-muted uppercase tracking-wider block">Created</label>
              <p className="text-sm text-white">{formatDate(clip.created_at)}</p>
            </div>
          </div>

          {/* ID (for reference) */}
          <div>
            <label className="text-xs text-lyria-muted uppercase tracking-wider mb-1 block">Clip ID</label>
            <p className="text-xs text-lyria-muted/60 font-mono break-all">{clip.id}</p>
          </div>

          {/* Actions */}
          <div className="pt-3 border-t border-white/5 space-y-2">
            <a
              href={`/api/clips/${clip.id}/download`}
              download
              className="w-full py-2 text-sm text-lyria-accent bg-lyria-accent/10 hover:bg-lyria-accent/20 rounded-md transition-colors flex items-center justify-center gap-2"
            >
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
              </svg>
              Download MP3
            </a>
            <button
              onClick={() => { onDelete(clip.id); onClose() }}
              className="w-full py-2 text-sm text-red-400 bg-red-500/10 hover:bg-red-500/20 rounded-md transition-colors"
            >
              Delete Track
            </button>
          </div>
        </div>
      </div>
    </>
  )
}