'use client';

import { useStripeConfig } from '@/lib/stripe-context';
import {
  FlaskConical,
  ShieldCheck,
  CreditCard,
  Webhook,
  Server,
  CheckCircle2,
  XCircle,
  ExternalLink,
} from 'lucide-react';

function StatusBadge({ ok, label }: { ok: boolean; label: string }) {
  return (
    <div className="flex items-center gap-2">
      {ok ? (
        <CheckCircle2 className="h-4 w-4 text-emerald-500" />
      ) : (
        <XCircle className="h-4 w-4 text-red-500" />
      )}
      <span className={ok ? 'text-foreground' : 'text-muted-foreground'}>{label}</span>
    </div>
  );
}

export default function BillingSettingsPage() {
  const { mode, configured, isLive, priceIds, webhookConfigured, billingServiceUrl, loading } =
    useStripeConfig();

  if (loading) {
    return (
      <div className="space-y-6">
        <h1 className="text-2xl font-bold">Billing Configuration</h1>
        <div className="text-muted-foreground">Loading Stripe configuration...</div>
      </div>
    );
  }

  return (
    <div className="space-y-8">
      <div>
        <h1 className="text-2xl font-bold">Billing Configuration</h1>
        <p className="text-muted-foreground mt-1">
          Stripe account settings, product IDs, and service status.
        </p>
      </div>

      {/* Mode Banner */}
      <div
        className={`rounded-lg border p-4 flex items-center gap-3 ${
          isLive
            ? 'bg-emerald-50 border-emerald-200 dark:bg-emerald-950/30 dark:border-emerald-800'
            : mode === 'test'
              ? 'bg-amber-50 border-amber-200 dark:bg-amber-950/30 dark:border-amber-800'
              : 'bg-red-50 border-red-200 dark:bg-red-950/30 dark:border-red-800'
        }`}
      >
        {isLive ? (
          <ShieldCheck className="h-6 w-6 text-emerald-600" />
        ) : (
          <FlaskConical className="h-6 w-6 text-amber-600" />
        )}
        <div>
          <div className="font-semibold text-sm">
            {isLive ? 'LIVE MODE' : mode === 'test' ? 'TEST MODE' : 'NOT CONFIGURED'}
          </div>
          <div className="text-xs text-muted-foreground">
            {isLive
              ? 'Real payments are being processed. Changes affect real customers.'
              : mode === 'test'
                ? 'Using Stripe test keys. No real charges. Use card 4242 4242 4242 4242.'
                : 'Stripe is not configured. Set STRIPE_SECRET_KEY in env.'}
          </div>
        </div>
      </div>

      {/* Configuration Status */}
      <div className="rounded-lg border p-6 space-y-4">
        <h2 className="text-lg font-semibold flex items-center gap-2">
          <CreditCard className="h-5 w-5" />
          Configuration Status
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
          <StatusBadge ok={configured} label="Stripe API key configured" />
          <StatusBadge ok={webhookConfigured} label="Webhook secret configured" />
          <StatusBadge
            ok={!!priceIds.pro && !priceIds.pro.includes('placeholder')}
            label="Pro price ID set"
          />
          <StatusBadge
            ok={!!priceIds.enterprise && !priceIds.enterprise.includes('placeholder')}
            label="Enterprise price ID set"
          />
        </div>
      </div>

      {/* Product IDs */}
      <div className="rounded-lg border p-6 space-y-4">
        <h2 className="text-lg font-semibold flex items-center gap-2">
          <CreditCard className="h-5 w-5" />
          Stripe Products
        </h2>
        <div className="space-y-3">
          <div className="flex items-center justify-between py-2 border-b">
            <div>
              <div className="font-medium">Pro Plan</div>
              <div className="text-sm text-muted-foreground">$9.99/month</div>
            </div>
            <code className="text-xs bg-muted px-2 py-1 rounded font-mono">
              {priceIds.pro || 'Not configured'}
            </code>
          </div>
          <div className="flex items-center justify-between py-2 border-b">
            <div>
              <div className="font-medium">Enterprise Plan</div>
              <div className="text-sm text-muted-foreground">$29.99/month</div>
            </div>
            <code className="text-xs bg-muted px-2 py-1 rounded font-mono">
              {priceIds.enterprise || 'Not configured'}
            </code>
          </div>
        </div>
      </div>

      {/* Services */}
      <div className="rounded-lg border p-6 space-y-4">
        <h2 className="text-lg font-semibold flex items-center gap-2">
          <Server className="h-5 w-5" />
          Services
        </h2>
        <div className="space-y-3">
          <div className="flex items-center justify-between py-2 border-b">
            <div>
              <div className="font-medium">Billing Service</div>
              <div className="text-sm text-muted-foreground">
                Subscriptions, usage metering, plan config
              </div>
            </div>
            <code className="text-xs bg-muted px-2 py-1 rounded font-mono">
              {billingServiceUrl}
            </code>
          </div>
          <div className="flex items-center justify-between py-2 border-b">
            <div>
              <div className="font-medium flex items-center gap-2">
                Webhook Endpoint
                <Webhook className="h-3.5 w-3.5 text-muted-foreground" />
              </div>
              <div className="text-sm text-muted-foreground">
                Receives Stripe events (checkout, subscription changes)
              </div>
            </div>
            <span
              className={`text-xs font-medium px-2 py-1 rounded ${
                webhookConfigured
                  ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-400'
                  : 'bg-red-100 text-red-700 dark:bg-red-950 dark:text-red-400'
              }`}
            >
              {webhookConfigured ? 'Configured' : 'Not configured'}
            </span>
          </div>
        </div>
      </div>

      {/* Switching to Production */}
      <div className="rounded-lg border p-6 space-y-4">
        <h2 className="text-lg font-semibold">Switching to Production</h2>
        <p className="text-sm text-muted-foreground">
          Stripe mode is determined by the <code>STRIPE_SECRET_KEY</code> env var prefix. There is
          no runtime toggle — this is a deliberate safety measure.
        </p>
        <div className="bg-muted/50 rounded p-4 text-sm space-y-2">
          <div>
            <strong>Test mode:</strong> <code>STRIPE_SECRET_KEY=sk_test_...</code>
          </div>
          <div>
            <strong>Live mode:</strong> <code>STRIPE_SECRET_KEY=sk_live_...</code>
          </div>
        </div>
        <p className="text-sm text-muted-foreground">
          To go live: update the env var in your deployment, create live products/prices, and
          redeploy. See <code>docs/STRIPE_SETUP_GUIDE.md</code> → Go Live Checklist.
        </p>
        <a
          href="https://dashboard.stripe.com/apikeys"
          target="_blank"
          rel="noopener noreferrer"
          className="inline-flex items-center gap-1.5 text-sm text-primary hover:underline"
        >
          Open Stripe Dashboard
          <ExternalLink className="h-3.5 w-3.5" />
        </a>
      </div>
    </div>
  );
}
