import { useState, useMemo } from 'react';

import { formatNumber } from '@/lib/format';

interface RoiCalculatorProps {
  title?: string;
  defaultSessions?: number;
  defaultConversionRate?: number;
  defaultDealValue?: number;
}

function RoiCalculator({
  title = 'SEO ROI Calculator',
  defaultSessions = 5000,
  defaultConversionRate = 2.5,
  defaultDealValue = 200,
}: RoiCalculatorProps) {
  const [sessions, setSessions] = useState(defaultSessions);
  const [conversionRate, setConversionRate] = useState(defaultConversionRate);
  const [dealValue, setDealValue] = useState(defaultDealValue);

  const results = useMemo(() => {
    const monthlyConversions = sessions * (conversionRate / 100);
    const monthlyRevenue = monthlyConversions * dealValue;
    const annualRevenue = monthlyRevenue * 12;
    // Rough estimate: assume SEO investment is ~10% of organic revenue as a baseline
    const estimatedInvestment = Math.max(monthlyRevenue * 0.1, 500);
    const roi =
      estimatedInvestment > 0
        ? ((monthlyRevenue - estimatedInvestment) / estimatedInvestment) * 100
        : 0;

    return {
      monthlyRevenue,
      annualRevenue,
      roi: Math.round(roi),
    };
  }, [sessions, conversionRate, dealValue]);

  const formatCurrency = (value: number) =>
    `$${value.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 0 })}`;

  return (
    <div className="my-8 rounded-xl border bg-card p-6">
      <h4 className="mb-4 text-lg font-semibold">{title}</h4>

      <div className="mb-6 grid gap-4 sm:grid-cols-3">
        <div>
          <label className="mb-1 block text-sm font-medium" htmlFor="roi-sessions">
            Monthly organic sessions
          </label>
          <input
            id="roi-sessions"
            type="range"
            min={500}
            max={100000}
            step={500}
            value={sessions}
            onChange={(e) => setSessions(Number(e.target.value))}
            className="w-full accent-primary"
          />
          <div className="mt-1 text-right text-sm font-medium text-primary">
            {formatNumber(sessions)}
          </div>
        </div>

        <div>
          <label className="mb-1 block text-sm font-medium" htmlFor="roi-conversion">
            Conversion rate (%)
          </label>
          <input
            id="roi-conversion"
            type="range"
            min={0.1}
            max={10}
            step={0.1}
            value={conversionRate}
            onChange={(e) => setConversionRate(Number(e.target.value))}
            className="w-full accent-primary"
          />
          <div className="mt-1 text-right text-sm font-medium text-primary">
            {conversionRate.toFixed(1)}%
          </div>
        </div>

        <div>
          <label className="mb-1 block text-sm font-medium" htmlFor="roi-deal">
            Avg deal value ($)
          </label>
          <input
            id="roi-deal"
            type="range"
            min={10}
            max={5000}
            step={10}
            value={dealValue}
            onChange={(e) => setDealValue(Number(e.target.value))}
            className="w-full accent-primary"
          />
          <div className="mt-1 text-right text-sm font-medium text-primary">
            {formatCurrency(dealValue)}
          </div>
        </div>
      </div>

      <div className="grid gap-4 sm:grid-cols-3">
        <div className="rounded-lg border bg-blue-50 p-4 dark:bg-blue-950/30">
          <div className="mb-1 text-xs font-medium uppercase tracking-wider text-blue-600 dark:text-blue-400">
            Monthly SEO Revenue
          </div>
          <div className="text-2xl font-bold text-blue-700 dark:text-blue-300">
            {formatCurrency(results.monthlyRevenue)}
          </div>
        </div>

        <div className="rounded-lg border bg-blue-50 p-4 dark:bg-blue-950/30">
          <div className="mb-1 text-xs font-medium uppercase tracking-wider text-blue-600 dark:text-blue-400">
            Annual SEO Revenue
          </div>
          <div className="text-2xl font-bold text-blue-700 dark:text-blue-300">
            {formatCurrency(results.annualRevenue)}
          </div>
        </div>

        <div className="rounded-lg border bg-green-50 p-4 dark:bg-green-950/30">
          <div className="mb-1 text-xs font-medium uppercase tracking-wider text-green-600 dark:text-green-400">
            Estimated ROI
          </div>
          <div className="text-2xl font-bold text-green-700 dark:text-green-300">
            {results.roi}%
          </div>
        </div>
      </div>

      <p className="mt-3 text-xs text-muted-foreground">
        Estimated ROI assumes SEO investment is ~10% of organic revenue (min $500/mo). Adjust inputs
        to model your scenario.
      </p>
    </div>
  );
}

export default RoiCalculator;