'use client';

import { Candidate } from '@/lib/db/candidate';
import { useState } from 'react';
import { CandidateFinancialTab } from './CandidateFinancialTab';
import { CandidateHeader } from './CandidateHeader';
import { CandidateHistoryTab } from './CandidateHistoryTab';
import { CandidateManifestoTab } from './CandidateManifestoTab';
import { CandidatePersonalTab } from './CandidatePersonalTab';
import { CandidatePoliciesTab } from './CandidatePoliciesTab';
import { CandidateSummaryTab } from './CandidateSummaryTab';
import { CandidateTabNavigation, TabId } from './CandidateTabNavigation';
import { CandidateVotingRecordTab } from './CandidateVotingRecordTab';

interface CandidateDetailClientProps {
  candidate: Candidate;
}

export function CandidateDetailClient({ candidate }: CandidateDetailClientProps) {
  const [activeTab, setActiveTab] = useState<TabId>('summary');

  const tabs: { id: TabId; label: string }[] = [
    { id: 'summary', label: 'সারাংশ' },
    { id: 'manifesto', label: 'নির্বাচনী ইশতেহার' },
    { id: 'personal', label: 'ব্যক্তিগত জীবন' },
    { id: 'voting-record', label: 'ভোটের রেকর্ড' },
    { id: 'policies', label: 'নীতির অবস্থান' },
    { id: 'financial', label: 'আর্থিক তথ্য' },
    { id: 'history', label: 'নির্বাচনের ইতিহাস' },
  ];

  return (
    <main className="max-w-7xl mx-auto px-3 sm:px-4 lg:px-8 py-4 md:py-10">
      <div className="w-full">
        {/* Candidate Header Card */}
        <CandidateHeader candidate={candidate} />

        {/* Tab Navigation */}
        <CandidateTabNavigation activeTab={activeTab} onTabChange={setActiveTab} tabs={tabs} />

        {/* Tab Content */}
        {activeTab === 'summary' && <CandidateSummaryTab candidate={candidate} />}
        {activeTab === 'manifesto' && <CandidateManifestoTab candidate={candidate} />}
        {activeTab === 'personal' && <CandidatePersonalTab candidate={candidate} />}
        {activeTab === 'financial' && <CandidateFinancialTab candidate={candidate} />}
        {activeTab === 'history' && <CandidateHistoryTab candidate={candidate} />}
        {activeTab === 'voting-record' && <CandidateVotingRecordTab candidate={candidate} />}
        {activeTab === 'policies' && <CandidatePoliciesTab candidate={candidate} />}
      </div>
    </main>
  );
}