'use client';

import React, { useState, useEffect, useCallback } from 'react';
import { Card, CardHeader, CardTitle, CardContent, CardDescription } from '@alga-psa/ui/components/Card';
import { Alert, AlertDescription } from '@alga-psa/ui/components/Alert';
import { Tooltip } from '@alga-psa/ui/components/Tooltip';
import { Calculator, Cloud, ArrowRight, AlertTriangle, CheckCircle, Info } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { useFormatters } from '@alga-psa/ui/lib/i18n/client';

import { getInvoiceTaxReconciliation } from '@alga-psa/billing/actions';

interface TaxReconciliationViewProps {
  invoiceId: string;
}

interface ReconciliationData {
  invoiceId: string;
  internalTax: number;
  externalTax: number;
  difference: number;
  differencePercent: number;
  hasSignificantDifference: boolean;
  lineComparisons: Array<{
    chargeId: string;
    description?: string;
    internalTax: number;
    externalTax: number;
    difference: number;
  }>;
}

export function TaxReconciliationView({ invoiceId }: TaxReconciliationViewProps) {
  const { t } = useTranslation('msp/invoicing');
  const { formatCurrency, formatNumber } = useFormatters();
  const [data, setData] = useState<ReconciliationData | null>(null);
  const [isLoading, setIsLoading] = useState(true);

  const formatPercent = (value: number) => {
    return `${value >= 0 ? '+' : ''}${formatNumber(value, {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2,
    })}%`;
  };

  const loadData = useCallback(async () => {
    setIsLoading(true);
    try {
      const result = await getInvoiceTaxReconciliation(invoiceId);
      setData(result as ReconciliationData);
    } catch (error) {
      console.error('Failed to load reconciliation data:', error);
    } finally {
      setIsLoading(false);
    }
  }, [invoiceId]);

  useEffect(() => {
    loadData();
  }, [loadData]);

  if (isLoading) {
    return (
      <Card id="tax-reconciliation-view-loading">
        <CardContent className="p-6">
          <div className="text-center text-muted-foreground">
            {t('externalTax.reconciliationView.states.loading', {
              defaultValue: 'Loading reconciliation data...',
            })}
          </div>
        </CardContent>
      </Card>
    );
  }

  if (!data) {
    return (
      <Card id="tax-reconciliation-view-no-data">
        <CardContent className="p-6">
          <div className="text-center text-muted-foreground">
            {t('externalTax.reconciliationView.states.noData', {
              defaultValue: 'No reconciliation data available.',
            })}
          </div>
        </CardContent>
      </Card>
    );
  }

  return (
    <Card id="tax-reconciliation-view">
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          {t('externalTax.reconciliationView.title', { defaultValue: 'Tax Reconciliation' })}
          {data.hasSignificantDifference ? (
            <Tooltip content={t('externalTax.reconciliationView.tooltips.significantDifference', {
              defaultValue: 'Difference exceeds 1%',
            })}>
              <AlertTriangle className="h-5 w-5 text-amber-500" />
            </Tooltip>
          ) : (
            <Tooltip content={t('externalTax.reconciliationView.tooltips.amountsMatch', {
              defaultValue: 'Tax amounts match within acceptable range',
            })}>
              <CheckCircle className="h-5 w-5 text-green-500" />
            </Tooltip>
          )}
        </CardTitle>
        <CardDescription>
          {t('externalTax.reconciliationView.description', {
            defaultValue: 'Compare internal and external tax calculations.',
          })}
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-6">
        {/* Summary Comparison */}
        <div className="grid grid-cols-3 gap-4">
          <div className="p-4 bg-success/10 rounded-lg border border-success/30">
            <div className="flex items-center gap-2 text-success mb-2">
              <Calculator className="h-4 w-4" />
              <span className="text-sm font-medium">
                {t('externalTax.reconciliationView.summary.internal', {
                  defaultValue: 'Internal (Alga PSA)',
                })}
              </span>
            </div>
            <p className="text-2xl font-bold text-success">
              {formatCurrency(data.internalTax / 100, 'USD')}
            </p>
          </div>

          <div className="flex items-center justify-center">
            <div className="flex flex-col items-center">
              <ArrowRight className="h-6 w-6 text-muted-foreground" />
              <span className={`text-sm font-medium mt-1 ${
                data.hasSignificantDifference ? 'text-warning' : 'text-success'
              }`}>
                {formatCurrency(data.difference / 100, 'USD')}
              </span>
              <span className={`text-xs ${
                data.hasSignificantDifference ? 'text-warning' : 'text-muted-foreground'
              }`}>
                ({formatPercent(data.differencePercent)})
              </span>
            </div>
          </div>

          <Alert variant="info" className="p-4">
            <Cloud className="h-4 w-4" />
            <AlertDescription>
              <span className="text-sm font-medium block mb-2">
                {t('externalTax.reconciliationView.summary.external', {
                  defaultValue: 'External (Accounting)',
                })}
              </span>
              <p className="text-2xl font-bold">
                {formatCurrency(data.externalTax / 100, 'USD')}
              </p>
            </AlertDescription>
          </Alert>
        </div>

        {/* Warning for significant differences */}
        {data.hasSignificantDifference && (
          <Alert variant="destructive" showIcon={false}>
            <AlertTriangle className="h-4 w-4" />
            <AlertDescription>
              <p className="font-medium">
                {t('externalTax.reconciliationView.alerts.significantDifferenceTitle', {
                  defaultValue: 'Significant Tax Difference Detected',
                })}
              </p>
              <p className="text-sm mt-1">
                {t('externalTax.reconciliationView.alerts.significantDifferenceDescription', {
                  defaultValue: 'The difference between internal and external tax calculations exceeds 1%. Please review the line-by-line breakdown below to identify discrepancies.',
                })}
              </p>
            </AlertDescription>
          </Alert>
        )}

        {/* Line-by-Line Comparison */}
        <div className="space-y-2">
          <h4 className="text-sm font-medium">
            {t('externalTax.reconciliationView.sections.lineByLineBreakdown', {
              defaultValue: 'Line-by-Line Breakdown',
            })}
          </h4>
          <div className="border rounded-lg overflow-hidden">
            <table className="w-full text-sm">
              <thead className="bg-muted">
                <tr>
                  <th className="px-4 py-2 text-left font-medium">
                    {t('externalTax.reconciliationView.columns.description', {
                      defaultValue: 'Description',
                    })}
                  </th>
                  <th className="px-4 py-2 text-right font-medium">
                    {t('externalTax.reconciliationView.columns.internalTax', {
                      defaultValue: 'Internal Tax',
                    })}
                  </th>
                  <th className="px-4 py-2 text-right font-medium">
                    {t('externalTax.reconciliationView.columns.externalTax', {
                      defaultValue: 'External Tax',
                    })}
                  </th>
                  <th className="px-4 py-2 text-right font-medium">
                    {t('externalTax.reconciliationView.columns.difference', {
                      defaultValue: 'Difference',
                    })}
                  </th>
                </tr>
              </thead>
              <tbody>
                {data.lineComparisons.map((line, index) => (
                  <tr
                    key={line.chargeId}
                    className={`border-t ${line.difference !== 0 ? 'bg-warning/10' : ''}`}
                  >
                    <td className="px-4 py-2">
                      {line.description || t('externalTax.reconciliationView.labels.line', {
                        index: index + 1,
                        defaultValue: `Line ${index + 1}`,
                      })}
                    </td>
                    <td className="px-4 py-2 text-right font-mono">
                      {formatCurrency(line.internalTax / 100, 'USD')}
                    </td>
                    <td className="px-4 py-2 text-right font-mono">
                      {formatCurrency(line.externalTax / 100, 'USD')}
                    </td>
                    <td className={`px-4 py-2 text-right font-mono ${
                      line.difference !== 0 ? 'text-amber-600 font-medium' : 'text-green-600'
                    }`}>
                      {line.difference >= 0 ? '+' : ''}{formatCurrency(line.difference / 100, 'USD')}
                    </td>
                  </tr>
                ))}
              </tbody>
              <tfoot className="bg-muted font-medium">
                <tr className="border-t-2">
                  <td className="px-4 py-2">
                    {t('externalTax.reconciliationView.labels.total', { defaultValue: 'Total' })}
                  </td>
                  <td className="px-4 py-2 text-right font-mono">
                    {formatCurrency(data.internalTax / 100, 'USD')}
                  </td>
                  <td className="px-4 py-2 text-right font-mono">
                    {formatCurrency(data.externalTax / 100, 'USD')}
                  </td>
                  <td className={`px-4 py-2 text-right font-mono ${
                    data.difference !== 0 ? 'text-amber-600' : 'text-green-600'
                  }`}>
                    {data.difference >= 0 ? '+' : ''}{formatCurrency(data.difference / 100, 'USD')}
                  </td>
                </tr>
              </tfoot>
            </table>
          </div>
        </div>

        {/* Help Text */}
        <div className="text-xs text-muted-foreground flex items-center gap-1 pt-4 border-t">
          <Info className="h-3 w-3" />
          <span>
            {t('externalTax.reconciliationView.helpText', {
              defaultValue: 'Differences may occur due to rounding, tax rule variations, or timing differences between systems.',
            })}
          </span>
        </div>
      </CardContent>
    </Card>
  );
}

export default TaxReconciliationView;
