import React from 'react'
import { CheckCircle2, AlertCircle, AlertTriangle } from 'lucide-react'
import type { VATSummary, VATValidationResult } from '../api/types'

interface VATSummaryCardProps {
  vatSummary: VATSummary
  vatValidation?: VATValidationResult | null
}

export const VATSummaryCard: React.FC<VATSummaryCardProps> = ({
  vatSummary,
  vatValidation,
}) => {
  const hasBreakdowns = vatSummary.breakdowns && vatSummary.breakdowns.length > 0

  return (
    <div className="space-y-4">
      {/* VAT Breakdowns by Rate */}
      {hasBreakdowns && (
        <div className="space-y-2">
          <h4 className="text-sm font-semibold text-warm-text-muted uppercase tracking-wide">
            VAT Breakdown
          </h4>
          <div className="space-y-2">
            {vatSummary.breakdowns.map((breakdown, index) => (
              <div
                key={index}
                className="p-3 bg-warm-bg/70 rounded-lg border border-warm-divider"
              >
                <div className="flex justify-between items-center">
                  <span className="text-sm font-bold text-warm-text-secondary">
                    {breakdown.rate}% Moms
                  </span>
                  <span className="text-xs text-warm-text-muted px-2 py-0.5 bg-warm-selected rounded">
                    {breakdown.source}
                  </span>
                </div>
                <div className="mt-2 grid grid-cols-2 gap-4 text-sm">
                  <div>
                    <span className="text-warm-text-muted">Base: </span>
                    <span className="font-mono text-warm-text-primary">
                      {breakdown.base_amount ?? 'N/A'}
                    </span>
                  </div>
                  <div>
                    <span className="text-warm-text-muted">VAT: </span>
                    <span className="font-mono font-bold text-warm-text-primary">
                      {breakdown.vat_amount ?? 'N/A'}
                    </span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Totals */}
      <div className="pt-4 border-t border-warm-divider space-y-2">
        {vatSummary.total_excl_vat && (
          <div className="flex justify-between text-sm">
            <span className="text-warm-text-muted">Excl. VAT:</span>
            <span className="font-mono text-warm-text-primary">
              {vatSummary.total_excl_vat}
            </span>
          </div>
        )}
        {vatSummary.total_vat && (
          <div className="flex justify-between text-sm">
            <span className="text-warm-text-muted">Total VAT:</span>
            <span className="font-mono font-bold text-warm-text-secondary">
              {vatSummary.total_vat}
            </span>
          </div>
        )}
        {vatSummary.total_incl_vat && (
          <div className="flex justify-between text-sm pt-2 border-t border-warm-divider">
            <span className="font-semibold text-warm-text-primary">Incl. VAT:</span>
            <span className="font-mono font-bold text-warm-text-primary text-base">
              {vatSummary.total_incl_vat}
            </span>
          </div>
        )}
      </div>

      {/* Confidence */}
      <div className="flex items-center gap-2 text-xs">
        <CheckCircle2 size={14} className="text-warm-text-secondary" />
        <span className="text-warm-text-muted">
          Confidence: {(vatSummary.confidence * 100).toFixed(1)}%
        </span>
      </div>

      {/* Validation Results */}
      {vatValidation && (
        <div className="pt-4 border-t border-warm-divider">
          <h4 className="text-sm font-semibold text-warm-text-muted uppercase tracking-wide mb-3">
            VAT Validation
          </h4>

          <div
            className={`
              p-3 rounded-lg mb-3 flex items-center gap-3
              ${
                vatValidation.is_valid
                  ? 'bg-green-50 border border-green-200'
                  : vatValidation.needs_review
                  ? 'bg-yellow-50 border border-yellow-200'
                  : 'bg-red-50 border border-red-200'
              }
            `}
          >
            {vatValidation.is_valid ? (
              <>
                <CheckCircle2 size={20} className="text-green-600 flex-shrink-0" />
                <span className="font-bold text-green-800 text-sm">
                  VAT Calculation Valid
                </span>
              </>
            ) : vatValidation.needs_review ? (
              <>
                <AlertTriangle size={20} className="text-yellow-600 flex-shrink-0" />
                <span className="font-bold text-yellow-800 text-sm">
                  Needs Manual Review
                </span>
              </>
            ) : (
              <>
                <AlertCircle size={20} className="text-red-600 flex-shrink-0" />
                <span className="font-bold text-red-800 text-sm">
                  Validation Failed
                </span>
              </>
            )}
          </div>

          {/* Math Checks */}
          {vatValidation.math_checks && vatValidation.math_checks.length > 0 && (
            <div className="space-y-2 mb-3">
              {vatValidation.math_checks.map((check, index) => (
                <div
                  key={index}
                  className={`
                    p-2 rounded text-xs flex items-center justify-between
                    ${
                      check.is_valid
                        ? 'bg-green-50 border border-green-200'
                        : 'bg-red-50 border border-red-200'
                    }
                  `}
                >
                  <span className={check.is_valid ? 'text-green-700' : 'text-red-700'}>
                    {check.rate}%: {check.base_amount?.toFixed(2) ?? 'N/A'} x {check.rate}% ={' '}
                    {check.expected_vat?.toFixed(2) ?? 'N/A'}
                  </span>
                  {check.is_valid ? (
                    <CheckCircle2 size={14} className="text-green-600" />
                  ) : (
                    <AlertCircle size={14} className="text-red-600" />
                  )}
                </div>
              ))}
            </div>
          )}

          {/* Review Reasons */}
          {vatValidation.review_reasons && vatValidation.review_reasons.length > 0 && (
            <div className="space-y-1">
              {vatValidation.review_reasons.map((reason, index) => (
                <div
                  key={index}
                  className="text-xs text-yellow-700 bg-yellow-50 p-2 rounded border border-yellow-200"
                >
                  {reason}
                </div>
              ))}
            </div>
          )}

          {/* Confidence Score */}
          <div className="mt-3 text-xs text-warm-text-muted">
            Validation confidence: {(vatValidation.confidence_score * 100).toFixed(1)}%
          </div>
        </div>
      )}
    </div>
  )
}
