import { useState } from 'react';

import { Card, CardContent } from '@/Components/ui/card';
import { Slider } from '@/Components/ui/slider';
import { COMPETITOR_PRICES } from '@/config/competitor-pricing';

interface CostComparison {
  name: string;
  monthlyCost: number;
  isRankWiz?: boolean;
}

export interface CostCalculatorProps {
  bundledDrafts: number;
  proPriceMonthly: number;
}

export function CostCalculator({ bundledDrafts, proPriceMonthly }: CostCalculatorProps) {
  const [draftVolume, setDraftVolume] = useState<number>(bundledDrafts);

  const rankwizPlatform = proPriceMonthly;
  const bundledIncluded = bundledDrafts;
  const openAiCostPerDraft = 0.05;
  const extraDrafts = Math.max(0, draftVolume - bundledIncluded);
  const rankwizTotal = rankwizPlatform + extraDrafts * openAiCostPerDraft;

  const competitors: CostComparison[] = [
    { name: 'RankWiz Pro', monthlyCost: rankwizTotal, isRankWiz: true },
    ...COMPETITOR_PRICES.map((c) => ({
      name: `${c.name} ${c.planName}`,
      monthlyCost: c.monthlyCost,
    })),
  ];

  const maxCost = Math.max(...competitors.map((c) => c.monthlyCost));

  return (
    <Card>
      <CardContent className="p-8">
        <h3 className="mb-2 text-lg font-semibold">AI Cost Calculator</h3>
        <p className="mb-6 text-sm text-muted-foreground">
          Pro includes {bundledDrafts} AI drafts/month. Need more? Add your own OpenAI key for
          unlimited at cost — no markup. Drag to compare at your draft volume.
        </p>

        <div className="mb-6 space-y-3">
          <div className="flex items-center justify-between">
            <label className="text-sm font-medium" htmlFor="draft-volume-slider">
              Monthly AI drafts
            </label>
            <span className="text-sm font-semibold text-primary">{draftVolume} drafts/mo</span>
          </div>
          <Slider
            id="draft-volume-slider"
            min={10}
            max={200}
            step={5}
            value={[draftVolume]}
            onValueChange={(val) => setDraftVolume(val[0] ?? draftVolume)}
            className="w-full"
          />
          <div className="flex justify-between text-xs text-muted-foreground">
            <span>10</span>
            <span>200</span>
          </div>
        </div>

        <div className="space-y-3">
          {competitors.map((competitor) => {
            const barWidth = maxCost > 0 ? (competitor.monthlyCost / maxCost) * 100 : 0;
            const savings = competitor.isRankWiz ? null : competitor.monthlyCost - rankwizTotal;
            return (
              <div key={competitor.name} className="space-y-1">
                <div className="flex items-center justify-between text-sm">
                  <span
                    className={
                      competitor.isRankWiz ? 'font-semibold text-primary' : 'text-muted-foreground'
                    }
                  >
                    {competitor.name}
                    {competitor.isRankWiz && (
                      <span className="ml-2 text-xs font-normal text-muted-foreground">
                        (${rankwizPlatform} +{' '}
                        {extraDrafts > 0
                          ? `$${(extraDrafts * openAiCostPerDraft).toFixed(2)} BYOK`
                          : `${bundledIncluded} drafts included`}
                        )
                      </span>
                    )}
                  </span>
                  <span
                    className={
                      competitor.isRankWiz ? 'font-semibold text-primary' : 'text-muted-foreground'
                    }
                  >
                    ${competitor.monthlyCost.toFixed(2)}/mo
                    {savings !== null && savings > 0 && (
                      <span className="ml-2 text-xs text-green-600 dark:text-green-400">
                        Save ${savings.toFixed(2)}/mo
                      </span>
                    )}
                  </span>
                </div>
                <div className="h-2 w-full overflow-hidden rounded-full bg-muted">
                  <div
                    className={`h-full rounded-full transition-all duration-300 ${
                      competitor.isRankWiz ? 'bg-primary' : 'bg-muted-foreground/30'
                    }`}
                    style={{ width: `${barWidth}%` }}
                  />
                </div>
              </div>
            );
          })}
        </div>

        <p className="mt-4 text-xs text-muted-foreground">
          * BYOK cost estimated at $0.05/draft (GPT-4o-mini) — only applies when over the{' '}
          {bundledIncluded} included drafts. Competitor prices as of 2026.
        </p>
      </CardContent>
    </Card>
  );
}