import React from 'react';
import { useQuery } from '@tanstack/react-query';
import { partnerApi } from '../../api/partner';
import { AppLayout } from '../../components/layout/AppLayout';
import { PageLoader } from '../../components/ui/LoadingSpinner';
import { StatCard } from '../../components/ui/StatCard';
import { DollarSign, TrendingUp, Calendar } from 'lucide-react';
import type { CommissionData } from '../../types';

export function CommissionsPage() {
  const { data, isLoading } = useQuery<CommissionData>({
    queryKey: ['commissions'],
    queryFn: () => partnerApi.getCommissions(),
  });

  if (isLoading) {
    return (
      <AppLayout title="Commissions">
        <PageLoader />
      </AppLayout>
    );
  }

  const total = data?.total_commission ?? 0;
  const pending = data?.pending ?? 0;
  const paid = data?.paid ?? 0;

  return (
    <AppLayout title="Commissions">
      {/* Header */}
      <div className="mb-6">
        <h1 className="text-xl sm:text-2xl font-bold text-surface-900 truncate">Commissions</h1>
        <p className="mt-1 text-sm text-surface-500">
          Track your partner commissions and payouts
        </p>
      </div>

      {/* Summary Cards */}
      <div className="mb-8 grid grid-cols-1 gap-4 sm:grid-cols-3">
        <StatCard
          title="Total Commission"
          value={`$${total.toLocaleString(undefined, { maximumFractionDigits: 0 })}`}
          icon={DollarSign}
          iconBg="bg-brand-100 text-brand-600"
        />
        <StatCard
          title="Pending"
          value={`$${pending.toLocaleString(undefined, { maximumFractionDigits: 0 })}`}
          icon={Calendar}
          iconBg="bg-warning/10 text-warning"
        />
        <StatCard
          title="Paid"
          value={`$${paid.toLocaleString(undefined, { maximumFractionDigits: 0 })}`}
          icon={TrendingUp}
          iconBg="bg-success/10 text-success"
        />
      </div>

      {/* Payout Info */}
      <div className="mb-8 rounded-xl border border-surface-200 bg-white p-5">
        <h3 className="mb-3 text-sm font-semibold text-surface-700">Payout Schedule</h3>
        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
          <div>
            <p className="text-sm text-surface-500">Next Payout Date</p>
            <p className="text-lg font-semibold text-surface-900">
              {data?.next_payout_date ? new Date(data.next_payout_date).toLocaleDateString() : 'N/A'}
            </p>
          </div>
          <div className="sm:text-right">
            <p className="text-sm text-surface-500">Commission Rate</p>
            <p className="text-lg font-semibold text-surface-900">
              {data?.commission_rate ? `${(data.commission_rate * 100).toFixed(0)}%` : '—'}
            </p>
          </div>
        </div>
      </div>

      {/* Monthly Breakdown */}
      <div className="rounded-xl border border-surface-200 bg-white p-5">
        <h3 className="mb-3 text-sm font-semibold text-surface-700">Monthly Breakdown</h3>
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b border-surface-200">
                <th className="pb-3 text-left font-medium text-surface-500">Organization</th>
                <th className="pb-3 text-right font-medium text-surface-500">Monthly Revenue</th>
                <th className="pb-3 text-right font-medium text-surface-500">Commission</th>
                <th className="pb-3 text-right font-medium text-surface-500">Status</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-surface-100">
              {data?.monthly_breakdown?.map((item) => (
                <tr key={item.organization_id} className="hover:bg-surface-50 min-h-[44px]">
                  <td className="py-3 font-medium text-surface-900">{item.organization_name}</td>
                  <td className="py-3 text-right text-surface-600">
                    ${item.monthly_revenue.toLocaleString(undefined, { maximumFractionDigits: 0 })}
                  </td>
                  <td className="py-3 text-right font-medium text-surface-900">
                    ${item.commission_amount.toLocaleString(undefined, { maximumFractionDigits: 0 })}
                  </td>
                  <td className="py-3 text-right">
                    <span
                      className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${
                        item.status === 'paid'
                          ? 'bg-success/10 text-success'
                          : 'bg-warning/10 text-warning'
                      }`}
                    >
                      {item.status}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </AppLayout>
  );
}