import React, { useState } from 'react';
import { Files, MapPinned } from 'lucide-react';
import type { AppUser } from '../../shared/types';
import { BasicResultsView } from './BasicResultsView';
import { DeepResearchResultsView } from './DeepResearchResultsView';

type ResultsTab = 'basic' | 'deepResearch';

interface ResultsWorkspaceProps {
  user: AppUser;
  selectedJobIds: string[];
  onToggleJobSelection: (jobId: string) => void;
  onShowSelectedOnMap: () => void;
  onClearSelection: () => void;
  onShowBatchOnMap: (jobIds: string[]) => void;
}

export function ResultsWorkspace({ user, selectedJobIds, onToggleJobSelection, onShowSelectedOnMap, onClearSelection, onShowBatchOnMap }: ResultsWorkspaceProps) {
  const [activeTab, setActiveTab] = useState<ResultsTab>('basic');

  return (
    <div className="flex-1 overflow-y-auto bg-stone-50 p-6 sm:p-8">
      <div className="mx-auto max-w-7xl space-y-8">
        <div className="sticky top-0 z-20 -mx-2 bg-stone-50/95 px-2 pb-2 pt-1 backdrop-blur-sm">
          <div className="rounded-3xl border border-stone-200 bg-white p-2 shadow-sm">
            <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
              {[
                { id: 'basic' as const, label: 'Basic', icon: Files },
                { id: 'deepResearch' as const, label: 'Deep Research', icon: MapPinned },
              ].map((tab) => (
                <button
                  key={tab.id}
                  type="button"
                  onClick={() => setActiveTab(tab.id)}
                  className={`flex items-center justify-center gap-2 rounded-2xl px-4 py-3 text-sm font-semibold transition-all ${
                    activeTab === tab.id ? 'bg-emerald-50 text-emerald-700 shadow-sm' : 'text-stone-600 hover:bg-stone-50 hover:text-stone-900'
                  }`}
                >
                  <tab.icon className="h-4 w-4" />
                  {tab.label}
                </button>
              ))}
            </div>
          </div>
        </div>

        <header className="space-y-2">
          <h1 className="text-3xl font-bold text-stone-900">Results</h1>
          <p className="max-w-3xl text-stone-600">Browse previous Basic and Deep Research runs, select items, and send them to the map when needed.</p>
        </header>

        {activeTab === 'basic' ? (
          <BasicResultsView
            user={user}
            selectedJobIds={selectedJobIds}
            onToggleJobSelection={onToggleJobSelection}
            onShowSelectedOnMap={onShowSelectedOnMap}
            onClearSelection={onClearSelection}
          />
        ) : (
          <DeepResearchResultsView onShowBatchOnMap={onShowBatchOnMap} />
        )}
      </div>
    </div>
  );
}