import { useState } from 'react';
import { SessionList } from '../components/history/SessionList';
import { ExerciseChart } from '../components/history/ExerciseChart';
import { getActiveUserId } from '../stores/userStore';

type Tab = 'history' | 'stats';

async function downloadExport() {
  const uid = getActiveUserId();
  const headers: Record<string, string> = {};
  if (uid) headers['X-User-ID'] = uid;

  const res = await fetch('/api/v1/export', { headers });
  if (!res.ok) return;

  const blob = await res.blob();
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = `training-export-${new Date().toISOString().slice(0, 10)}.csv`;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

export function HistoryPage() {
  const [activeTab, setActiveTab] = useState<Tab>('history');

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold text-gray-100">Historie</h1>
        <button
          onClick={downloadExport}
          className="flex items-center gap-2 px-3 py-2 rounded-lg bg-gray-800 text-gray-300 hover:text-white hover:bg-gray-700 text-sm min-h-[44px] transition-colors"
          title="Trainingsdaten als CSV exportieren"
        >
          <svg xmlns="http://www.w3.org/2000/svg" className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <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>
          Export CSV
        </button>
      </div>

      {/* Tab Toggle */}
      <div className="flex bg-gray-900 rounded-lg p-1">
        <button
          onClick={() => setActiveTab('history')}
          className={`flex-1 py-2 rounded-md text-sm font-medium min-h-[44px] transition-colors ${
            activeTab === 'history'
              ? 'bg-blue-600 text-white'
              : 'text-gray-400 hover:text-gray-200'
          }`}
        >
          Trainings
        </button>
        <button
          onClick={() => setActiveTab('stats')}
          className={`flex-1 py-2 rounded-md text-sm font-medium min-h-[44px] transition-colors ${
            activeTab === 'stats'
              ? 'bg-blue-600 text-white'
              : 'text-gray-400 hover:text-gray-200'
          }`}
        >
          Statistiken
        </button>
      </div>

      {activeTab === 'history' ? <SessionList /> : <ExerciseChart />}
    </div>
  );
}