import React, { useEffect, useState } from "react";
import axios from "axios";
import { Button } from "@/prime-react";
import { Column } from "@/prime-react";
import { DataTable } from "@/prime-react";
import { Dialog } from "@/prime-react";
import { InputText } from "@/prime-react";
import { ProgressSpinner } from "@/prime-react";
import { Tag } from "@/prime-react";
import DetailForm from "@/shared/DetailForm";
import { notifyError, notifySuccess } from "../shared/toast";

// Everyone attached to this organization — NOT "customers". A member may be on either side of a
// two-sided service: Day Day Help has Employers and Helpers, Anoath has Couples and Celebrants.
// The roles someone holds are what say which side they are on, so that is the headline column.
const Members = () => {
    const [members, setMembers] = useState([]);
    const [loading, setLoading] = useState(true);
    const [query, setQuery] = useState("");

    // Per-member detail: what THIS org has collected about them (user_org_detail), gated by this
    // org's own user_org_detail_config — and further filtered to the roles the member holds, so
    // a Helper-only field never appears for an Employer.
    const [detail, setDetail] = useState({ open: false, member: null, schema: [], info: {}, busy: false });

    const load = async () => {
        setLoading(true);
        try {
            const { data } = await axios.get("/member/list");
            setMembers(data.members || []);
        } catch (err) {
            notifyError(err.response?.data?.message || "Could not load members.");
        } finally {
            setLoading(false);
        }
    };

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

    const openDetail = async (member) => {
        setDetail({ open: true, member, schema: [], info: {}, busy: true });
        try {
            const { data } = await axios.get("/member_detail/get", { params: { user_id: member.id } });
            setDetail(d => ({ ...d, schema: data.schema || [], info: data.info || {}, busy: false }));
        } catch (err) {
            setDetail(d => ({ ...d, busy: false }));
            notifyError(err.response?.data?.message || "Could not load details.");
        }
    };

    const saveDetail = async () => {
        setDetail(d => ({ ...d, busy: true }));
        try {
            await axios.put("/member_detail/save", { user_id: detail.member.id, info: detail.info });
            setDetail(d => ({ ...d, open: false, busy: false }));
            notifySuccess("Saved.");
            await load();
        } catch (err) {
            setDetail(d => ({ ...d, busy: false }));
            const errors = err.response?.data?.errors?.info;
            notifyError(Array.isArray(errors) ? errors.join(" ") : (err.response?.data?.message || "Could not save."));
        }
    };

    const shown = members.filter(m => {
        const q = query.trim().toLowerCase();
        if (!q) return true;
        return (m.name || "").toLowerCase().includes(q)
            || (m.email || "").toLowerCase().includes(q)
            || (m.user_types || []).some(t => t.name.toLowerCase().includes(q));
    });

    const rolesBody = (row) => (
        <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
            {(row.user_types || []).length === 0
                ? <span style={{ color: "var(--muted)" }}>no role yet</span>
                : row.user_types.map(t => <Tag key={t.id} value={t.name} />)}
        </div>
    );

    const detailBody = (row) => row.detail_fields > 0
        ? <span className="pt-badge pt-b-brand">{row.detail_fields} field{row.detail_fields === 1 ? "" : "s"}</span>
        : <span style={{ color: "var(--muted)" }}>—</span>;

    return (
        <div className="pt-fade-in">
            <div className="pt-page-head">
                <div>
                    <h2>Members</h2>
                    <p>Everyone attached to your organization — both the people you serve and the people who deliver.</p>
                </div>
                <div style={{ display: "flex", gap: 8 }}>
                    <InputText value={query} placeholder="Search name, email or role"
                        onChange={(e) => setQuery(e.target.value)} style={{ width: 240 }} />
                    <Button icon="pi pi-refresh" label="Refresh" className="p-button-sm p-button-secondary" onClick={load} />
                </div>
            </div>

            <div className="pt-card">
                {loading ? (
                    <div style={{ display: "flex", justifyContent: "center", padding: "40px 0" }}>
                        <ProgressSpinner style={{ width: "2.5rem", height: "2.5rem" }} />
                    </div>
                ) : (
                    <DataTable value={shown} paginator rows={10} dataKey="id"
                        emptyMessage="Nobody has joined your organization yet. Share a join link to invite people.">
                        <Column field="name" header="Name" sortable />
                        <Column field="email" header="Email" sortable />
                        <Column header="Roles" body={rolesBody} />
                        <Column field="service_count" header="Services" style={{ width: 110 }}
                            body={(r) => r.service_count ?? 0} sortable />
                        <Column field="booking_count" header="Bookings" style={{ width: 110 }}
                            body={(r) => r.booking_count ?? 0} sortable />
                        <Column header="Details" body={detailBody} style={{ width: 120 }} />
                        <Column header="" style={{ width: 130, textAlign: "right" }} body={(row) => (
                            <Button icon="pi pi-id-card" label="Details" className="p-button-sm p-button-info"
                                onClick={() => openDetail(row)} />
                        )} />
                    </DataTable>
                )}
            </div>

            <Dialog visible={detail.open} onHide={() => !detail.busy && setDetail(d => ({ ...d, open: false }))}
                header={`Details — ${detail.member?.name || ""}`} style={{ width: "34rem" }}>
                <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                    <div style={{ fontSize: 13, color: "var(--muted)" }}>
                        What your organization records about this person. Fields come from your own
                        user-type configuration, so they differ by the roles they hold.
                    </div>
                    <DetailForm schema={detail.schema} info={detail.info} disabled={detail.busy}
                        onChange={(info) => setDetail(d => ({ ...d, info }))} />
                    <div style={{ display: "flex", justifyContent: "flex-end", gap: 8 }}>
                        <Button label="Close" className="p-button-sm p-button-secondary" disabled={detail.busy}
                            onClick={() => setDetail(d => ({ ...d, open: false }))} />
                        {detail.schema.length > 0 && (
                            <Button label={detail.busy ? "Saving…" : "Save"} className="p-button-sm"
                                loading={detail.busy} disabled={detail.busy} onClick={saveDetail} />
                        )}
                    </div>
                </div>
            </Dialog>
        </div>
    );
};

export default Members;