import { Calculator, TrendingUp, Users } from 'lucide-react';

import { useMemo, useState } from 'react';

import { Card, CardContent, CardHeader, CardTitle } from '@/Components/ui/card';
import { Label } from '@/Components/ui/label';
import { Slider } from '@/Components/ui/slider';
import { formatCurrency } from '@/lib/format';

interface EnterpriseRoiCalculatorProps {
  pricePerSeat: number;
  annualPricePerSeat?: number;
}

const HOURS_SAVED_PER_SITE = 4;
const HOURLY_SEO_RATE = 75;

export function EnterpriseRoiCalculator({
  pricePerSeat,
  annualPricePerSeat,
}: EnterpriseRoiCalculatorProps) {
  const [siteCount, setSiteCount] = useState(10);
  const [teamSize, setTeamSize] = useState(5);

  const roi = useMemo(() => {
    const monthlyHoursSaved = siteCount * HOURS_SAVED_PER_SITE;
    const monthlyValueSaved = monthlyHoursSaved * HOURLY_SEO_RATE;
    const monthlyCost = teamSize * pricePerSeat;
    const annualMonthlyCost = annualPricePerSeat ? (teamSize * annualPricePerSeat) / 12 : null;
    const effectiveCost = annualMonthlyCost ?? monthlyCost;
    const roiMultiplier = effectiveCost > 0 ? monthlyValueSaved / effectiveCost : 0;
    const costPerSite = teamSize > 0 ? effectiveCost / siteCount : 0;
    const annualSavings = annualPricePerSeat != null ? (monthlyCost - effectiveCost) * 12 : 0;

    return {
      monthlyHoursSaved,
      monthlyValueSaved,
      monthlyCost,
      effectiveCost,
      roiMultiplier,
      costPerSite,
      annualSavings,
    };
  }, [siteCount, teamSize, pricePerSeat, annualPricePerSeat]);

  return (
    <Card className="border-primary/20">
      <CardHeader className="pb-4">
        <CardTitle className="flex items-center gap-2 text-lg">
          <Calculator className="h-5 w-5 text-primary" />
          ROI Calculator
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-6">
        <div className="space-y-4">
          <div className="space-y-2">
            <div className="flex items-center justify-between">
              <Label className="text-sm">Sites managed</Label>
              <span className="text-sm font-semibold tabular-nums">{siteCount}</span>
            </div>
            <Slider
              value={[siteCount]}
              onValueChange={([v]) => setSiteCount(v)}
              min={5}
              max={100}
              step={5}
            />
          </div>

          <div className="space-y-2">
            <div className="flex items-center justify-between">
              <Label className="text-sm">Team size</Label>
              <span className="text-sm font-semibold tabular-nums">{teamSize}</span>
            </div>
            <Slider
              value={[teamSize]}
              onValueChange={([v]) => setTeamSize(v)}
              min={5}
              max={50}
              step={1}
            />
          </div>
        </div>

        <div className="grid grid-cols-2 gap-3">
          <div className="rounded-lg bg-accent/50 p-3">
            <p className="text-xs text-muted-foreground">Hours saved / month</p>
            <p className="text-lg font-bold">{roi.monthlyHoursSaved}h</p>
          </div>
          <div className="rounded-lg bg-accent/50 p-3">
            <p className="text-xs text-muted-foreground">Value saved / month</p>
            <p className="text-lg font-bold">{formatCurrency(roi.monthlyValueSaved)}</p>
          </div>
          <div className="rounded-lg bg-accent/50 p-3">
            <p className="text-xs text-muted-foreground">Cost per site</p>
            <p className="text-lg font-bold">{formatCurrency(roi.costPerSite)}/mo</p>
          </div>
          <div className="rounded-lg bg-primary/10 p-3">
            <div className="flex items-center gap-1">
              <TrendingUp className="h-3.5 w-3.5 text-primary" />
              <p className="text-xs text-primary font-medium">ROI</p>
            </div>
            <p className="text-lg font-bold text-primary">{roi.roiMultiplier.toFixed(1)}x</p>
          </div>
        </div>

        {roi.annualSavings > 0 && (
          <p className="text-xs text-muted-foreground text-center">
            Save {formatCurrency(roi.annualSavings)}/year with annual billing
          </p>
        )}

        <div className="flex items-center gap-2 pt-2 border-t text-xs text-muted-foreground">
          <Users className="h-3.5 w-3.5" />
          <span>
            Based on {HOURS_SAVED_PER_SITE}h/site/month manual SEO time at ${HOURLY_SEO_RATE}/h
          </span>
        </div>
      </CardContent>
    </Card>
  );
}