import React, { useState } from "react";
import { wpFetch } from "../utils/wpApi";
import "./products.css";

const INITIAL_FIELDS = ACOWPGS_DATA.orderFields;

export default function Orders() {
    const [fields, setFields] = useState(INITIAL_FIELDS);
    const [dragIndex, setDragIndex] = useState(null);
    const [saving, setSaving] = useState(false);

    /* ---------- TOGGLES ---------- */

    const toggle = (index, type) => {
        const updated = [...fields];
        updated[index][type] = !updated[index][type];
        setFields(updated);
    };

    /* ---------- DRAG ---------- */

    const onDragStart = (index) => setDragIndex(index);
    const onDragOver = (e) => e.preventDefault();

    const onDrop = (index) => {
        if (dragIndex === null) return;

        const updated = [...fields];
        const moved = updated.splice(dragIndex, 1)[0];
        updated.splice(index, 0, moved);

        setFields(updated);
        setDragIndex(null);
    };

    /* ---------- SAVE (SINGLE API) ---------- */

    const saveSettings = async () => {
        setSaving(true);

        const payload = {
            send_fields: fields.filter(f => f.send).map(f => f.key),
            editable_fields: fields.filter(f => f.editable).map(f => f.key),
        };

        try {
            await wpFetch("save-order-settings", {
                method: "POST",
                data: payload,
            });

            alert("Settings saved successfully");
        } catch (e) {
            alert(e.message || "Failed to save settings");
        } finally {
            setSaving(false);
        }
    };

    const getSettings = async () => {
        try {
            const response = await wpFetch("get-order-settings");
            const sendFields = response.data.send_fields || [];
            const editableFields = response.data.editable_fields || [];
            const updatedFields = INITIAL_FIELDS.map(field => ({
                ...field,
                send: sendFields.includes(field.key),
                editable: editableFields.includes(field.key),
            }));
            setFields(updatedFields);
        } catch (e) {
            alert(e.message || "Failed to load settings");
        }
    };

    React.useEffect(() => {
        getSettings();
    }, []);

    return (
        <div className="wpgsa-field-card">
            <h2 className="wpgsa-title">Order Field Configuration</h2>
            <p className="wpgsa-description">
                Drag to control send order and choose which order fields are editable.
            </p>

            <table className="wpgsa-table">
                <thead>
                    <tr>
                        <th className="drag-col"></th>
                        <th>Field</th>
                        <th>Send</th>
                        <th>Editable</th>
                    </tr>
                </thead>
                <tbody>
                    {fields.map((field, index) => (
                        <tr
                            key={field.key}
                            draggable
                            onDragStart={() => onDragStart(index)}
                            onDragOver={onDragOver}
                            onDrop={() => onDrop(index)}
                            className={!field.send ? "disabled" : ""}
                        >
                            <td className="drag-col">⋮⋮</td>
                            <td>{field.label}</td>
                            <td>
                                <label className="wpgsa-toggle">
                                    <input
                                        type="checkbox"
                                        checked={field.send}
                                        onChange={() => toggle(index, "send")}
                                    />
                                    <span />
                                </label>
                            </td>
                            <td>
                                <label className="wpgsa-toggle">
                                    <input
                                        type="checkbox"
                                        checked={field.editable}
                                        onChange={() => toggle(index, "editable")}
                                    />
                                    <span />
                                </label>
                            </td>
                        </tr>
                    ))}
                </tbody>
            </table>

            <div className="wpgsa-footer">
                <button
                    className="button button-primary"
                    onClick={saveSettings}
                    disabled={saving}
                >
                    {saving ? "Saving..." : "Save Order Settings"}
                </button>
            </div>
        </div>
    );
}