import type { LoaderFunctionArgs } from "@remix-run/node";
import { json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import {
  Page,
  Layout,
  Card,
  BlockStack,
  InlineStack,
  InlineGrid,
  Text,
  Badge,
  Button,
  Box,
  Banner,
} from "@shopify/polaris";

import { authenticate, PLAN_STANDARD, PLAN_PRO } from "../shopify.server";
import type { RuleTier } from "../lib/rules";

export const loader = async ({ request }: LoaderFunctionArgs) => {
  const { billing } = await authenticate.admin(request);

  const billingEnabled = process.env.BILLING_ENABLED === "true";

  let shopTier: RuleTier = "pro"; // default: all unlocked in dev
  let subscription = null;

  if (billingEnabled) {
    try {
      const proCheck = await billing.check({ plans: [PLAN_PRO] });
      if (proCheck.hasActivePayment) {
        shopTier = "pro";
        if (proCheck.appSubscriptions?.length > 0) {
          subscription = { name: proCheck.appSubscriptions[0].name, isTest: proCheck.appSubscriptions[0].test };
        }
      } else {
        const standardCheck = await billing.check({ plans: [PLAN_STANDARD] });
        if (standardCheck.hasActivePayment) {
          shopTier = "standard";
          if (standardCheck.appSubscriptions?.length > 0) {
            subscription = { name: standardCheck.appSubscriptions[0].name, isTest: standardCheck.appSubscriptions[0].test };
          }
        } else {
          shopTier = "free";
        }
      }
    } catch {
      // Billing API not available (app not public yet)
      shopTier = "pro";
    }
  }

  return json({
    shopTier,
    subscription,
    billingEnabled,
  });
};

const PLANS = [
  {
    tier: "free" as const,
    title: "Gratuite",
    subtitle: "Analyse vos pages natives indexées",
    price: "",
    trial: "",
    features: [
      "Désindexer la collection 'all'",
    ],
  },
  {
    tier: "standard" as const,
    title: "Essentiel",
    subtitle: "Désindexation des pages zombies natives via 13 règles fixes",
    price: "$9.99",
    trial: "Essai gratuit de 7 jour(s)",
    popular: true,
    features: [
      "collections/all, search, account, login, cart, checkout, variant, tagged, vendors, sort_by, pr_prod_strat, web-pixels-manager/wpm/sandbox.",
    ],
  },
  {
    tier: "pro" as const,
    title: "Avancé",
    subtitle: "Inclut les fonctionnalités du forfait essentiel",
    price: "$19.99",
    trial: "Essai gratuit de 7 jour(s)",
    features: [
      "Désindexation personnalisée via handle, chemin 'path', paramètre d'url",
    ],
  },
];

export default function BillingPage() {
  const { shopTier, subscription, billingEnabled } =
    useLoaderData<typeof loader>();

  return (
    <Page title="Abonnement">
      <Layout>
        <Layout.Section>
          {!billingEnabled && (
            <Box paddingBlockEnd="400">
              <Banner tone="info">
                <p>Mode développement — toutes les fonctionnalités sont déverrouillées. La facturation sera activée lors de la publication sur le Shopify App Store.</p>
              </Banner>
            </Box>
          )}

          {subscription?.isTest && (
            <Box paddingBlockEnd="400">
              <Banner tone="warning">
                <p>Mode test actif — aucun frais reel ne sera facture.</p>
              </Banner>
            </Box>
          )}

          <InlineGrid columns={3} gap="400">
            {PLANS.map((plan) => {
              const isActive = shopTier === plan.tier;
              return (
                <div key={plan.tier} style={{ position: "relative" }}>
                  {"popular" in plan && plan.popular && (
                    <div style={{ position: "absolute", top: "-12px", left: "50%", transform: "translateX(-50%)", zIndex: 1 }}>
                      <Badge tone="success">Le plus populaire</Badge>
                    </div>
                  )}
                <Card>
                  <BlockStack gap="400">
                    <BlockStack gap="200">
                      <Text as="h3" variant="headingLg" fontWeight="bold">
                        {plan.title}
                      </Text>
                      {isActive && <Badge tone="success">Actif</Badge>}
                      <Text as="p" variant="bodySm" tone="subdued">
                        {plan.subtitle}
                      </Text>
                    </BlockStack>

                    {plan.price && (
                      <InlineStack gap="100" blockAlign="baseline">
                        <Text as="p" variant="heading2xl" fontWeight="bold">
                          {plan.price}
                        </Text>
                        <Text as="p" variant="bodyMd" tone="subdued">
                          / mois
                        </Text>
                      </InlineStack>
                    )}

                    <BlockStack gap="200">
                      {plan.features.map((feature) => (
                        <Text as="p" variant="bodySm" key={feature}>
                          {feature}
                        </Text>
                      ))}
                    </BlockStack>

                    {plan.trial && (
                      <Text as="p" variant="bodySm" tone="magic">
                        {plan.trial}
                      </Text>
                    )}

                    {!isActive && plan.tier !== "free" && (
                      <Button
                        variant="primary"
                        url={`/app/billing/subscribe?plan=${plan.tier}`}
                        fullWidth
                      >
                        Choisir ce plan
                      </Button>
                    )}
                  </BlockStack>
                </Card>
                </div>
              );
            })}
          </InlineGrid>
        </Layout.Section>
      </Layout>
    </Page>
  );
}