import { useState } from 'react';
import { useLanguage } from '@/contexts/LanguageContext';
import { useCalculator, CalculatorInputs } from '@/hooks/useCalculator';
import { useETFComparison, ETFComparisonInputs } from '@/hooks/useETFComparison';
import { useCalculatorParams } from '@/hooks/useCalculatorParams';
import { assumptionsConfig } from '@/config/assumptions';
import CalculatorInputsPanel from '@/components/calculator/CalculatorInputsPanel';
import CalculatorResultsPanel from '@/components/calculator/CalculatorResultsPanel';
import CalculatorCharts from '@/components/calculator/CalculatorCharts';
import CalculatorEvaluation from '@/components/calculator/CalculatorEvaluation';
import ComparisonInputsPanel from '@/components/calculator/ComparisonInputsPanel';
import ComparisonResultsPanel from '@/components/calculator/ComparisonResultsPanel';
import ComparisonChart from '@/components/calculator/ComparisonChart';
import ComparisonAssumptions from '@/components/calculator/ComparisonAssumptions';
import SourcesPanel from '@/components/SourcesPanel';
import { AlertTriangle, Link as LinkIcon, Share2 } from 'lucide-react';
import { formatDateDE } from '@/lib/utils';
import { Link } from 'react-router-dom';
import { Helmet } from 'react-helmet-async';
import { toast } from 'sonner';

export default function CalculatorPage() {
  const { t } = useLanguage();

  const [inputs, setInputs] = useState<CalculatorInputs>({
    currentAge: 30,
    retirementAge: 67,
    monthlyContribution: 150,
    numChildren: 0,
    expectedReturn: assumptionsConfig.default_expected_annual_return.value,
    inflation: assumptionsConfig.default_inflation_rate.value,
    taxRateRetirement: assumptionsConfig.default_tax_rate_in_retirement.value,
    applyYoungSaverBonus: false,
    depotCostRate: assumptionsConfig.default_depot_cost_rate.value,
  });

  const [etfInputs, setEtfInputs] = useState<ETFComparisonInputs>({
    capitalGainsTaxRate: assumptionsConfig.capital_gains_tax_rate.value,
    applyPartialExemption: true,
    etfCostRate: assumptionsConfig.default_etf_cost_rate.value,
    annualDepotFee: assumptionsConfig.default_annual_depot_fee_eur.value,
  });

  const [comparisonMode, setComparisonMode] = useState(true);
  useCalculatorParams(inputs, setInputs, etfInputs, setEtfInputs, comparisonMode, setComparisonMode);
  const results = useCalculator(inputs);
  const comparison = useETFComparison(inputs, results, etfInputs);

  const handleShare = () => {
    navigator.clipboard.writeText(window.location.href);
    toast.success(t('Link kopiert!', 'Link copied!'));
  };

  return (
    <>
      <Helmet>
        <title>{t('Altersvorsorgedepot Rechner – Förderung berechnen', 'Retirement Depot Calculator – Calculate Subsidies')}</title>
        <meta name="description" content={t(
          'Berechnen Sie Ihre persönliche Förderung mit dem Altersvorsorgedepot-Rechner. Transparente Annahmen und Quellen.',
          'Calculate your personal subsidy with the retirement depot calculator. Transparent assumptions and sources.'
        )} />
        <link rel="canonical" href="https://altersvorsorgedepot-verstehen.de/rechner" />
        <meta property="og:title" content={t('Altersvorsorgedepot Rechner – Förderung berechnen', 'Retirement Depot Calculator – Calculate Subsidies')} />
        <meta property="og:description" content={t('Berechnen Sie Ihre persönliche Förderung mit dem Altersvorsorgedepot-Rechner. Transparente Annahmen und Quellen.', 'Calculate your personal subsidy with the retirement depot calculator. Transparent assumptions and sources.')} />
        <meta property="og:type" content="website" />
        <meta property="og:url" content="https://altersvorsorgedepot-verstehen.de/rechner" />
        <meta name="twitter:title" content={t('Altersvorsorgedepot Rechner – Förderung berechnen', 'Retirement Depot Calculator – Calculate Subsidies')} />
        <meta name="twitter:description" content={t('Berechnen Sie Ihre persönliche Förderung mit dem Altersvorsorgedepot-Rechner. Transparente Annahmen und Quellen.', 'Calculate your personal subsidy with the retirement depot calculator. Transparent assumptions and sources.')} />
        <script type="application/ld+json">
          {JSON.stringify({
            '@context': 'https://schema.org',
            '@type': 'WebApplication',
            name: t('Altersvorsorgedepot Förderrechner', 'Retirement Depot Subsidy Calculator'),
            applicationCategory: 'FinanceApplication',
            operatingSystem: 'Web',
            offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
          })}
        </script>
      </Helmet>

      <div className="section-container py-10">
        <h1 className="font-display text-3xl md:text-4xl font-bold mb-2">
          {t('Förderrechner', 'Subsidy Calculator')}
        </h1>
        <p className="text-muted-foreground mb-4 max-w-2xl">
          {t(
            'Berechnen Sie Ihre persönliche Förderung und potenzielle Auszahlung aus dem Altersvorsorgedepot.',
            'Calculate your personal subsidy and potential payout from the retirement savings depot.'
          )}
        </p>

        {/* Date stamp & sources link */}
        <div className="flex flex-wrap items-center gap-3 mb-4 text-sm">
          <span className="px-3 py-1.5 rounded-lg bg-muted text-muted-foreground font-medium">
            {t('Stand der Berechnungsgrundlage', 'Calculation basis as of')}: {t(formatDateDE(assumptionsConfig.lastConfigUpdate), assumptionsConfig.lastConfigUpdate)}
          </span>
          <Link to="/quellen" className="inline-flex items-center gap-1 text-primary hover:underline">
            <LinkIcon className="h-3.5 w-3.5" />
            {t('Annahmen & Quellen', 'Assumptions & Sources')}
          </Link>
        </div>
        <button
          onClick={handleShare}
          className="inline-flex items-center gap-1.5 text-sm text-primary hover:underline"
        >
          <Share2 className="h-3.5 w-3.5" />
          {t('Szenario teilen', 'Share scenario')}
        </button>

        {/* Warnings */}
        <div className="flex flex-col sm:flex-row gap-3 mb-6">
          <div className="flex items-center gap-2 text-sm px-4 py-2.5 rounded-lg bg-warning/10 text-warning-foreground">
            <AlertTriangle className="h-4 w-4 text-warning shrink-0" />
            {t('Details können sich im Gesetzgebungsverfahren ändern', 'Details may change during the legislative process')}
          </div>
          <div className="flex items-center gap-2 text-sm px-4 py-2.5 rounded-lg bg-muted text-muted-foreground">
            {t('Keine Finanzberatung', 'Not financial advice')}
          </div>
        </div>

        {/* Comparison toggle */}
        <div className="flex items-center gap-3 mb-6">
          <div className="inline-flex rounded-lg border border-border overflow-hidden text-sm">
            <button
              onClick={() => setComparisonMode(false)}
              className={`px-4 py-2 font-medium transition-colors ${!comparisonMode ? 'bg-primary text-primary-foreground' : 'bg-card text-muted-foreground hover:bg-muted'}`}
            >
              {t('Nur Altersvorsorgedepot', 'Depot Only')}
            </button>
            <button
              onClick={() => setComparisonMode(true)}
              className={`px-4 py-2 font-medium transition-colors ${comparisonMode ? 'bg-primary text-primary-foreground' : 'bg-card text-muted-foreground hover:bg-muted'}`}
            >
              {t('Vergleich mit ETF-Sparplan', 'Compare with ETF Plan')}
            </button>
          </div>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
          <div className="lg:col-span-4 space-y-6">
            <CalculatorInputsPanel inputs={inputs} setInputs={setInputs} />
            {comparisonMode && (
              <ComparisonInputsPanel etfInputs={etfInputs} setEtfInputs={setEtfInputs} />
            )}
          </div>
          <div className="lg:col-span-8 space-y-6">
            {comparisonMode ? (
              <>
                <ComparisonResultsPanel calcResults={results} comparison={comparison} />
                <ComparisonChart calcResults={results} comparison={comparison} />
                <ComparisonAssumptions calcInputs={inputs} etfInputs={etfInputs} />
              </>
            ) : (
              <>
                <CalculatorResultsPanel results={results} />
                <CalculatorCharts results={results} />
                <CalculatorEvaluation results={results} />
              </>
            )}
          </div>
        </div>

        {/* Always-visible data basis panel */}
        <div className="mt-10">
          <SourcesPanel />
        </div>
      </div>
    </>
  );
}