'use client';

import { useCommissionSummary } from '@/hooks/commission/useCommissionSummary';
import { useCommissionHistory } from '@/hooks/commission/useCommissionHistory';
import { CommissionSummaryCards } from './CommissionSummaryCards';
import { CommissionHistoryTable } from './CommissionHistoryTable';
import { useRouter } from 'next/navigation';

export const CommissionDashboard = () => {
  const { summary, isLoading: summaryLoading, error: summaryError } = useCommissionSummary();
  const { commissions, isLoading: historyLoading, error: historyError } = useCommissionHistory();
  const router = useRouter();

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">Commission Dashboard</h1>
          <p className="mt-1 text-sm text-gray-500">
            View your commission earnings and history
          </p>
        </div>
        <button
          onClick={() => router.push('/commission/history')}
          className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
        >
          View Full History
        </button>
      </div>

      {/* Summary Cards */}
      <CommissionSummaryCards
        summary={summary}
        isLoading={summaryLoading}
        error={summaryError}
      />

      {/* Recent Commissions */}
      <div className="bg-white rounded-lg shadow">
        <div className="px-6 py-4 border-b border-gray-200">
          <h2 className="text-lg font-semibold text-gray-900">Recent Commissions</h2>
        </div>
        <div className="p-6">
          <CommissionHistoryTable
            commissions={commissions.slice(0, 10)}
            isLoading={historyLoading}
            error={historyError}
          />
        </div>
      </div>
    </div>
  );
};