"use client";
import CommonTitle from "@/app/components/CommonTitle";
import CommonError from "@/app/components/CommonError";
import CommonInputField from "@/app/components/CommonInputField";
import { useCustomers } from "./components/_hooks";

export default function CustomersPage() {
  const t = useCustomers();

  return (
    <>
      <div className="mb-3">
        <CommonTitle title="Customers" description="Loyalty points, store credit, and purchase history" />
      </div>
      <CommonError message={t.message} type={t.messageType} />

      <div className="card mb-3">
        <div className="card-header"><h6 className="mb-0">New Customer</h6></div>
        <div className="card-body">
          <form className="row g-3" onSubmit={t.handleSubmit}>
            <div className="col-md-3"><CommonInputField level_name="Name" value={t.form.name ?? ""} on_change_data={t.setField("name")} required /></div>
            <div className="col-md-3"><CommonInputField level_name="Phone" value={t.form.phone ?? ""} on_change_data={t.setField("phone")} /></div>
            <div className="col-md-3"><CommonInputField level_name="Email" value={t.form.email ?? ""} on_change_data={t.setField("email")} /></div>
            <div className="col-md-3"><CommonInputField level_name="Address" value={t.form.address ?? ""} on_change_data={t.setField("address")} /></div>
            <div className="col-12 d-flex justify-content-end"><button className="btn btn-primary" type="submit">Add Customer</button></div>
          </form>
        </div>
      </div>

      <div className="card mb-3">
        <div className="card-header d-flex justify-content-between align-items-center">
          <h6 className="mb-0">All Customers</h6>
          <input className="form-control form-control-sm" style={{ maxWidth: 240 }} placeholder="Search name or phone" value={t.search} onChange={(e) => t.setSearch(e.target.value)} />
        </div>
        <div className="card-body p-0">
          <table className="table table-hover mb-0">
            <thead><tr><th>Name</th><th>Phone</th><th className="text-end">Loyalty Pts</th><th className="text-end">Store Credit</th><th className="text-end">Total Spend</th><th /></tr></thead>
            <tbody>
              {t.customers.map((c) => (
                <tr key={c.id}>
                  <td>{c.name}</td>
                  <td>{c.phone || "—"}</td>
                  <td className="text-end">{c.loyalty_points}</td>
                  <td className="text-end">{c.store_credit}</td>
                  <td className="text-end">{c.total_spend}</td>
                  <td className="text-end"><button className="btn btn-sm btn-link" onClick={() => t.openHistory(c)}>View</button></td>
                </tr>
              ))}
              {!t.loading && t.customers.length === 0 && (
                <tr><td colSpan={6} className="text-center text-body-tertiary py-5">No customers yet.</td></tr>
              )}
            </tbody>
          </table>
        </div>
      </div>

      {t.selected && (
        <div className="modal d-block" style={{ background: "rgba(0,0,0,0.5)" }} onClick={t.closeHistory}>
          <div className="modal-dialog modal-lg" onClick={(e) => e.stopPropagation()}>
            <div className="modal-content">
              <div className="modal-header">
                <h5 className="modal-title">{t.selected.name} — {t.selected.loyalty_points} pts</h5>
                <button className="btn-close" onClick={t.closeHistory} />
              </div>
              <div className="modal-body">
                <div className="row g-2 mb-3">
                  <div className="col-6">
                    <input className="form-control form-control-sm" placeholder="Adjust points (+/-)" value={t.adjustPoints} onChange={(e) => t.setAdjustPoints(e.target.value)} />
                  </div>
                  <div className="col-4">
                    <input className="form-control form-control-sm" placeholder="Reason" value={t.adjustReason} onChange={(e) => t.setAdjustReason(e.target.value)} />
                  </div>
                  <div className="col-2">
                    <button className="btn btn-sm btn-outline-primary w-100" onClick={t.handleAdjustLoyalty}>Apply</button>
                  </div>
                </div>
                <table className="table table-sm">
                  <thead><tr><th>Invoice</th><th>Date</th><th className="text-end">Total</th><th>Status</th></tr></thead>
                  <tbody>
                    {t.history.map((s: any) => (
                      <tr key={s.id}>
                        <td>{s.invoice_no}</td>
                        <td>{new Date(s.created_at).toLocaleDateString()}</td>
                        <td className="text-end">{s.grand_total}</td>
                        <td className="text-capitalize">{s.status.replace("_", " ")}</td>
                      </tr>
                    ))}
                    {t.history.length === 0 && <tr><td colSpan={4} className="text-center text-body-tertiary py-3">No purchases yet.</td></tr>}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      )}
    </>
  );
}