'use client';

import { useState, useRef, useEffect } from 'react';

const API_URL = process.env.NEXT_PUBLIC_API_URL || '';

export default function CapturePage() {
  const [state, setState] = useState<'idle' | 'recording' | 'transcribing' | 'saved' | 'error'>('idle');
  const [countdown, setCountdown] = useState(0);
  const [recentCaptures, setRecentCaptures] = useState<{name: string, duration: string}[]>([]);
  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
  const chunksRef = useRef<Blob[]>([]);
  const streamRef = useRef<MediaStream | null>(null);
  const wakeLockRef = useRef<any>(null);
  const countdownRef = useRef<any>(null);
  const mimeTypeRef = useRef('audio/webm');
  const MAX_SECONDS = 600;

  useEffect(() => {
    loadRecentCaptures();
  }, []);

  async function loadRecentCaptures() {
    try {
      const res = await fetch(`${API_URL}/api/captures`);
      if (res.ok) {
        const data = await res.json();
        setRecentCaptures(data.captures || []);
      }
    } catch {}
  }

  async function acquireWakeLock() {
    try {
      if ('wakeLock' in navigator) {
        wakeLockRef.current = await (navigator as any).wakeLock.request('screen');
      }
    } catch {}
  }

  function releaseWakeLock() {
    wakeLockRef.current?.release();
    wakeLockRef.current = null;
  }

  async function startRecording() {
    try {
      if (!streamRef.current || streamRef.current.getTracks().every(t => t.readyState === 'ended')) {
        streamRef.current = await navigator.mediaDevices.getUserMedia({ audio: true });
      }
      const mimeType = MediaRecorder.isTypeSupported('audio/webm') ? 'audio/webm'
        : MediaRecorder.isTypeSupported('audio/mp4') ? 'audio/mp4' : 'audio/ogg';
      mimeTypeRef.current = mimeType;
      chunksRef.current = [];
      const mr = new MediaRecorder(streamRef.current, { mimeType });
      mr.ondataavailable = e => { if (e.data.size > 0) chunksRef.current.push(e.data); };
      mr.onstop = async () => {
        if (chunksRef.current.length === 0) return;
        setState('transcribing');
        try {
          const blob = new Blob(chunksRef.current, { type: mimeTypeRef.current });
          const form = new FormData();
          form.append('audio', blob, 'capture.webm');
          const res = await fetch(`${API_URL}/api/capture`, { method: 'POST', body: form });
          if (res.ok) {
            setState('saved');
            await loadRecentCaptures();
            setTimeout(() => setState('idle'), 3000);
          } else {
            setState('error');
            setTimeout(() => setState('idle'), 3000);
          }
        } catch {
          setState('error');
          setTimeout(() => setState('idle'), 3000);
        }
      };
      mr.start(1000);
      mediaRecorderRef.current = mr;
      setState('recording');
      setCountdown(MAX_SECONDS);
      await acquireWakeLock();
      countdownRef.current = setInterval(() => {
        setCountdown(prev => {
          if (prev <= 1) { stopRecording(); return 0; }
          return prev - 1;
        });
      }, 1000);
    } catch {
      setState('error');
      setTimeout(() => setState('idle'), 3000);
    }
  }

  function stopRecording() {
    if (countdownRef.current) { clearInterval(countdownRef.current); countdownRef.current = null; }
    releaseWakeLock();
    mediaRecorderRef.current?.stop();
  }

  function handleTap() {
    if (state === 'recording') stopRecording();
    else if (state === 'idle') startRecording();
  }

  const isRecording = state === 'recording';
  const isBusy = state === 'transcribing';

  return (
    <div style={{
      minHeight: '100dvh',
      background: 'var(--bg)',
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'space-between',
      paddingTop: 'max(48px, env(safe-area-inset-top))',
      paddingBottom: 'max(48px, env(safe-area-inset-bottom))',
      paddingLeft: 'max(24px, env(safe-area-inset-left))',
      paddingRight: 'max(24px, env(safe-area-inset-right))',
      fontFamily: 'var(--font-mono)',
    }}>

      {/* Header */}
      <div style={{ textAlign: 'center' }}>
        <p style={{
          fontSize: '10px',
          letterSpacing: '0.15em',
          color: 'var(--text3)',
          textTransform: 'uppercase',
          margin: 0,
        }}>
          Bird — field recorder
        </p>
      </div>

      {/* Main button area */}
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '40px' }}>

        {/* Waveform — decorative */}
        <div style={{
          display: 'flex',
          alignItems: 'center',
          gap: '3px',
          height: '40px',
          opacity: isRecording ? 1 : 0.2,
          transition: 'opacity 0.4s ease',
        }}>
          {[4,8,16,6,24,10,32,14,20,8,12,28,6,18,4,22,10,16,8,4].map((h, i) => (
            <div key={i} style={{
              width: '2px',
              height: `${h}px`,
              background: 'var(--accent)',
              borderRadius: '1px',
              animation: isRecording ? `wave ${0.8 + (i % 4) * 0.2}s ease-in-out infinite alternate` : 'none',
            }} />
          ))}
        </div>

        {/* Big button */}
        <button
          onPointerUp={handleTap}
          disabled={isBusy}
          style={{
            width: '160px',
            height: '160px',
            borderRadius: '50%',
            border: `1.5px solid ${isRecording ? '#a32d2d' : 'var(--accent)'}`,
            background: isRecording ? 'rgba(163,45,45,0.08)' : 'var(--bg2)',
            cursor: isBusy ? 'not-allowed' : 'pointer',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            transition: 'all 0.3s ease',
            touchAction: 'manipulation',
            animation: isBusy ? 'none' : isRecording ? 'recordPulse 1.5s ease-in-out infinite' : 'idlePulse 3s ease-in-out infinite',
          }}
          aria-label={isRecording ? 'Stop recording' : 'Start recording'}
        >
          {isBusy ? (
            <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor" style={{ color: 'var(--accent)' }}>
              <circle cx="12" cy="12" r="3" opacity="0.6">
                <animate attributeName="opacity" values="0.6;1;0.6" dur="1s" repeatCount="indefinite"/>
              </circle>
            </svg>
          ) : isRecording ? (
            <div style={{ width: '24px', height: '24px', background: '#a32d2d', borderRadius: '4px' }} />
          ) : (
            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="1.5">
              <path d="M12 1a4 4 0 0 1 4 4v6a4 4 0 0 1-8 0V5a4 4 0 0 1 4-4z"/>
              <path d="M5 11a7 7 0 0 0 14 0"/>
              <line x1="12" y1="18" x2="12" y2="22"/>
              <line x1="8" y1="22" x2="16" y2="22"/>
            </svg>
          )}
        </button>

        {/* Status */}
        <div style={{ textAlign: 'center', minHeight: '36px' }}>
          {state === 'idle' && (
            <p style={{ fontSize: '11px', color: 'var(--text3)', letterSpacing: '0.12em', textTransform: 'uppercase', margin: 0 }}>
              tap to capture
            </p>
          )}
          {state === 'recording' && (
            <>
              <p style={{ fontSize: '11px', color: '#a32d2d', letterSpacing: '0.12em', textTransform: 'uppercase', margin: '0 0 6px' }}>
                recording
              </p>
              {countdown <= 15 && (
                <p style={{ fontSize: '20px', color: '#a32d2d', letterSpacing: '0.05em', margin: 0 }}>
                  {countdown}s
                </p>
              )}
            </>
          )}
          {state === 'transcribing' && (
            <p style={{ fontSize: '11px', color: 'var(--text3)', letterSpacing: '0.12em', textTransform: 'uppercase', margin: 0 }}>
              transcribing...
            </p>
          )}
          {state === 'saved' && (
            <p style={{ fontSize: '11px', color: 'var(--accent)', letterSpacing: '0.12em', textTransform: 'uppercase', margin: 0 }}>
              saved ✓
            </p>
          )}
          {state === 'error' && (
            <p style={{ fontSize: '11px', color: '#a32d2d', letterSpacing: '0.12em', textTransform: 'uppercase', margin: 0 }}>
              error — try again
            </p>
          )}
        </div>
      </div>

      {/* Recent captures */}
      <div style={{ width: '100%', maxWidth: '320px' }}>
        <p style={{ fontSize: '9px', color: 'var(--text3)', letterSpacing: '0.12em', textTransform: 'uppercase', margin: '0 0 10px' }}>
          recent captures
        </p>
        {recentCaptures.length === 0 ? (
          <p style={{ fontSize: '10px', color: 'var(--text3)', margin: 0, opacity: 0.5 }}>none yet</p>
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
            {recentCaptures.slice(0, 4).map((c, i) => (
              <div key={i} style={{
                display: 'flex',
                alignItems: 'center',
                gap: '8px',
                padding: '8px 10px',
                background: 'var(--bg2)',
                borderRadius: '6px',
                border: '1px solid var(--border)',
              }}>
                <div style={{ width: '4px', height: '4px', borderRadius: '50%', background: 'var(--accent)', flexShrink: 0 }} />
                <span style={{ fontSize: '10px', color: 'var(--text2)', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                  {c.name}
                </span>
                <span style={{ fontSize: '9px', color: 'var(--text3)' }}>{c.duration}</span>
              </div>
            ))}
          </div>
        )}
      </div>

      <style>{`
        @keyframes idlePulse {
          0%, 100% { box-shadow: 0 0 0 0 rgba(45,158,107,0); }
          50% { box-shadow: 0 0 0 12px rgba(45,158,107,0.06); }
        }
        @keyframes recordPulse {
          0%, 100% { box-shadow: 0 0 0 0 rgba(163,45,45,0); }
          50% { box-shadow: 0 0 0 16px rgba(163,45,45,0.08); }
        }
        @keyframes wave {
          from { transform: scaleY(0.4); }
          to { transform: scaleY(1.4); }
        }
      `}</style>
    </div>
  );
}