"use client";

import { useEffect, useState } from "react";

export default function DashboardPage() {
  const [salesAccountCode, setSalesAccountCode] = useState("");
  const [stripeClearingAccountCode, setStripeClearingAccountCode] =
    useState("");
  const [loading, setLoading] = useState(true);
  const [saved, setSaved] = useState(false);

  useEffect(() => {
    fetch("/api/dashboard/xero-settings")
      .then((res) => res.json())
      .then((data) => {
        setSalesAccountCode(data.salesAccountCode ?? "");
        setStripeClearingAccountCode(data.stripeClearingAccountCode ?? "");
        setLoading(false);
      });
  }, []);

  async function save() {
    setSaved(false);

    await fetch("/api/dashboard/xero-settings", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        salesAccountCode,
        stripeClearingAccountCode,
      }),
    });

    setSaved(true);
  }

  if (loading) return <p>Loading…</p>;

  return (
    <div className="max-w-xl space-y-6">
      <h1 className="text-2xl font-semibold">
        Stripe → Xero settings
      </h1>

      <div>
        <label className="block text-sm font-medium">
          Sales account code
        </label>
        <input
          className="mt-1 w-full border px-3 py-2"
          value={salesAccountCode}
          onChange={(e) => setSalesAccountCode(e.target.value)}
        />
        <p className="text-sm text-zinc-500">
          Used on invoice line items
        </p>
      </div>

      <div>
        <label className="block text-sm font-medium">
          Stripe clearing account code
        </label>
        <input
          className="mt-1 w-full border px-3 py-2"
          value={stripeClearingAccountCode}
          onChange={(e) =>
            setStripeClearingAccountCode(e.target.value)
          }
        />
        <p className="text-sm text-zinc-500">
          Receives Stripe payments
        </p>
      </div>

      <button
        onClick={save}
        className="rounded bg-black px-4 py-2 text-white"
      >
        Save
      </button>

      {saved && (
        <p className="text-sm text-green-600">
          Saved
        </p>
      )}
    </div>
  );
}