/**
 * Color Editor — compact list item with inline expand-to-edit
 *
 * Shows a color swatch + name row by default.
 * Pencil icon appears on hover. Clicking the row expands the editor inline.
 */

import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Button } from '@/components/ui/button'
import { Pencil, Trash2, ChevronUp } from 'lucide-react'
import { cn } from '@/lib/utils'
import { GlobalColor } from '../config'

interface ColorEditorProps {
  color: GlobalColor
  onChange: (updated: GlobalColor) => void
  onDelete?: () => void
  isOpen?: boolean
  onToggle?: () => void
}

export function ColorEditor({ color, onChange, onDelete, isOpen, onToggle }: ColorEditorProps) {
  return (
    <div className={cn(
      'rounded-lg border transition-colors',
      isOpen ? 'bg-card border-border' : 'bg-card/50 hover:bg-card border-transparent hover:border-border'
    )}>
      {/* ── Compact row ── */}
      <button
        type="button"
        onClick={onToggle}
        className="flex items-center gap-3 w-full px-3 py-2.5 text-left group"
      >
        {/* Color swatch */}
        <span
          className="h-7 w-7 rounded-md border border-border/60 shrink-0 shadow-sm"
          style={{ backgroundColor: color.value }}
        />
        {/* Name + hex */}
        <span className="flex-1 min-w-0">
          <span className="text-sm font-medium leading-tight block truncate">
            {color.name}
          </span>
          <span className="text-[11px] text-muted-foreground font-mono leading-tight">
            {color.value}
          </span>
        </span>
        {/* Pencil / Chevron icon */}
        {isOpen ? (
          <ChevronUp className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
        ) : (
          <Pencil className="h-3.5 w-3.5 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity shrink-0" />
        )}
      </button>

      {/* ── Expanded editor ── */}
      {isOpen && (
        <div className="px-3 pb-3 space-y-3 border-t">
          {/* Name */}
          <div className="space-y-1.5 pt-3">
            <Label className="text-xs text-muted-foreground">Name</Label>
            <Input
              value={color.name}
              onChange={(e) => onChange({ ...color, name: e.target.value })}
              placeholder="Color name"
              className="h-8 text-sm"
            />
          </div>

          {/* Color picker + hex input */}
          <div className="space-y-1.5">
            <Label className="text-xs text-muted-foreground">Value</Label>
            <div className="flex gap-2">
              <Input
                type="color"
                value={color.value}
                onChange={(e) => onChange({ ...color, value: e.target.value })}
                className="w-10 h-8 p-0 cursor-pointer shrink-0"
              />
              <Input
                value={color.value}
                onChange={(e) => onChange({ ...color, value: e.target.value })}
                placeholder="#000000"
                className="h-8 font-mono text-sm"
              />
            </div>
          </div>

          {/* Delete (only for user-added tokens) */}
          {!color.isDefault && onDelete && (
            <Button
              variant="ghost"
              size="sm"
              onClick={onDelete}
              className="text-destructive hover:text-destructive hover:bg-destructive/10 w-full justify-center gap-2 h-7 text-xs"
            >
              <Trash2 className="h-3 w-3" />
              Remove
            </Button>
          )}
        </div>
      )}
    </div>
  )
}