import React from 'react';

interface TaxInvoiceItem {
  date: string;
  item: string;
  spec: string;
  quantity: number;
  unit: string;
  unitPrice: number;
  supplyAmount: number;
  tax: number;
  note?: string;
}

interface TaxInvoiceData {
  invoiceNo: string;
  issueDate: string;
  // 공급자 정보
  supplier: {
    companyName: string;
    businessNo: string;
    representative: string;
    address: string;
    businessType: string;
    businessItem: string;
    phone: string;
    email: string;
  };
  // 공급받는자 정보
  recipient: {
    companyName: string;
    businessNo: string;
    representative: string;
    address: string;
    businessType: string;
    businessItem: string;
    phone: string;
    email: string;
  };
  // 품목 정보
  items: TaxInvoiceItem[];
  // 합계
  totalSupplyAmount: number;
  totalTax: number;
  totalAmount: number;
  // 기타
  note?: string;
  type: 'sales' | 'purchase'; // 매출/매입 구분
}

interface TaxInvoiceProps {
  data: TaxInvoiceData;
}

export function TaxInvoice({ data }: TaxInvoiceProps) {
  return (
    <div className="bg-white p-6 w-full mx-auto" id="tax-invoice-print">
      <style>{`
        @media print {
          @page {
            size: A4;
            margin: 10mm;
          }
          body * {
            visibility: hidden;
          }
          #tax-invoice-print, #tax-invoice-print * {
            visibility: visible;
          }
          #tax-invoice-print {
            position: absolute;
            left: 0;
            top: 0;
            width: 210mm;
            padding: 10mm;
          }
          .no-print {
            display: none !important;
          }
        }
      `}</style>

      {/* 제목 */}
      <div className="text-center mb-6 border-b-2 border-black pb-4">
        <h1 className="text-3xl font-bold mb-2">
          {data.type === 'sales' ? '세금계산서 (공급자 보관용)' : '세금계산서 (공급받는자 보관용)'}
        </h1>
        <div className="flex justify-between text-sm">
          <span>승인번호: {data.invoiceNo}</span>
          <span>작성일자: {data.issueDate}</span>
        </div>
      </div>

      {/* 공급자/공급받는자 정보 */}
      <div className="grid grid-cols-2 gap-4 mb-6">
        {/* 공급자 */}
        <div className="border-2 border-black">
          <div className="bg-gray-100 border-b-2 border-black p-2 font-bold text-center">
            공급자
          </div>
          <table className="w-full text-sm">
            <tbody>
              <tr className="border-b border-gray-300">
                <td className="p-2 bg-gray-50 font-medium w-32 border-r border-gray-300">등록번호</td>
                <td className="p-2">{data.supplier.businessNo}</td>
              </tr>
              <tr className="border-b border-gray-300">
                <td className="p-2 bg-gray-50 font-medium border-r border-gray-300">상호(법인명)</td>
                <td className="p-2 font-bold">{data.supplier.companyName}</td>
              </tr>
              <tr className="border-b border-gray-300">
                <td className="p-2 bg-gray-50 font-medium border-r border-gray-300">성명(대표자)</td>
                <td className="p-2">{data.supplier.representative}</td>
              </tr>
              <tr className="border-b border-gray-300">
                <td className="p-2 bg-gray-50 font-medium border-r border-gray-300">사업장주소</td>
                <td className="p-2">{data.supplier.address}</td>
              </tr>
              <tr className="border-b border-gray-300">
                <td className="p-2 bg-gray-50 font-medium border-r border-gray-300">업태</td>
                <td className="p-2">{data.supplier.businessType}</td>
              </tr>
              <tr className="border-b border-gray-300">
                <td className="p-2 bg-gray-50 font-medium border-r border-gray-300">종목</td>
                <td className="p-2">{data.supplier.businessItem}</td>
              </tr>
              <tr className="border-b border-gray-300">
                <td className="p-2 bg-gray-50 font-medium border-r border-gray-300">전화번호</td>
                <td className="p-2">{data.supplier.phone}</td>
              </tr>
              <tr>
                <td className="p-2 bg-gray-50 font-medium border-r border-gray-300">이메일</td>
                <td className="p-2">{data.supplier.email}</td>
              </tr>
            </tbody>
          </table>
        </div>

        {/* 공급받는자 */}
        <div className="border-2 border-black">
          <div className="bg-gray-100 border-b-2 border-black p-2 font-bold text-center">
            공급받는자
          </div>
          <table className="w-full text-sm">
            <tbody>
              <tr className="border-b border-gray-300">
                <td className="p-2 bg-gray-50 font-medium w-32 border-r border-gray-300">등록번호</td>
                <td className="p-2">{data.recipient.businessNo}</td>
              </tr>
              <tr className="border-b border-gray-300">
                <td className="p-2 bg-gray-50 font-medium border-r border-gray-300">상호(법인명)</td>
                <td className="p-2 font-bold">{data.recipient.companyName}</td>
              </tr>
              <tr className="border-b border-gray-300">
                <td className="p-2 bg-gray-50 font-medium border-r border-gray-300">성명(대표자)</td>
                <td className="p-2">{data.recipient.representative}</td>
              </tr>
              <tr className="border-b border-gray-300">
                <td className="p-2 bg-gray-50 font-medium border-r border-gray-300">사업장주소</td>
                <td className="p-2">{data.recipient.address}</td>
              </tr>
              <tr className="border-b border-gray-300">
                <td className="p-2 bg-gray-50 font-medium border-r border-gray-300">업태</td>
                <td className="p-2">{data.recipient.businessType}</td>
              </tr>
              <tr className="border-b border-gray-300">
                <td className="p-2 bg-gray-50 font-medium border-r border-gray-300">종목</td>
                <td className="p-2">{data.recipient.businessItem}</td>
              </tr>
              <tr className="border-b border-gray-300">
                <td className="p-2 bg-gray-50 font-medium border-r border-gray-300">전화번호</td>
                <td className="p-2">{data.recipient.phone}</td>
              </tr>
              <tr>
                <td className="p-2 bg-gray-50 font-medium border-r border-gray-300">이메일</td>
                <td className="p-2">{data.recipient.email}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      {/* 공급 내역 */}
      <div className="border-2 border-black mb-6">
        <table className="w-full text-sm">
          <thead>
            <tr className="bg-gray-100 border-b-2 border-black">
              <th className="p-2 border-r border-gray-300">월일</th>
              <th className="p-2 border-r border-gray-300">품목</th>
              <th className="p-2 border-r border-gray-300">규격</th>
              <th className="p-2 border-r border-gray-300">수량</th>
              <th className="p-2 border-r border-gray-300">단가</th>
              <th className="p-2 border-r border-gray-300">공급가액</th>
              <th className="p-2 border-r border-gray-300">세액</th>
              <th className="p-2">비고</th>
            </tr>
          </thead>
          <tbody>
            {data.items.map((item, index) => (
              <tr key={index} className="border-b border-gray-300">
                <td className="p-2 text-center border-r border-gray-300">{item.date}</td>
                <td className="p-2 border-r border-gray-300">{item.item}</td>
                <td className="p-2 border-r border-gray-300">{item.spec}</td>
                <td className="p-2 text-right border-r border-gray-300">
                  {item.quantity.toLocaleString()} {item.unit}
                </td>
                <td className="p-2 text-right border-r border-gray-300">
                  {item.unitPrice.toLocaleString()}
                </td>
                <td className="p-2 text-right border-r border-gray-300">
                  {item.supplyAmount.toLocaleString()}
                </td>
                <td className="p-2 text-right border-r border-gray-300">
                  {item.tax.toLocaleString()}
                </td>
                <td className="p-2 text-center">{item.note || '-'}</td>
              </tr>
            ))}
            {/* 빈 행 추가 (최소 5행 보장) */}
            {Array.from({ length: Math.max(0, 5 - data.items.length) }).map((_, index) => (
              <tr key={`empty-${index}`} className="border-b border-gray-300">
                <td className="p-2 border-r border-gray-300">&nbsp;</td>
                <td className="p-2 border-r border-gray-300">&nbsp;</td>
                <td className="p-2 border-r border-gray-300">&nbsp;</td>
                <td className="p-2 border-r border-gray-300">&nbsp;</td>
                <td className="p-2 border-r border-gray-300">&nbsp;</td>
                <td className="p-2 border-r border-gray-300">&nbsp;</td>
                <td className="p-2 border-r border-gray-300">&nbsp;</td>
                <td className="p-2">&nbsp;</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* 합계 금액 */}
      <div className="border-2 border-black mb-6">
        <table className="w-full">
          <tbody>
            <tr className="border-b border-gray-300">
              <td className="p-3 bg-gray-100 font-bold text-center w-32 border-r border-gray-300">
                공급가액
              </td>
              <td className="p-3 text-right text-xl font-bold">
                ₩ {data.totalSupplyAmount.toLocaleString()}
              </td>
            </tr>
            <tr className="border-b border-gray-300">
              <td className="p-3 bg-gray-100 font-bold text-center border-r border-gray-300">
                세액
              </td>
              <td className="p-3 text-right text-xl font-bold">
                ₩ {data.totalTax.toLocaleString()}
              </td>
            </tr>
            <tr className="bg-blue-50">
              <td className="p-3 bg-blue-100 font-bold text-center border-r border-gray-300">
                합계 금액
              </td>
              <td className="p-3 text-right text-2xl font-bold text-blue-600">
                ₩ {data.totalAmount.toLocaleString()}
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      {/* 비고 */}
      {data.note && (
        <div className="border-2 border-black mb-6">
          <div className="bg-gray-100 border-b border-black p-2 font-bold">비고</div>
          <div className="p-3">{data.note}</div>
        </div>
      )}

      {/* 하단 안내문 */}
      <div className="text-xs text-gray-500 text-center border-t pt-4">
        <p>이 세금계산서는 「부가가치세법」 제32조에 따라 발급되었습니다.</p>
        <p>본 세금계산서는 전자세금계산서 발급 시스템을 통해 발행되었습니다.</p>
      </div>
    </div>
  );
}
