App.tsx

import React, { useState, useEffect, useRef } from 'react';
import JSZip from 'jszip';
import { Settings, Download, Calendar, Activity, AlertCircle, FileAudio, CheckCircle } from 'lucide-react';

import Background from './components/Background';
import SettingsModal from './components/SettingsModal';
import StatsCard from './components/StatsCard';

import { AppConfig, ExtractionMode, ProcessingLog, LimitlessRecording } from './types';
import { LimitlessService } from './services/limitlessService';
import { getDaysInRange, getMonthDays, getDayBoundaries, formatDateInTimezone, getDayChunks } from './utils/dateUtils';

const App: React.FC = () => {
  // Config State
  // Config State
  const [config, setConfig] = useState<AppConfig>(() => {
    const saved = localStorage.getItem('limitless_config');
    if (saved) {
      try {
        return JSON.parse(saved);
      } catch (e) {
        console.error("Failed to parse saved config", e);
      }
    }
    return {
      apiKey: '',
      timezone: Intl.DateTimeFormat().resolvedOptions().timeZone
    };
  });

  // Persist config
  useEffect(() => {
    localStorage.setItem('limitless_config', JSON.stringify(config));
  }, [config]);
  const [isSettingsOpen, setIsSettingsOpen] = useState(false);

  // Selection State
  const [mode, setMode] = useState<ExtractionMode>(ExtractionMode.SINGLE_DAY);
  const [selectedDate, setSelectedDate] = useState<string>(new Date().toISOString().split('T')[0]);
  const [endDate, setEndDate] = useState<string>(new Date().toISOString().split('T')[0]);
  const [selectedMonth, setSelectedMonth] = useState<string>(new Date().toISOString().slice(0, 7));

  // Processing State
  const [isProcessing, setIsProcessing] = useState(false);
  const [progress, setProgress] = useState(0); // 0-100
  const [statusText, setStatusText] = useState('');
  const [logs, setLogs] = useState<ProcessingLog[]>([]);
  const logContainerRef = useRef<HTMLDivElement>(null);

  // Auto-scroll logs
  useEffect(() => {
    if (logContainerRef.current) {
      logContainerRef.current.scrollTop = logContainerRef.current.scrollHeight;
    }
  }, [logs]);

  const addLog = (message: string, type: ProcessingLog['type'] = 'info') => {
    setLogs(prev => [...prev, { timestamp: Date.now(), message, type }]);
  };

  const handleExtract = async () => {
    if (!config.apiKey) {
      setIsSettingsOpen(true);
      addLog("Please configure your API Key first.", "warning");
      return;
    }

    setIsProcessing(true);
    setProgress(0);
    setLogs([]);
    addLog("Initializing extraction sequence...", "info");

    const service = new LimitlessService(config.apiKey);
    // const zip = new JSZip(); // Removed to avoid memory issues
    let daysToProcess: Date[] = [];

    // 1. Determine Date Range
    try {
      if (mode === ExtractionMode.SINGLE_DAY) {
        daysToProcess = [new Date(selectedDate)];
      } else if (mode === ExtractionMode.RANGE) {
        daysToProcess = getDaysInRange(new Date(selectedDate), new Date(endDate));
      } else if (mode === ExtractionMode.MONTH) {
        const [y, m] = selectedMonth.split('-').map(Number);
        daysToProcess = getMonthDays(y, m - 1); // JS Month is 0-indexed
      }

      addLog(`Selected ${daysToProcess.length} days to process.`, "info");

      let totalRecordingsFound = 0;
      const totalDays = daysToProcess.length;

      // 2. Iterate Days
      for (let i = 0; i < totalDays; i++) {
        const day = daysToProcess[i];
        const dayStr = day.toISOString().split('T')[0];
        setStatusText(`Processing ${dayStr}...`);

        // Update progress
        setProgress(Math.floor((i / totalDays) * 100));

        const chunks = getDayChunks(day, config.timezone);
        const dayBlobs: Blob[] = [];

        // Process chunks sequentially to respect rate limits and order
        for (const chunk of chunks) {
          try {
            // Construct URL for this chunk (using Express proxy on port 3001)
            const chunkUrl = `http://localhost:3001/api/v1/download-audio?audioSource=pendant&startMs=${chunk.startMs}&endMs=${chunk.endMs}`;

            // Download
            const blob = await service.downloadAudioFile(chunkUrl);

            // Only add if it has content (size > 0)
            if (blob.size > 0) {
              dayBlobs.push(blob);
            }
          } catch (e) {
            // console.warn(`No audio for chunk ${chunk.startMs}`, e);
          }
        }

        if (dayBlobs.length > 0) {
          addLog(`Downloaded ${dayBlobs.length} parts for ${dayStr}`, "success");

          // Merge blobs into one file for the day
          const mergedBlob = new Blob(dayBlobs, { type: 'audio/ogg' });

          // Create descriptive filename: YYYY-MM-DD_DayOfWeek.ogg
          const dateObj = new Date(dayStr);
          const localDate = new Date(dayStr + 'T00:00:00');
          const dayName = localDate.toLocaleDateString('en-US', { weekday: 'long' });
          const fileName = `${dayStr}_${dayName}.ogg`;

          // SAVE TO DISK VIA PROXY
          addLog(`Saving ${fileName} to disk...`, "info");
          try {
            const saveResponse = await fetch(`http://localhost:3001/save-file?filename=${fileName}`, {
              method: 'POST',
              body: mergedBlob
            });

            if (saveResponse.ok) {
              addLog(`Saved: ${fileName}`, "success");
              totalRecordingsFound++;
            } else {
              const errText = await saveResponse.text();
              addLog(`Failed to save ${fileName}: ${errText}`, "error");
            }
          } catch (saveError: any) {
            addLog(`Save error: ${saveError.message}`, "error");
          }

          // Clear memory explicitly (though GC handles it eventually)
          dayBlobs.length = 0;
        } else {
          addLog(`No audio found for ${dayStr}`, "info");
        }
      }

      if (totalRecordingsFound === 0) {
        addLog("Extraction complete. No recordings found in range.", "warning");
      } else {
        addLog(`Extraction complete. ${totalRecordingsFound} files saved to 'downloads' folder.`, "success");
      }

      setStatusText("Complete");
      setProgress(100);

    } catch (e: any) {
      addLog(`Critical Error: ${e.message}`, "error");
    } finally {
      setIsProcessing(false);
    }
  };

  return (
    <div className="min-h-screen text-white font-sans selection:bg-purple-500/30">
      <Background />
      <SettingsModal
        isOpen={isSettingsOpen}
        onClose={() => setIsSettingsOpen(false)}
        config={config}
        onSave={setConfig}
      />

      <main className="container mx-auto px-4 py-12 max-w-5xl">
        {/* Header */}
        <header className="flex justify-between items-center mb-12">
          <div>
            <h1 className="text-4xl font-light tracking-tighter mb-2 bg-clip-text text-transparent bg-gradient-to-r from-white to-white/60">
              Limitless Aether
            </h1>
            <p className="text-white/40 font-light">Audio Archive Extractor</p>
          </div>
          <button
            onClick={() => setIsSettingsOpen(true)}
            className="glass-button w-12 h-12 rounded-full flex items-center justify-center text-white/80"
          >
            <Settings size={20} />
          </button>
        </header>

        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">

          {/* Left Column: Controls */}
          <div className="lg:col-span-7 space-y-6">

            {/* Mode Selection */}
            <div className="glass-panel p-6 rounded-2xl space-y-6">
              <div className="flex gap-2 p-1 bg-white/5 rounded-xl">
                {Object.values(ExtractionMode).map((m) => (
                  <button
                    key={m}
                    onClick={() => setMode(m)}
                    className={`flex-1 py-2 px-4 rounded-lg text-sm font-medium transition-all ${mode === m
                      ? 'bg-white text-black shadow-lg'
                      : 'text-white/40 hover:text-white/80'
                      }`}
                  >
                    {m === ExtractionMode.SINGLE_DAY && 'Single Day'}
                    {m === ExtractionMode.RANGE && 'Range'}
                    {m === ExtractionMode.MONTH && 'Whole Month'}
                  </button>
                ))}
              </div>

              {/* Date Inputs */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 animate-fade-in">
                {mode === ExtractionMode.MONTH ? (
                  <div className="space-y-2 col-span-2">
                    <label className="text-xs font-medium text-white/40 uppercase tracking-wider ml-1">Select Month</label>
                    <div className="relative">
                      <Calendar className="absolute left-4 top-1/2 -translate-y-1/2 text-white/30" size={16} />
                      <input
                        type="month"
                        value={selectedMonth}
                        onChange={(e) => setSelectedMonth(e.target.value)}
                        className="w-full pl-12 pr-4 py-4 rounded-xl glass-input appearance-none"
                      />
                    </div>
                  </div>
                ) : (
                  <>
                    <div className="space-y-2">
                      <label className="text-xs font-medium text-white/40 uppercase tracking-wider ml-1">Start Date</label>
                      <div className="relative">
                        <Calendar className="absolute left-4 top-1/2 -translate-y-1/2 text-white/30" size={16} />
                        <input
                          type="date"
                          value={selectedDate}
                          onChange={(e) => setSelectedDate(e.target.value)}
                          className="w-full pl-12 pr-4 py-4 rounded-xl glass-input appearance-none"
                        />
                      </div>
                    </div>
                    {mode === ExtractionMode.RANGE && (
                      <div className="space-y-2 animate-fade-in">
                        <label className="text-xs font-medium text-white/40 uppercase tracking-wider ml-1">End Date</label>
                        <div className="relative">
                          <Calendar className="absolute left-4 top-1/2 -translate-y-1/2 text-white/30" size={16} />
                          <input
                            type="date"
                            value={endDate}
                            onChange={(e) => setEndDate(e.target.value)}
                            className="w-full pl-12 pr-4 py-4 rounded-xl glass-input appearance-none"
                          />
                        </div>
                      </div>
                    )}
                  </>
                )}
              </div>

              {/* Action Button */}
              <button
                onClick={handleExtract}
                disabled={isProcessing}
                className="w-full glass-button group relative overflow-hidden rounded-xl py-4 mt-4 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
              >
                <div className="relative z-10 flex items-center justify-center gap-3">
                  {isProcessing ? (
                    <>
                      <Activity className="animate-spin" size={20} />
                      <span className="font-medium">Processing...</span>
                    </>
                  ) : (
                    <>
                      <Download size={20} />
                      <span className="font-medium">Extract & Download Zip</span>
                    </>
                  )}
                </div>
                {/* Progress Bar Background */}
                {isProcessing && (
                  <div
                    className="absolute inset-0 bg-white/10 transition-all duration-300 ease-out"
                    style={{ width: `${progress}%` }}
                  />
                )}
              </button>
            </div>

            {/* Quick Stats (Placeholder/Mock) */}
            <div className="grid grid-cols-2 gap-4">
              <StatsCard
                label="Configured Zone"
                value={config.timezone.split('/')[1] || config.timezone}
                icon={<Settings size={18} />}
              />
              <StatsCard
                label="Status"
                value={config.apiKey ? "Ready" : "No Token"}
                icon={config.apiKey ? <CheckCircle size={18} className="text-green-400" /> : <AlertCircle size={18} className="text-orange-400" />}
              />
            </div>

          </div>

          {/* Right Column: Logs/Output */}
          <div className="lg:col-span-5 h-[500px] flex flex-col glass-panel rounded-2xl overflow-hidden">
            <div className="p-4 border-b border-white/10 bg-white/5 flex justify-between items-center">
              <span className="text-sm font-medium text-white/70">System Logs</span>
              {statusText && <span className="text-xs text-white/40 animate-pulse">{statusText}</span>}
            </div>

            <div ref={logContainerRef} className="flex-1 overflow-y-auto p-4 space-y-3 font-mono text-sm">
              {logs.length === 0 && (
                <div className="h-full flex flex-col items-center justify-center text-white/20 gap-4">
                  <FileAudio size={48} strokeWidth={1} />
                  <p>Ready to extract</p>
                </div>
              )}

              {logs.map((log, i) => (
                <div key={i} className="flex gap-3 items-start animate-fade-in">
                  <span className="text-white/20 text-xs mt-1">
                    {new Date(log.timestamp).toLocaleTimeString([], { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' })}
                  </span>
                  <p className={`flex-1 break-words ${log.type === 'error' ? 'text-red-400' :
                    log.type === 'success' ? 'text-green-400' :
                      log.type === 'warning' ? 'text-orange-300' :
                        'text-white/70'
                    }`}>
                    {log.message}
                  </p>
                </div>
              ))}
            </div>
          </div>

        </div>
      </main>
    </div>
  );
};

export default App;