import React from 'react';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';

import { UnknownRecord } from '@/types';
import { VC_COMMISSION_TYPE } from '@/constants';

interface CommissionInfoTableProps {
  commissionData: UnknownRecord;
  enquiryType: string;
}

export default function CardTable({
  commissionData,
  enquiryType,
}: CommissionInfoTableProps) {
  const formatCurrency = (value: string) => {
    const num = parseFloat(value);
    return isNaN(num)
      ? '0.00'
      : num.toLocaleString('en-US', {
          minimumFractionDigits: 2,
          maximumFractionDigits: 2,
        });
  };

  return (
    <Card className="w-full">
      <CardContent className="space-y w-full">
        <div className="space-y-4">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead className="w-[200px]">Tuition Fees</TableHead>
                <TableHead className="w-[180px]">Commission Type</TableHead>
                <TableHead className="w-[150px]">Commission %</TableHead>
                <TableHead className="w-[180px]">Commission Amt.</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              <TableRow>
                <TableCell className="font-medium">
                  <div className="flex items-center gap-1">
                    <span>
                      {formatCurrency(commissionData?.tuition_fees) || ''}
                    </span>
                    <Badge variant="secondary" className="text-xs">
                      {commissionData?.currency || 'USD'}
                    </Badge>
                  </div>
                </TableCell>

                <TableCell>
                  <div className="space-y-1">
                    <div className="font-medium">
                      {String(
                        VC_COMMISSION_TYPE.find(
                          (item) =>
                            String(item.id) ===
                            String(commissionData.our_commission_type || ''),
                        )?.name || '',
                      )}
                    </div>
                  </div>
                </TableCell>

                <TableCell className="font-medium">
                  {commissionData.our_commission_percentage
                    ? `${commissionData.our_commission_percentage}%`
                    : '-'}
                </TableCell>

                <TableCell className="font-medium">
                  <div className="flex items-center gap-1">
                    <span>
                      {formatCurrency(commissionData.our_commission_amount)}
                    </span>
                    <Badge variant="secondary" className="text-xs">
                      {commissionData.currency || 'USD'}
                    </Badge>
                  </div>
                </TableCell>
              </TableRow>
            </TableBody>
          </Table>
        </div>

        <div className="space-y-4 mt-2">
          <Table>
            <TableHeader>
              <TableRow>
                {enquiryType === '2' && (
                  <>
                    <TableHead className="w-[180px]">(MA) Comm. Type</TableHead>
                    <TableHead className="w-[150px]">(MA) Comm. %</TableHead>
                    <TableHead className="w-[180px]">(MA) Comm. Amt.</TableHead>
                  </>
                )}
              </TableRow>
            </TableHeader>
            <TableBody>
              <TableRow>
                {enquiryType === '2' && (
                  <>
                    <TableCell>
                      <div className="space-y-1">
                        <div className="font-medium">
                          {String(
                            VC_COMMISSION_TYPE.find(
                              (item) =>
                                String(item.id) ===
                                String(commissionData.ma_commission_type || ''),
                            )?.name || '',
                          )}
                        </div>
                      </div>
                    </TableCell>
                    <TableCell className="font-medium">
                      {commissionData.ma_commission_percentage
                        ? `${commissionData.ma_commission_percentage}%`
                        : '-'}
                    </TableCell>
                    <TableCell className="font-medium">
                      <div className="flex items-center gap-1">
                        <span>
                          {formatCurrency(commissionData.ma_commission_amount)}
                        </span>
                        <Badge variant="secondary" className="text-xs">
                          {commissionData.currency || 'USD'}
                        </Badge>
                      </div>
                    </TableCell>
                  </>
                )}
              </TableRow>
            </TableBody>
          </Table>
        </div>
      </CardContent>
    </Card>
  );
}