import React from "react";
import { StructuredProduct } from "@/hooks/useStructuredProductsReport";
import { formatNumber, ALL_COLUMNS, COLUMN_LABELS } from "@/lib/structured-products-utils";

interface ReportTableViewProps {
  data: StructuredProduct[];
}

export const ReportTableView: React.FC<ReportTableViewProps> = ({ data }) => {
  return (
    <div className="mt-6 rounded-lg border border-slate-200 bg-white shadow-sm overflow-hidden">
      <div className="overflow-x-auto">
        <table className="w-full text-sm">
          <thead>
            <tr className="bg-slate-50 border-b border-slate-200">
              {ALL_COLUMNS.map((col) => (
                <th
                  key={col}
                  className="px-4 py-3 text-left font-semibold text-slate-700 whitespace-nowrap"
                >
                  {COLUMN_LABELS[col] || col}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {data && data.length > 0 ? (
              data.map((product, productIdx) => {
                return (
                  <tr
                    key={productIdx}
                    className="border-b border-slate-200 hover:bg-slate-50/50"
                  >
                    <td className="px-4 py-3 text-slate-700 border-r border-slate-200 whitespace-nowrap">
                      {product.s_isin}
                    </td>
                    <td className="px-4 py-3 text-slate-700 border-r border-slate-200 whitespace-nowrap">
                      {product.s_bname}
                    </td>
                    <td className="px-4 py-3 text-slate-700 border-r border-slate-200 whitespace-nowrap">
                      {product.product_type}
                    </td>
                    <td className="px-4 py-3 text-slate-700 border-r border-slate-200 whitespace-nowrap">
                      {product.CurrencyName}
                    </td>
                    <td className="px-4 py-3 text-slate-700 border-r border-slate-200 whitespace-nowrap">
                      {product.StrikePercentage}
                    </td>
                    <td className="px-4 py-3 text-slate-700 border-r border-slate-200 whitespace-nowrap">
                      {product.NonCallPeriod}
                    </td>
                    <td className="px-4 py-3 text-slate-700 border-r border-slate-200 whitespace-nowrap">
                      {product.KOBarrier}
                    </td>
                    <td className="px-4 py-3 text-slate-700 border-r border-slate-200 whitespace-nowrap">
                      {product.Tenor}
                    </td>
                    <td className="px-4 py-3 text-slate-700 border-r border-slate-200 whitespace-nowrap">
                      {product.SettlDays}
                    </td>
                    <td className="px-4 py-3 text-slate-700 border-r border-slate-200 whitespace-nowrap">
                      {product.Coupon}
                    </td>
                    <td className="px-4 py-3 text-slate-700 border-r border-slate-200 whitespace-nowrap">
                      {product.Issuer}
                    </td>
                    <td className="px-4 py-3 text-slate-700 border-r border-slate-200 whitespace-nowrap">
                      {formatNumber(product.Notional)}
                    </td>
                    <td className="px-4 py-3 text-slate-700 border-r border-slate-200 whitespace-nowrap bg-blue-50">
                      <div className="space-y-1">
                        {product.underlying?.map((underlying, idx) => (
                          <div key={idx} className="text-xs">
                            {underlying.Industry}
                          </div>
                        ))}
                      </div>
                    </td>
                    <td className="px-4 py-3 text-slate-700 border-r border-slate-200 whitespace-nowrap bg-blue-50">
                      <div className="space-y-1">
                        {product.underlying?.map((underlying, idx) => (
                          <div key={idx} className="text-xs">
                            {underlying.Sector}
                          </div>
                        ))}
                      </div>
                    </td>
                    <td className="px-4 py-3 text-slate-700 border-r border-slate-200 whitespace-nowrap bg-blue-50">
                      <div className="space-y-1">
                        {product.underlying?.map((underlying, idx) => (
                          <div key={idx} className="text-xs">
                            {underlying.Underlying1}
                          </div>
                        ))}
                      </div>
                    </td>
                    <td className="px-4 py-3 text-slate-700 border-r border-slate-200 whitespace-nowrap bg-green-50">
                      <div className="space-y-1">
                        {product.underlying?.map((underlying, idx) => (
                          <div key={idx} className="text-xs">
                            {formatNumber(underlying.InitialLevel)}
                          </div>
                        ))}
                      </div>
                    </td>
                    <td className="px-4 py-3 text-slate-700 border-r border-slate-200 whitespace-nowrap bg-green-50">
                      <div className="space-y-1">
                        {product.underlying?.map((underlying, idx) => (
                          <div key={idx} className="text-xs">
                            {formatNumber(underlying.StrikeLevel)}
                          </div>
                        ))}
                      </div>
                    </td>
                    <td className="px-4 py-3 text-slate-700 border-r border-slate-200 whitespace-nowrap bg-green-50">
                      <div className="space-y-1">
                        {product.underlying?.map((underlying, idx) => (
                          <div key={idx} className="text-xs">
                            {underlying.KOPrice || "—"}
                          </div>
                        ))}
                      </div>
                    </td>
                    <td className="px-4 py-3 text-slate-700 border-r border-slate-200 whitespace-nowrap bg-green-50">
                      <div className="space-y-1">
                        {product.underlying?.map((underlying, idx) => (
                          <div key={idx} className="text-xs">
                            {underlying.Observationdates || "—"}
                          </div>
                        ))}
                      </div>
                    </td>
                    <td className="px-4 py-3 text-slate-700 border-r border-slate-200 whitespace-nowrap bg-green-50">
                      <div className="space-y-1">
                        {product.underlying?.map((underlying, idx) => (
                          <div key={idx} className="text-xs">
                            {formatNumber(underlying.CMP)}
                          </div>
                        ))}
                      </div>
                    </td>
                    <td className="px-4 py-3 text-slate-700 border-r border-slate-200 whitespace-nowrap bg-green-50">
                      <div className="space-y-1">
                        {product.underlying?.map((underlying, idx) => (
                          <div key={idx} className="text-xs">
                            {formatNumber(underlying.away_from_Strike)}
                          </div>
                        ))}
                      </div>
                    </td>
                    <td className="px-4 py-3 text-slate-700 border-r border-slate-200 whitespace-nowrap bg-green-50">
                      <div className="space-y-1">
                        {product.underlying?.map((underlying, idx) => (
                          <div key={idx} className="text-xs">
                            {formatNumber(underlying.away_from_Initial)}
                          </div>
                        ))}
                      </div>
                    </td>
                    <td className="px-4 py-3 text-slate-700 border-r border-slate-200 whitespace-nowrap">
                      {formatNumber(product.IndicativeAnnualCoupon)}
                    </td>
                    <td className="px-4 py-3 text-slate-700 border-r border-slate-200 whitespace-nowrap text-center">
                      {product.EarlyRedm === 1 ? "Yes" : "No"}
                    </td>
                    <td className="px-4 py-3 text-slate-700 border-r border-slate-200 whitespace-nowrap text-center">
                      {product.Delivery === 1 ? "Yes" : "No"}
                    </td>
                  </tr>
                );
              })
            ) : (
              <tr>
                <td colSpan={ALL_COLUMNS.length} className="px-4 py-8 text-center text-slate-500">
                  No data available
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
};