"use client";

import { useEffect, useState, useCallback } from "react";
import { api } from "@/app/adminx/admin-api";
import {
  Card,
  Button,
  Badge,
  Modal,
  Field,
  Input,
  Textarea,
  Select,
  Toggle,
  SectionTitle,
  ErrorNote,
} from "@/app/adminx/ui";

interface Network {
  id: number;
  name: string;
  headerCode: string;
  inContentCode: string;
  sidebarCode: string;
  footerCode: string;
  desktopCode: string;
  mobileCode: string;
  status: string;
}
interface Slot {
  id: number;
  position: string;
  label: string;
  enabled: boolean;
  provider: string;
  adsenseSlotId: string;
  networkId: number | null;
  afterParagraph: number;
  mobile: boolean;
  desktop: boolean;
}

const emptyNetwork: Network = {
  id: 0,
  name: "",
  headerCode: "",
  inContentCode: "",
  sidebarCode: "",
  footerCode: "",
  desktopCode: "",
  mobileCode: "",
  status: "disabled",
};

export function MonetizationSection() {
  const [settings, setSettings] = useState<Record<string, string>>({});
  const [networks, setNetworks] = useState<Network[]>([]);
  const [slots, setSlots] = useState<Slot[]>([]);
  const [editingNetwork, setEditingNetwork] = useState<Network | null>(null);
  const [saved, setSaved] = useState("");
  const [error, setError] = useState("");

  const load = useCallback(async () => {
    const [s, n] = await Promise.all([api.get("settings"), api.get("networks")]);
    setSettings(s.settings);
    setNetworks(n.networks);
    setSlots(n.slots);
  }, []);

  useEffect(() => {
    load();
  }, [load]);

  async function saveSettings(patch: Record<string, string | number | boolean>) {
    setError("");
    try {
      await api.post("settings", { settings: patch });
      setSaved("Saved ✓");
      setTimeout(() => setSaved(""), 1500);
      await load();
    } catch (e: any) {
      setError(e.message);
    }
  }

  async function saveSlot(slot: Slot) {
    await api.put(`slots?id=${slot.id}`, slot);
    await load();
  }

  async function saveNetwork() {
    if (!editingNetwork) return;
    if (editingNetwork.id) await api.put(`networks?id=${editingNetwork.id}`, editingNetwork);
    else await api.post("networks", editingNetwork);
    setEditingNetwork(null);
    await load();
  }

  async function removeNetwork(n: Network) {
    if (!confirm(`Delete network "${n.name}"?`)) return;
    await api.del(`networks?id=${n.id}`);
    await load();
  }

  const inputCls =
    "w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-200";

  return (
    <div>
      <SectionTitle
        title="Monetization"
        action={saved ? <Badge color="green">{saved}</Badge> : undefined}
      />
      <ErrorNote message={error} />

      {/* AdSense */}
      <Card className="mb-6 p-5">
        <div className="flex items-center justify-between">
          <h2 className="font-semibold text-slate-900">Google AdSense</h2>
          <Toggle
            checked={settings.adsense_enabled === "1"}
            onChange={(v) => saveSettings({ adsense_enabled: v ? "1" : "0" })}
            label="Enable AdSense"
          />
        </div>
        <p className="mt-1 text-sm text-slate-500">
          Add your publisher ID and ad slot IDs after your AdSense account is approved. AdSense
          approval is determined by Google.
        </p>
        <div className="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
          <Field label="Publisher ID" hint="e.g. pub-xxxxxxxxxxxxxxxx">
            <Input
              value={settings.adsense_publisher_id || ""}
              onChange={(e) => setSettings({ ...settings, adsense_publisher_id: e.target.value })}
              placeholder="pub-xxxxxxxxxxxxxxxx"
            />
          </Field>
          <Field label="Header Ad Slot">
            <Input value={settings.adsense_header_slot || ""} onChange={(e) => setSettings({ ...settings, adsense_header_slot: e.target.value })} />
          </Field>
          <Field label="In-Content Ad Slot">
            <Input value={settings.adsense_content_slot || ""} onChange={(e) => setSettings({ ...settings, adsense_content_slot: e.target.value })} />
          </Field>
          <Field label="Sidebar Ad Slot">
            <Input value={settings.adsense_sidebar_slot || ""} onChange={(e) => setSettings({ ...settings, adsense_sidebar_slot: e.target.value })} />
          </Field>
          <Field label="Footer Ad Slot">
            <Input value={settings.adsense_footer_slot || ""} onChange={(e) => setSettings({ ...settings, adsense_footer_slot: e.target.value })} />
          </Field>
        </div>
        <div className="mt-4">
          <Button
            onClick={() =>
              saveSettings({
                adsense_publisher_id: settings.adsense_publisher_id || "",
                adsense_header_slot: settings.adsense_header_slot || "",
                adsense_content_slot: settings.adsense_content_slot || "",
                adsense_sidebar_slot: settings.adsense_sidebar_slot || "",
                adsense_footer_slot: settings.adsense_footer_slot || "",
              })
            }
          >
            Save AdSense Settings
          </Button>
        </div>
      </Card>

      {/* Ad placements */}
      <Card className="mb-6 p-5">
        <h2 className="font-semibold text-slate-900">Ad Placements</h2>
        <p className="mt-1 text-sm text-slate-500">Control where ads appear across the site.</p>
        <div className="mt-4 space-y-3">
          {slots.map((slot) => (
            <div key={slot.id} className="rounded-xl border border-slate-200 p-4">
              <div className="flex flex-wrap items-center justify-between gap-3">
                <div className="flex items-center gap-3">
                  <Toggle checked={slot.enabled} onChange={(v) => saveSlot({ ...slot, enabled: v })} />
                  <div>
                    <p className="font-medium text-slate-800">{slot.label}</p>
                    <p className="text-xs text-slate-400">position: {slot.position}</p>
                  </div>
                </div>
                <Select
                  className="!w-40"
                  value={slot.provider}
                  onChange={(e) => saveSlot({ ...slot, provider: e.target.value })}
                >
                  <option value="adsense">AdSense</option>
                  <option value="network">Custom network</option>
                  <option value="none">None</option>
                </Select>
              </div>
              {slot.enabled && slot.provider === "adsense" && (
                <div className="mt-3 grid grid-cols-1 gap-3 sm:grid-cols-3">
                  <Field label="Ad slot ID">
                    <Input
                      value={slot.adsenseSlotId}
                      onChange={(e) => setSlots((s) => s.map((x) => (x.id === slot.id ? { ...x, adsenseSlotId: e.target.value } : x)))}
                    />
                  </Field>
                  <div className="flex items-end gap-4 pb-1">
                    <Toggle checked={slot.mobile} onChange={(v) => saveSlot({ ...slot, mobile: v })} label="Mobile" />
                    <Toggle checked={slot.desktop} onChange={(v) => saveSlot({ ...slot, desktop: v })} label="Desktop" />
                  </div>
                  <div className="flex justify-end">
                    <Button
                      variant="secondary"
                      onClick={() =>
                        saveSlot({
                          ...slot,
                          adsenseSlotId: slots.find((x) => x.id === slot.id)?.adsenseSlotId || slot.adsenseSlotId,
                        })
                      }
                    >
                      Save
                    </Button>
                  </div>
                </div>
              )}
              {slot.enabled && slot.provider === "network" && (
                <div className="mt-3 flex items-end justify-between gap-3">
                  <Field label="Network">
                    <Select
                      className="!w-56"
                      value={slot.networkId ?? ""}
                      onChange={(e) => saveSlot({ ...slot, networkId: e.target.value ? Number(e.target.value) : null })}
                    >
                      <option value="">Select network</option>
                      {networks.map((n) => (
                        <option key={n.id} value={n.id}>{n.name}</option>
                      ))}
                    </Select>
                  </Field>
                  <Field label="After paragraph">
                    <Input
                      type="number"
                      className="!w-24"
                      value={slot.afterParagraph}
                      onChange={(e) => setSlots((s) => s.map((x) => (x.id === slot.id ? { ...x, afterParagraph: Number(e.target.value) } : x)))}
                      onBlur={() => saveSlot(slot)}
                    />
                  </Field>
                </div>
              )}
            </div>
          ))}
        </div>
      </Card>

      {/* Custom ad networks */}
      <Card className="mb-6 p-5">
        <div className="flex items-center justify-between">
          <h2 className="font-semibold text-slate-900">Ad Networks</h2>
          <Button onClick={() => setEditingNetwork({ ...emptyNetwork })}>+ Add Network</Button>
        </div>
        <p className="mt-1 text-sm text-slate-500">
          Add custom publisher network code. Use networks that currently permit your usage and
          follow their policies.
        </p>
        <div className="mt-4 space-y-3">
          {networks.length === 0 && <p className="text-sm text-slate-400">No custom networks added.</p>}
          {networks.map((n) => (
            <div key={n.id} className="flex items-center justify-between rounded-xl border border-slate-200 p-4">
              <div className="flex items-center gap-3">
                <div>
                  <p className="font-medium text-slate-800">{n.name}</p>
                  <Badge color={n.status === "enabled" ? "green" : "slate"}>{n.status}</Badge>
                </div>
              </div>
              <div className="flex gap-1">
                <Button variant="ghost" onClick={() => setEditingNetwork(n)}>Edit</Button>
                <Button variant="ghost" className="text-red-600 hover:bg-red-50" onClick={() => removeNetwork(n)}>Delete</Button>
              </div>
            </div>
          ))}
        </div>
      </Card>

      {/* ads.txt */}
      <Card className="p-5">
        <h2 className="font-semibold text-slate-900">ads.txt</h2>
        <p className="mt-1 text-sm text-slate-500">
          Paste the ads.txt entries supplied by your advertising provider (one per line).
        </p>
        <Textarea
          rows={4}
          className="mt-3 font-mono text-xs"
          placeholder={"google.com, pub-XXXXXXXX, DIRECT, f08c47fec0942fa0"}
          value={settings.ads_txt || ""}
          onChange={(e) => setSettings({ ...settings, ads_txt: e.target.value })}
        />
        <div className="mt-3">
          <Button onClick={() => saveSettings({ ads_txt: settings.ads_txt || "" })}>Save ads.txt</Button>
        </div>
      </Card>

      <Modal open={!!editingNetwork} onClose={() => setEditingNetwork(null)} title={editingNetwork?.id ? "Edit Network" : "Add Network"} wide>
        {editingNetwork && (
          <div className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <Field label="Network name">
                <Input value={editingNetwork.name} onChange={(e) => setEditingNetwork({ ...editingNetwork, name: e.target.value })} />
              </Field>
              <Field label="Status">
                <Select value={editingNetwork.status} onChange={(e) => setEditingNetwork({ ...editingNetwork, status: e.target.value })}>
                  <option value="enabled">Enabled</option>
                  <option value="disabled">Disabled</option>
                </Select>
              </Field>
            </div>
            <Field label="Desktop ad code">
              <Textarea rows={2} className="font-mono text-xs" value={editingNetwork.desktopCode} onChange={(e) => setEditingNetwork({ ...editingNetwork, desktopCode: e.target.value })} />
            </Field>
            <Field label="Mobile ad code">
              <Textarea rows={2} className="font-mono text-xs" value={editingNetwork.mobileCode} onChange={(e) => setEditingNetwork({ ...editingNetwork, mobileCode: e.target.value })} />
            </Field>
            <Field label="Header code">
              <Textarea rows={2} className="font-mono text-xs" value={editingNetwork.headerCode} onChange={(e) => setEditingNetwork({ ...editingNetwork, headerCode: e.target.value })} />
            </Field>
            <Field label="In-content code">
              <Textarea rows={2} className="font-mono text-xs" value={editingNetwork.inContentCode} onChange={(e) => setEditingNetwork({ ...editingNetwork, inContentCode: e.target.value })} />
            </Field>
            <Field label="Sidebar code">
              <Textarea rows={2} className="font-mono text-xs" value={editingNetwork.sidebarCode} onChange={(e) => setEditingNetwork({ ...editingNetwork, sidebarCode: e.target.value })} />
            </Field>
            <Field label="Footer code">
              <Textarea rows={2} className="font-mono text-xs" value={editingNetwork.footerCode} onChange={(e) => setEditingNetwork({ ...editingNetwork, footerCode: e.target.value })} />
            </Field>
            <div className="flex justify-end gap-2">
              <Button variant="secondary" onClick={() => setEditingNetwork(null)}>Cancel</Button>
              <Button onClick={saveNetwork} disabled={!editingNetwork.name}>Save</Button>
            </div>
          </div>
        )}
      </Modal>
    </div>
  );
}