// app/routes/app.settings.bis-email.jsx
//
// Auf better-sqlite3 umgestellt (16.09.2026):
// - db.setting.findUnique(shop_key) -> SELECT
// - db.setting.upsert() -> INSERT ... ON CONFLICT(shop, key) DO UPDATE
import { json } from "@remix-run/node";
import { useLoaderData, useFetcher } from "@remix-run/react";
import {
  Page,
  Layout,
  Card,
  Text,
  BlockStack,
  InlineStack,
  TextField,
  Button,
  Banner,
  Tabs,
} from "@shopify/polaris";
import { useState, useCallback } from "react";
import { authenticate } from "../shopify.server";
import { db } from "../db.server";
import { cuid, nowIso } from "../cuid.server";
import { sendBackInStockEmail, LOCALE_FALLBACK, SAMPLE_BIS_EMAIL_ITEMS } from "../mailer.server";

const SETTING_KEY = "bis_email_texts";
const LOCALES = ["de", "fr", "en"];
const LOCALE_LABELS = { de: "Deutsch", fr: "Français", en: "English" };
const FIELDS = [
  { key: "subject", label: "Betreff", help: null },
  { key: "intro", label: "Intro-Text (1 Artikel)", help: null },
  { key: "introPlural", label: "Intro-Text (mehrere Artikel)", help: null },
  { key: "cta", label: "Button-Text (Link zum Produkt)", help: null },
  {
    key: "fromWishlistTemplate",
    label: '"Aus deiner Liste"-Zusatz',
    help: "Platzhalter {name} wird durch den Listennamen ersetzt.",
  },
];

export async function loader({ request }) {
  const { session } = await authenticate.admin(request);

  const setting = db
    .prepare(`SELECT * FROM "Setting" WHERE shop = ? AND key = ?`)
    .get(session.shop, SETTING_KEY);

  let stored = {};
  if (setting?.value) {
    try {
      stored = JSON.parse(setting.value);
    } catch {
      stored = {};
    }
  }

  const texts = {};
  for (const locale of LOCALES) {
    texts[locale] = { ...LOCALE_FALLBACK[locale], ...(stored[locale] || {}) };
  }

  return json({ texts });
}

export async function action({ request }) {
  const { session } = await authenticate.admin(request);
  const shop = session.shop;
  const formData = await request.formData();
  const intent = formData.get("intent");

  if (intent === "save") {
    const texts = JSON.parse(formData.get("texts"));
    db.prepare(
      `INSERT INTO "Setting" (id, shop, key, value, updatedAt)
       VALUES (?, ?, ?, ?, ?)
       ON CONFLICT(shop, key) DO UPDATE SET value = excluded.value, updatedAt = excluded.updatedAt`
    ).run(cuid(), shop, SETTING_KEY, JSON.stringify(texts), nowIso());
    return json({ ok: true, message: "Gespeichert." });
  }

  if (intent === "sendTest") {
    const texts = JSON.parse(formData.get("texts"));
    const locale = formData.get("locale");
    const testEmail = (formData.get("testEmail") || "").trim();

    if (!testEmail) {
      return json({ ok: false, message: "Bitte eine Test-E-Mail-Adresse angeben." }, { status: 400 });
    }

    try {
      await sendBackInStockEmail({
        to: testEmail,
        locale,
        items: SAMPLE_BIS_EMAIL_ITEMS,
        overrides: texts[locale],
      });
      return json({ ok: true, message: `Test-E-Mail (${LOCALE_LABELS[locale]}) an ${testEmail} gesendet.` });
    } catch (err) {
      return json({ ok: false, message: `Versand fehlgeschlagen: ${err.message}` }, { status: 500 });
    }
  }

  return json({ ok: false, message: "Unbekannte Aktion." }, { status: 400 });
}

export default function BisEmailSettings() {
  const { texts: initialTexts } = useLoaderData();
  const saveFetcher = useFetcher();
  const testFetcher = useFetcher();

  const [texts, setTexts] = useState(initialTexts);
  const [tabIndex, setTabIndex] = useState(0);
  const [testEmail, setTestEmail] = useState("");
  const [dirty, setDirty] = useState(false);

  const currentLocale = LOCALES[tabIndex];

  const updateField = (field, value) => {
    setTexts((prev) => ({
      ...prev,
      [currentLocale]: { ...prev[currentLocale], [field]: value },
    }));
    setDirty(true);
  };

  const handleSave = () => {
    saveFetcher.submit({ intent: "save", texts: JSON.stringify(texts) }, { method: "post" });
    setDirty(false);
  };

  const handleSendTest = () => {
    testFetcher.submit(
      { intent: "sendTest", texts: JSON.stringify(texts), locale: currentLocale, testEmail },
      { method: "post" }
    );
  };

  const tabs = LOCALES.map((locale) => ({ id: locale, content: LOCALE_LABELS[locale] }));

  const handleTabChange = useCallback((index) => setTabIndex(index), []);

  return (
    <Page
      title="Back-in-Stock E-Mail"
      subtitle="Texte der Benachrichtigungsmail (3 Sprachen)"
      primaryAction={{ content: "Speichern", onAction: handleSave, loading: saveFetcher.state !== "idle", disabled: !dirty }}
    >
      <Layout>
        <Layout.Section>
          <BlockStack gap="400">
            {saveFetcher.data?.ok && <Banner tone="success">{saveFetcher.data.message}</Banner>}
            {saveFetcher.data && !saveFetcher.data.ok && <Banner tone="critical">{saveFetcher.data.message}</Banner>}

            <Card>
              <Tabs tabs={tabs} selected={tabIndex} onSelect={handleTabChange}>
                <BlockStack gap="300">
                  {FIELDS.map((field) => (
                    <TextField
                      key={field.key}
                      label={field.label}
                      helpText={field.help}
                      value={texts[currentLocale][field.key]}
                      onChange={(value) => updateField(field.key, value)}
                      autoComplete="off"
                      multiline={field.key.startsWith("intro") ? 2 : false}
                    />
                  ))}
                </BlockStack>
              </Tabs>
            </Card>

            <Card>
              <BlockStack gap="300">
                <Text as="h2" variant="headingMd">Testversand</Text>
                <Text as="p" tone="subdued">
                  Sendet eine Beispiel-E-Mail mit Testdaten in der aktuell gewählten Sprache ({LOCALE_LABELS[currentLocale]})
                  an die angegebene Adresse - nutzt die aktuell eingetragenen Texte, auch wenn sie noch nicht gespeichert
                  wurden.
                </Text>
                <InlineStack gap="200" blockAlign="end">
                  <div style={{ minWidth: 280 }}>
                    <TextField
                      label="Test-E-Mail-Adresse"
                      type="email"
                      value={testEmail}
                      onChange={setTestEmail}
                      autoComplete="off"
                      placeholder="deine@adresse.de"
                    />
                  </div>
                  <Button onClick={handleSendTest} loading={testFetcher.state !== "idle"} disabled={!testEmail}>
                    Testmail senden
                  </Button>
                </InlineStack>
                {testFetcher.data?.ok && <Banner tone="success">{testFetcher.data.message}</Banner>}
                {testFetcher.data && !testFetcher.data.ok && <Banner tone="critical">{testFetcher.data.message}</Banner>}
              </BlockStack>
            </Card>
          </BlockStack>
        </Layout.Section>
      </Layout>
    </Page>
  );
}