import React from 'react';
import { Check } from 'lucide-react';
import { useIsUpgradeModalOpen, useSetIsUpgradeModalOpen } from '../../contexts/UIContext';
import { Button, ModalShell, StatusBadge } from '../ui';
import { cn } from '../../utils/classNames';
import { buyCredits, startCheckout } from '../../featureStubs';
import { CREDIT_PACKS } from '../../hooks/usePlanUsage';

interface PlanCardProps {
  name: string;
  price: string;
  period?: string;
  features: string[];
  highlighted?: boolean;
  cta: React.ReactNode;
}

const PlanCard: React.FC<PlanCardProps> = ({ name, price, period, features, highlighted, cta }) => (
  <div
    className={cn(
      'flex flex-col rounded-xl border p-5',
      highlighted ? 'border-brand bg-brand-subtle/40' : 'border-app-border bg-app-surface',
    )}
  >
    <div className="flex items-center justify-between">
      <h3 className="text-sm font-semibold text-app-text">{name}</h3>
      {highlighted && <StatusBadge tone="brand">Recommended</StatusBadge>}
    </div>
    <div className="mt-2 flex items-baseline gap-1">
      <span className="text-2xl font-semibold text-app-text">{price}</span>
      {period && <span className="text-sm text-app-muted">{period}</span>}
    </div>
    <ul className="mt-4 flex-1 space-y-2">
      {features.map((feature) => (
        <li key={feature} className="flex items-start gap-2 text-sm text-app-muted">
          <Check size={16} className="mt-0.5 shrink-0 text-brand-text" />
          {feature}
        </li>
      ))}
    </ul>
    <div className="mt-5">{cta}</div>
  </div>
);

const UpgradeModal: React.FC = () => {
  const open = useIsUpgradeModalOpen();
  const setOpen = useSetIsUpgradeModalOpen();

  return (
    <ModalShell open={open} title="Upgrade your plan" maxWidthClass="max-w-2xl" onClose={() => setOpen(false)}>
      <div className="grid gap-4 sm:grid-cols-2">
        <PlanCard
          name="Free"
          price="$0"
          features={['50 messages / month', 'Core WordPress assistance', 'Community support']}
          cta={<Button className="w-full" disabled>Current plan</Button>}
        />
        <PlanCard
          name="Pro"
          price="$20"
          period="/ month"
          highlighted
          features={['Unlimited messages', 'Image uploads', 'Priority responses', 'Email support']}
          cta={(
            <Button variant="primary" className="w-full" onClick={() => startCheckout('pro')}>
              Upgrade to Pro
            </Button>
          )}
        />
      </div>

      <div className="mt-6">
        <h3 className="text-sm font-semibold text-app-text">Add usage credits</h3>
        <p className="mt-0.5 text-xs text-app-muted">One-time credits for usage beyond your plan.</p>
        <div className="mt-3 grid gap-2 sm:grid-cols-3">
          {CREDIT_PACKS.map((pack) => (
            <div key={pack.id} className="flex items-center justify-between gap-2 rounded-lg border border-app-border p-3 sm:flex-col sm:items-stretch sm:text-center">
              <div>
                <p className="text-sm font-semibold text-app-text">{pack.credits.toLocaleString()}</p>
                <p className="text-xs text-app-muted">credits · {pack.price}</p>
              </div>
              <Button size="sm" className="sm:w-full" onClick={() => buyCredits(pack.id)}>Buy</Button>
            </div>
          ))}
        </div>
      </div>

      <p className="mt-5 text-center text-xs text-app-muted">
        Payments aren’t live yet — checkout will be enabled soon.
      </p>
    </ModalShell>
  );
};

export default UpgradeModal;