import {
  IonCard,
  IonCardHeader,
  IonCardTitle,
  IonCardContent,
  IonButton,
  IonInput,
  IonTextarea,
  IonSelect,
  IonSelectOption,
  IonToggle,
  IonModal,
  IonHeader,
  IonToolbar,
  IonTitle,
  IonContent,
  IonGrid,
  IonRow,
  IonCol,
  IonBadge,
  IonItem,
  IonLabel,
  IonAlert
} from "@ionic/react";
import { useEffect, useState, useContext } from "react";
import { Context } from "../context/contex";
import axios from "axios";

/* ================= TYPES ================= */

interface Promo {
  id?: number;
  title: string;
  type: "image" | "html";
  image?: string;
  html?: string;
  cta_link?: string;
  show_once: number;
  is_active?: number;
  start_date?: number | null;
  end_date?: number | null;
}

/* ================= COMPONENT ================= */

const AdminPromos: React.FC = () => {
  const context = useContext(Context);
  if (!context) return null;

  const { apiRequest, abr, busy, setBusy, storage, settings } = context;

  const [promos, setPromos] = useState<Promo[]>([]);
  const [showModal, setShowModal] = useState(false);
  const [saving, setSaving] = useState(false);
const [imageFile, setImageFile] = useState<File | null>(null);
const [showDeleteAlert, setShowDeleteAlert] = useState(false);
const [deleteTarget, setDeleteTarget] = useState<number | null>(null);

  const [form, setForm] = useState<Promo>({
    title: "",
    type: "image",
    image: "",
    html: "",
    cta_link: "",
    show_once: 1,
  });

  /* ================= FETCH ================= */

const fetchPromos = async () => {
  const res = (await apiRequest(
    "POST",
    "",
    { action: "get_promos" },
    true,
    false
  )) as any;

  if (res?.success) {
    const normalized = res.data.map((p: any) => ({
      ...p,
      id: Number(p.id),
      show_once: Number(p.show_once),      // "0" → 0
      is_active: Number(p.is_active),      // "1" → 1
      start_date: p.start_date ? Number(p.start_date) : null,
      end_date: p.end_date ? Number(p.end_date) : null,
      created_at: Number(p.created_at),
    }));

    setPromos(normalized);
  }
};


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

  /* ================= ACTIONS ================= */

  const savePromo = async () => {
  const  token = await storage?.get(abr+"_auth_token");

  setSaving(true);
setBusy(true);
  const fd = new FormData();
  fd.append("action", "save_promo");
  fd.append("title", form.title);
  fd.append("type", form.type);
  fd.append("cta_link", form.cta_link || "");
  fd.append("show_once", String(form.show_once));

  if (form.id) fd.append("id", String(form.id));
  if (form.html) fd.append("html", form.html);
  if (imageFile) fd.append("image", imageFile);

  try {
    const res = await axios.post(
      context.apiURL,
      fd,
      {
        headers: {
          Authorization: `Bearer ${token}`,
          "Content-Type": "multipart/form-data",
        },
      }
    );

    if (res.data?.success) {
      setShowModal(false);
      resetForm();
      setImageFile(null);
      fetchPromos();
    }
  } catch (err) {
    console.error("PROMO SAVE ERROR:", err);
  }

  setSaving(false);
};


  const togglePromo = async (id: number, status: number) => {
    await apiRequest(
      "POST",
      "",
      {
        action: "toggle_promo",
        id,
        status,
      },
      true,
      true
    );

    fetchPromos();
  };

const editPromo = (promo: Promo) => {
  setForm({
    id: promo.id,
    title: promo.title,
    type: promo.type,
    image: promo.image ?? "",   // keep existing image path
    html: promo.html ?? "",
    cta_link: promo.cta_link ?? "",
    show_once: promo.show_once ?? 1,
    start_date: promo.start_date ?? undefined,
    end_date: promo.end_date ?? undefined,
  });

  setShowModal(true);
};


const resetForm = () => {
  setForm({
    title: "",
    type: "image",
    image: "",
    html: "",
    cta_link: "",
    show_once: 1,
  });
  setImageFile(null);
};

const confirmDelete = (id: number) => {
  setDeleteTarget(id);
  setShowDeleteAlert(true);
};

const deletePromo = async () => {
  if (!deleteTarget) return;

  const res = (await apiRequest(
    "POST",
    "",
    {
      action: "delete_promo",
      id: deleteTarget,
    },
    true,
    true
  )) as any;

  if (res?.success) {
    fetchPromos();
  }

  setShowDeleteAlert(false);
  setDeleteTarget(null);
};


  /* ================= RENDER ================= */

  return (
    <>
      <IonCard>
        <IonCardHeader>
          <IonCardTitle>📢 Promo Manager</IonCardTitle>
        </IonCardHeader>

        <IonCardContent>
          <IonButton onClick={() => setShowModal(true)}>
            Add Promo
          </IonButton>

          <IonGrid className="ion-margin-top">
            {promos.map((p) => (
              <IonRow key={p.id} className="ion-align-items-center ion-padding-vertical">
                <IonCol size="5">
                  <strong>{p.title}</strong>
                  <br />
                  <IonBadge color={p.type === "image" ? "primary" : "tertiary"}>
                    {p.type.toUpperCase()}
                  </IonBadge>
                </IonCol>

                <IonCol size="3">
                  {p.is_active ? (
                    <IonBadge color="success">ACTIVE</IonBadge>
                  ) : (
                    <IonBadge color="medium">DISABLED</IonBadge>
                  )}
                </IonCol>

                <IonCol size="4" className="ion-text-right">
                  <IonButton
                    size="small"
                    fill="outline"
                    onClick={() => editPromo(p)}
                  >
                    Edit
                  </IonButton>

                  <IonButton
                    size="small"
                    color={p.is_active ? "danger" : "success"}
                    onClick={() =>
                      togglePromo(p.id!, p.is_active ? 0 : 1)
                    }
                  >
                    {p.is_active ? "Disable" : "Enable"}
                  </IonButton>
                  <IonButton
  size="small"
  color="danger"
  fill="outline"
  onClick={() => confirmDelete(p.id!)}
>
  Delete
</IonButton>

                </IonCol>
              </IonRow>
            ))}
          </IonGrid>
        </IonCardContent>
      </IonCard>

      {/* ================= MODAL ================= */}

      <IonModal isOpen={showModal} onDidDismiss={() => setShowModal(false)}>
        <IonHeader>
          <IonToolbar>
            <IonTitle>
              {form.id ? "Edit Promo" : "Create Promo"}
            </IonTitle>
          </IonToolbar>
        </IonHeader>

        <IonContent className="ion-padding">
       
          <IonInput
            label="Title"
            value={form.title}
            onIonChange={(e) =>
              setForm({ ...form, title: e.detail.value! })
            }
          />

          <IonSelect
            label="Promo Type"
            value={form.type}
            onIonChange={(e) =>
              setForm({ ...form, type: e.detail.value })
            }
          >
            <IonSelectOption value="image">Image</IonSelectOption>
            <IonSelectOption value="html">HTML</IonSelectOption>
          </IonSelect>
{form.type === "image" && (
  <>
    <IonItem>
      <IonLabel>Promo Image</IonLabel>
      <input
        type="file"
        accept="image/*"
        onChange={(e) => {
          const file = e.target.files?.[0];
          if (file) setImageFile(file);
        }}
      />
    </IonItem>

    {form.image && (
      <img
        src={settings?.domain + form.image}
        alt="promo"
        style={{ width: "100%", marginTop: 10, borderRadius: 8 }}
      />
    )}
  </>
)}


          {form.type === "html" && (
            <IonTextarea
              label="HTML Content"
              rows={6}
              value={form.html}
              onIonChange={(e) =>
                setForm({ ...form, html: e.detail.value! })
              }
            //  style={{height:"100px"}}
            />
          )}

          <IonInput
            label="CTA Link (optional)"
            value={form.cta_link}
            onIonChange={(e) =>
              setForm({ ...form, cta_link: e.detail.value! })
            }
          />

          <IonItem>
            <IonLabel>Show Once</IonLabel>
            <IonToggle
              checked={!!form.show_once}
              onIonChange={(e) =>
                setForm({ ...form, show_once: e.detail.checked ? 1 : 0 })
              }
            />
          </IonItem>

          <IonButton
            expand="block"
            className="ion-margin-top"
            disabled={saving}
            onClick={savePromo}
          >
            {saving ? "Saving..." : "Save Promo"}
          </IonButton>
            <IonButton
            fill="outline"
            expand="block"
            className="ion-margin-top"
            disabled={saving}
            onClick={() => setShowModal(false)}
          >
       Cancel
          </IonButton>
        </IonContent>
      </IonModal>
      <IonAlert
  isOpen={showDeleteAlert}
  header="Delete Promo"
  message="Are you sure you want to delete this promo? This action cannot be undone."
  buttons={[
    {
      text: "Cancel",
      role: "cancel",
      handler: () => {
        setShowDeleteAlert(false);
        setDeleteTarget(null);
      },
    },
    {
      text: "Delete",
      role: "destructive",
      handler: deletePromo,
    },
  ]}
/>

    </>
  );
};

export default AdminPromos;