import {
  Box,
  Card,
  Layout,
  Page,
  Text,
  TextField,
  Button,
  BlockStack,
  InlineStack,
  Banner
} from "@shopify/polaris";
import { TitleBar } from "@shopify/app-bridge-react";
import { json } from "@remix-run/node";
import { useSubmit, useLoaderData, useNavigation, useActionData } from "@remix-run/react";
import { authenticate } from "../shopify.server";
import { useState } from "react";

// --- LOADER: Fetch existing settings from Shopify Metafields ---
export async function loader({ request }) {
  const { admin } = await authenticate.admin(request);
  const url = new URL(request.url);
  const paramId = url.searchParams.get("id");

  let customizationId = paramId;
  let currentAmount = "0";

  // Find the FIRST existing customization for our app
  const listResponse = await admin.graphql(
    `#graphql
    query {
      paymentCustomizations(first: 1) {
        edges {
          node {
            id
            metafield(namespace: "interac_limiter", key: "max_credit_card_amount") {
              value
            }
          }
        }
      }
    }`
  );
  
  const listJson = await listResponse.json();
  const customizations = listJson.data?.paymentCustomizations?.edges || [];
  
  if (customizations.length > 0) {
    customizationId = customizations[0].node.id;
    currentAmount = customizations[0].node.metafield?.value || "0";
  }

  // Also pre-fetch the function ID so we can create it if missing
  let functionId = null;
  const funcsResponse = await admin.graphql(
    `#graphql
    query {
      shopifyFunctions(first: 10) {
        edges {
          node {
            id
          }
        }
      }
    }`
  );
  const funcsJson = await funcsResponse.json();
  const functions = funcsJson.data?.shopifyFunctions?.edges || [];
  if (functions.length > 0) {
    functionId = functions[0].node.id;
  }

  return json({
    customizationId,
    currentAmount,
    functionId: functionId
  });
}

// --- ACTION: Save new settings to Shopify Metafields ---
export async function action({ request }) {
  const { admin } = await authenticate.admin(request);
  const formData = await request.formData();
  
  const customizationId = formData.get("customizationId");
  const newAmount = formData.get("maxAmount");
  const functionId = formData.get("functionId");

  if (!customizationId || customizationId === "null" || customizationId === "") {
    // WE NEED TO CREATE IT!
    if (!functionId) {
      return json({ success: false, errors: [{ message: "Extension ID is missing. Make sure the app is deployed or dev server is running properly." }] });
    }

    const createResponse = await admin.graphql(
      `#graphql
      mutation paymentCustomizationCreate($paymentCustomization: PaymentCustomizationInput!) {
        paymentCustomizationCreate(paymentCustomization: $paymentCustomization) {
          paymentCustomization {
            id
          }
          userErrors {
            message
          }
        }
      }`,
      {
        variables: {
          paymentCustomization: {
            title: "Conditional Interac Display",
            functionId: functionId,
            enabled: true,
            metafields: [
              {
                namespace: "interac_limiter",
                key: "max_credit_card_amount",
                type: "single_line_text_field",
                value: newAmount,
              }
            ]
          }
        }
      }
    );

    const createJson = await createResponse.json();
    const createErrors = createJson.data?.paymentCustomizationCreate?.userErrors;

    if (createErrors && createErrors.length > 0) {
      return json({ success: false, errors: createErrors });
    }

    return json({ success: true, savedAmount: newAmount, created: true });
  }

  // IT ALREADY EXISTS - Save using MetafieldsSet mutation
  const response = await admin.graphql(
    `#graphql
    mutation SetAppMetafield($metafieldsSetInput: [MetafieldsSetInput!]!) {
      metafieldsSet(metafields: $metafieldsSetInput) {
        metafields {
          id
          key
          value
        }
        userErrors {
          field
          message
        }
      }
    }`,
    {
      variables: {
        metafieldsSetInput: [
          {
            ownerId: customizationId,
            namespace: "interac_limiter",
            key: "max_credit_card_amount",
            type: "single_line_text_field",
            value: newAmount,
          },
        ],
      },
    }
  );

  const responseJson = await response.json();
  const errors = responseJson.data?.metafieldsSet?.userErrors;

  if (errors && errors.length > 0) {
    return json({ success: false, errors });
  }

  return json({ success: true, savedAmount: newAmount, created: false });
}

// --- FRONTEND COMPONENT ---
export default function SettingsPage() {
  const loaderData = useLoaderData();
  const actionData = useActionData();
  const submit = useSubmit();
  const nav = useNavigation();

  const [amount, setAmount] = useState(loaderData.currentAmount || "");

  const isSaving = nav.state === "submitting";

  const handleSave = () => {
    submit(
      { 
        maxAmount: amount, 
        customizationId: loaderData.customizationId || "",
        functionId: loaderData.functionId || ""
      },
      { method: "post" }
    );
  };

  return (
    <Page>
      <TitleBar title="Payment Settings" />
      <Layout>
        <Layout.Section>
          <Card>
            <BlockStack gap="400">
              <Text as="h2" variant="headingLg">
                Conditional Payment Display
              </Text>
              
              <Text as="p" variant="bodyMd">
                Set a threshold amount. If a customer's cart total strictly exceeds this amount, 
                all OTHER payment methods will be hidden at checkout, leaving ONLY Interac.
              </Text>

              {actionData?.success && (
                <Banner title="Settings Saved Successfully!" tone="success">
                  <p>The maximum threshold was updated to ${actionData.savedAmount}.</p>
                </Banner>
              )}

              {actionData?.errors && actionData.errors.length > 0 && (
                <Banner title="Error Saving Settings" tone="critical">
                  <ul>
                    {actionData.errors.map((error, idx) => (
                      <li key={idx}>{error.message}</li>
                    ))}
                  </ul>
                </Banner>
              )}

              <Box paddingBlockStart="200">
                <TextField
                  label="Hide Other Methods Above Amount ($)"
                  type="number"
                  value={amount}
                  onChange={(val) => setAmount(val)}
                  autoComplete="off"
                  helpText="Leave at 0 to disable conditional hiding."
                  prefix="$"
                />
              </Box>

              <InlineStack align="end">
                <Button variant="primary" onClick={handleSave} loading={isSaving}>
                  {loaderData.customizationId ? "Update Configuration" : "Enable & Save Configuration"}
                </Button>
              </InlineStack>
            </BlockStack>
          </Card>
        </Layout.Section>
      </Layout>
    </Page>
  );
}