'use client';

import { useState, useCallback, useMemo } from 'react';
import TaxonomyTree from '@/components/taxonomy/TaxonomyTree';
import TaxonomySearch from '@/components/taxonomy/TaxonomySearch';
import SubcodeDetail from '@/components/taxonomy/SubcodeDetail';
import CausalCodesSection from '@/components/taxonomy/CausalCodesSection';
import MetadataSection from '@/components/taxonomy/MetadataSection';
import ProfilesSection from '@/components/taxonomy/ProfilesSection';
import { taxonomy, searchTaxonomy } from '@/lib/taxonomy/data';
import type { SelectedSubcode, TaxonomyTab } from '@/lib/taxonomy/types';

const TABS: { key: TaxonomyTab; label: string }[] = [
  { key: 'codes', label: 'Codes' },
  { key: 'causal', label: 'Causal Codes' },
  { key: 'metadata', label: 'Metadata' },
  { key: 'profiles', label: 'Profiles' },
];

export default function TaxonomyPage() {
  const [activeTab, setActiveTab] = useState<TaxonomyTab>('codes');
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedSubcode, setSelectedSubcode] = useState<SelectedSubcode | null>(null);

  // Memoize search results
  const searchResults = useMemo(() => {
    return searchTaxonomy(searchQuery);
  }, [searchQuery]);

  const totalSearchMatches = useMemo(() => {
    return (
      searchResults.domains.length +
      searchResults.categories.length +
      searchResults.subcodes.length
    );
  }, [searchResults]);

  const handleSearchChange = useCallback((value: string) => {
    setSearchQuery(value);
  }, []);

  const handleSelectSubcode = useCallback((subcode: SelectedSubcode | null) => {
    setSelectedSubcode(subcode);
  }, []);

  return (
    <div className="flex flex-col h-full bg-gray-900">
      {/* Header */}
      <header className="flex-shrink-0 border-b border-gray-700 px-6 py-4">
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-2xl font-bold text-gray-100">
              URT Taxonomy v{taxonomy.version}
            </h1>
            <p className="text-sm text-gray-400 mt-1">
              Universal Review Taxonomy Classification System
            </p>
          </div>
          <div className="flex items-center gap-4 text-sm text-gray-400">
            <span className="px-3 py-1 bg-gray-800 rounded-full">
              {taxonomy.statistics.domains} Domains
            </span>
            <span className="px-3 py-1 bg-gray-800 rounded-full">
              {taxonomy.statistics.categories} Categories
            </span>
            <span className="px-3 py-1 bg-gray-800 rounded-full">
              {taxonomy.statistics.subcodes_actual} Subcodes
            </span>
          </div>
        </div>
      </header>

      {/* Tab Navigation */}
      <nav className="flex-shrink-0 border-b border-gray-700 px-6">
        <div className="flex gap-1">
          {TABS.map((tab) => (
            <button
              key={tab.key}
              onClick={() => setActiveTab(tab.key)}
              className={`px-4 py-3 text-sm font-medium transition-colors border-b-2 -mb-px ${
                activeTab === tab.key
                  ? 'text-blue-400 border-blue-400'
                  : 'text-gray-400 border-transparent hover:text-gray-200 hover:border-gray-600'
              }`}
            >
              {tab.label}
            </button>
          ))}
        </div>
      </nav>

      {/* Content */}
      <main className="flex-1 overflow-hidden">
        {activeTab === 'codes' && (
          <div className="flex h-full">
            {/* Left Panel - Tree */}
            <div className="w-1/2 xl:w-2/5 border-r border-gray-700 flex flex-col">
              {/* Search */}
              <div className="flex-shrink-0 p-4 border-b border-gray-700">
                <TaxonomySearch
                  value={searchQuery}
                  onChange={handleSearchChange}
                  resultCount={searchQuery ? totalSearchMatches : undefined}
                />
              </div>

              {/* Tree */}
              <div className="flex-1 overflow-y-auto p-2">
                <TaxonomyTree
                  searchQuery={searchQuery}
                  searchResults={searchResults}
                  selectedSubcode={selectedSubcode}
                  onSelectSubcode={handleSelectSubcode}
                />
              </div>
            </div>

            {/* Right Panel - Detail */}
            <div className="flex-1 bg-gray-850">
              <SubcodeDetail selectedSubcode={selectedSubcode} />
            </div>
          </div>
        )}

        {activeTab === 'causal' && (
          <div className="h-full overflow-y-auto">
            <CausalCodesSection />
          </div>
        )}

        {activeTab === 'metadata' && (
          <div className="h-full overflow-y-auto">
            <MetadataSection />
          </div>
        )}

        {activeTab === 'profiles' && (
          <div className="h-full overflow-y-auto">
            <ProfilesSection />
          </div>
        )}
      </main>
    </div>
  );
}