'use client';

import * as React from 'react';
import { Volume2, VolumeX, Headphones, Trash2, ChevronDown, ChevronRight } from 'lucide-react';
import type { Track as TrackType } from '@/types/track';
import { Button } from '@/components/ui/Button';
import { Slider } from '@/components/ui/Slider';
import { cn } from '@/lib/utils/cn';

export interface TrackProps {
  track: TrackType;
  zoom: number;
  currentTime: number;
  duration: number;
  isSelected?: boolean;
  onSelect?: () => void;
  onToggleMute: () => void;
  onToggleSolo: () => void;
  onToggleCollapse: () => void;
  onVolumeChange: (volume: number) => void;
  onPanChange: (pan: number) => void;
  onRemove: () => void;
  onNameChange: (name: string) => void;
  onSeek?: (time: number) => void;
}

export function Track({
  track,
  zoom,
  currentTime,
  duration,
  isSelected,
  onSelect,
  onToggleMute,
  onToggleSolo,
  onToggleCollapse,
  onVolumeChange,
  onPanChange,
  onRemove,
  onNameChange,
  onSeek,
}: TrackProps) {
  const canvasRef = React.useRef<HTMLCanvasElement>(null);
  const containerRef = React.useRef<HTMLDivElement>(null);
  const [isEditingName, setIsEditingName] = React.useState(false);
  const [nameInput, setNameInput] = React.useState(String(track.name || 'Untitled Track'));
  const inputRef = React.useRef<HTMLInputElement>(null);

  const handleNameClick = () => {
    setIsEditingName(true);
    setNameInput(String(track.name || 'Untitled Track'));
  };

  const handleNameBlur = () => {
    setIsEditingName(false);
    if (nameInput.trim()) {
      onNameChange(nameInput.trim());
    } else {
      setNameInput(String(track.name || 'Untitled Track'));
    }
  };

  const handleNameKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
      inputRef.current?.blur();
    } else if (e.key === 'Escape') {
      setNameInput(String(track.name || 'Untitled Track'));
      setIsEditingName(false);
    }
  };

  React.useEffect(() => {
    if (isEditingName && inputRef.current) {
      inputRef.current.focus();
      inputRef.current.select();
    }
  }, [isEditingName]);

  // Draw waveform
  React.useEffect(() => {
    if (!track.audioBuffer || !canvasRef.current || track.collapsed) return;

    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    if (!ctx) return;

    const dpr = window.devicePixelRatio || 1;
    const rect = canvas.getBoundingClientRect();

    canvas.width = rect.width * dpr;
    canvas.height = rect.height * dpr;
    ctx.scale(dpr, dpr);

    const width = rect.width;
    const height = rect.height;

    // Clear canvas
    ctx.fillStyle = 'rgb(15, 23, 42)';
    ctx.fillRect(0, 0, width, height);

    const buffer = track.audioBuffer;
    const channelData = buffer.getChannelData(0);
    const samplesPerPixel = Math.floor(buffer.length / (width * zoom));

    // Draw waveform
    ctx.fillStyle = track.color;
    ctx.strokeStyle = track.color;
    ctx.lineWidth = 1;

    for (let x = 0; x < width; x++) {
      const startSample = Math.floor(x * samplesPerPixel);
      const endSample = Math.floor((x + 1) * samplesPerPixel);

      let min = 1.0;
      let max = -1.0;

      for (let i = startSample; i < endSample && i < channelData.length; i++) {
        const sample = channelData[i];
        if (sample < min) min = sample;
        if (sample > max) max = sample;
      }

      const y1 = (height / 2) * (1 - max);
      const y2 = (height / 2) * (1 - min);

      ctx.beginPath();
      ctx.moveTo(x, y1);
      ctx.lineTo(x, y2);
      ctx.stroke();
    }

    // Draw center line
    ctx.strokeStyle = 'rgba(148, 163, 184, 0.2)';
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.moveTo(0, height / 2);
    ctx.lineTo(width, height / 2);
    ctx.stroke();

    // Draw playhead
    if (duration > 0) {
      const playheadX = (currentTime / duration) * width;
      ctx.strokeStyle = 'rgba(59, 130, 246, 0.8)';
      ctx.lineWidth = 2;
      ctx.beginPath();
      ctx.moveTo(playheadX, 0);
      ctx.lineTo(playheadX, height);
      ctx.stroke();
    }
  }, [track.audioBuffer, track.color, track.collapsed, zoom, currentTime, duration]);

  const handleCanvasClick = (e: React.MouseEvent<HTMLCanvasElement>) => {
    if (!onSeek || !duration) return;

    const rect = e.currentTarget.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const clickTime = (x / rect.width) * duration;
    onSeek(clickTime);
  };

  const trackHeight = track.collapsed ? 48 : track.height;

  return (
    <div
      ref={containerRef}
      className={cn(
        'flex border-b border-border',
        isSelected && 'ring-2 ring-primary ring-inset'
      )}
      style={{ height: trackHeight }}
    >
      {/* Left: Track Control Panel (Fixed Width) */}
      <div
        className="w-72 flex-shrink-0 bg-card border-r border-border p-3 flex flex-col gap-2"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Track Name & Collapse Toggle */}
        <div className="flex items-center gap-2">
          <Button
            variant="ghost"
            size="icon-sm"
            onClick={onToggleCollapse}
            title={track.collapsed ? 'Expand track' : 'Collapse track'}
          >
            {track.collapsed ? (
              <ChevronRight className="h-4 w-4" />
            ) : (
              <ChevronDown className="h-4 w-4" />
            )}
          </Button>

          <div
            className="w-1 h-8 rounded-full flex-shrink-0"
            style={{ backgroundColor: track.color }}
          />

          <div className="flex-1 min-w-0">
            {isEditingName ? (
              <input
                ref={inputRef}
                type="text"
                value={nameInput}
                onChange={(e) => setNameInput(e.target.value)}
                onBlur={handleNameBlur}
                onKeyDown={handleNameKeyDown}
                className="w-full px-2 py-1 text-sm font-medium bg-background border border-border rounded"
              />
            ) : (
              <div
                onClick={handleNameClick}
                className="px-2 py-1 text-sm font-medium text-foreground truncate cursor-pointer hover:bg-accent rounded"
                title={String(track.name || 'Untitled Track')}
              >
                {String(track.name || 'Untitled Track')}
              </div>
            )}
          </div>

          <Button
            variant="ghost"
            size="icon-sm"
            onClick={onRemove}
            title="Remove track"
            className="text-destructive hover:text-destructive hover:bg-destructive/10"
          >
            <Trash2 className="h-4 w-4" />
          </Button>
        </div>

        {/* Track Controls - Only show when not collapsed */}
        {!track.collapsed && (
          <>
            {/* Volume */}
            <div className="space-y-1">
              <div className="flex items-center justify-between">
                <label className="text-xs text-muted-foreground flex items-center gap-1">
                  <Volume2 className="h-3 w-3" />
                  Volume
                </label>
                <span className="text-xs text-muted-foreground">
                  {Math.round(track.volume * 100)}%
                </span>
              </div>
              <Slider
                value={track.volume}
                onChange={onVolumeChange}
                min={0}
                max={1}
                step={0.01}
              />
            </div>

            {/* Pan */}
            <div className="space-y-1">
              <div className="flex items-center justify-between">
                <label className="text-xs text-muted-foreground">Pan</label>
                <span className="text-xs text-muted-foreground">
                  {track.pan === 0
                    ? 'C'
                    : track.pan < 0
                    ? `L${Math.round(Math.abs(track.pan) * 100)}`
                    : `R${Math.round(track.pan * 100)}`}
                </span>
              </div>
              <Slider
                value={track.pan}
                onChange={onPanChange}
                min={-1}
                max={1}
                step={0.01}
              />
            </div>

            {/* Solo / Mute Buttons */}
            <div className="flex gap-2">
              <Button
                variant={track.solo ? 'default' : 'outline'}
                size="sm"
                onClick={onToggleSolo}
                className={cn(
                  'flex-1 text-xs',
                  track.solo && 'bg-yellow-500/20 hover:bg-yellow-500/30 text-yellow-500'
                )}
              >
                <Headphones className="h-3.5 w-3.5 mr-1.5" />
                Solo
              </Button>
              <Button
                variant={track.mute ? 'default' : 'outline'}
                size="sm"
                onClick={onToggleMute}
                className={cn(
                  'flex-1 text-xs',
                  track.mute && 'bg-red-500/20 hover:bg-red-500/30 text-red-500'
                )}
              >
                {track.mute ? (
                  <VolumeX className="h-3.5 w-3.5 mr-1.5" />
                ) : (
                  <Volume2 className="h-3.5 w-3.5 mr-1.5" />
                )}
                Mute
              </Button>
            </div>
          </>
        )}
      </div>

      {/* Right: Waveform Area (Flexible Width) */}
      <div
        className="flex-1 relative bg-slate-900 cursor-pointer"
        onClick={onSelect}
      >
        {!track.collapsed && (
          <>
            {track.audioBuffer ? (
              <canvas
                ref={canvasRef}
                className="w-full h-full cursor-pointer"
                onClick={handleCanvasClick}
              />
            ) : (
              <div className="flex items-center justify-center h-full text-sm text-muted-foreground">
                No audio loaded
              </div>
            )}
          </>
        )}
      </div>
    </div>
  );
}
