/* Tachiara client — Rooms list screen. */

// useApi: load data on mount + manual reload trigger.
// On refetch (reload, polling, focus), KEEP showing the existing data and
// only flip `refreshing` so the UI stays still — no flicker. `loading` is
// only true on the very first fetch (when there's no data yet to show).
function useApi(loader, deps) {
  const [data, setData] = React.useState(null);
  const [error, setError] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [refreshing, setRefreshing] = React.useState(false);
  const [tick, setTick] = React.useState(0);

  // Keep latest `data` accessible inside effect without re-running effect on data change.
  const hasDataRef = React.useRef(false);

  React.useEffect(() => {
    let cancelled = false;
    if (hasDataRef.current) setRefreshing(true);
    else setLoading(true);
    loader()
      .then((d) => {
        if (cancelled) return;
        setData(d); setError(null);
        setLoading(false); setRefreshing(false);
        hasDataRef.current = true;
      })
      .catch((err) => {
        if (cancelled) return;
        setError(err.message || String(err));
        setLoading(false); setRefreshing(false);
      });
    return () => { cancelled = true; };
  }, [...(deps || []), tick]);

  const reload = React.useCallback(() => setTick((t) => t + 1), []);
  return { data, loading, refreshing, error, reload };
}
window.useApi = useApi;

function LoadingState({ label = "Đang tải..." }) {
  return (
    <div style={{ padding: 48, textAlign: "center", color: "var(--wf-fg-muted)", fontSize: 14 }}>
      {label}
    </div>
  );
}
window.LoadingState = LoadingState;

function ErrorState({ error, onRetry }) {
  return (
    <div style={{ padding: 24, textAlign: "center" }}>
      <div style={{ color: "var(--danger)", marginBottom: 12, fontSize: 14 }}>{error}</div>
      {onRetry && <Button variant="secondary" onClick={onRetry}>Thử lại</Button>}
    </div>
  );
}
window.ErrorState = ErrorState;


function RoomsScreen({ me, navigate }) {
  const [showCreate, setShowCreate] = React.useState(false);
  const [showJoin, setShowJoin] = React.useState(false);

  const { data, loading, error, reload } = useApi(() => window.api.rooms.list(), []);

  return (
    <div>
      <div className="page-header">
        <div>
          <h1 className="page-title">Phòng của tui</h1>
          <div className="page-subtitle">
            {data ? `${data.rooms.length} phòng đang hoạt động` : "Đang tải..."}
          </div>
        </div>
        <div className="row-h" style={{ gap: 8 }}>
          <Button variant="secondary" icon={<I.doorOpen />} onClick={() => setShowJoin(true)}>
            Vào phòng có mã
          </Button>
          <Button variant="dark" icon={<I.plus />} onClick={() => setShowCreate(true)}>
            Tạo phòng mới
          </Button>
        </div>
      </div>

      {loading && <LoadingState />}
      {error && <ErrorState error={error} onRetry={reload} />}

      {data && data.rooms.length === 0 && (
        <Empty
          icon={<I.users />}
          title="Bạn chưa có phòng nào"
          action={<Button variant="primary" icon={<I.plus />} onClick={() => setShowCreate(true)}>Tạo phòng đầu tiên</Button>}
        >
          Tạo phòng để chia tiền với bạn bè cho chuyến đi tiếp theo.
        </Empty>
      )}

      {data && data.rooms.length > 0 && (
        <div className="grid-stats" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))" }}>
          {data.rooms.map(room => {
            const myBal = room.myBalance || 0;
            return (
              <div key={room.id} className="card card-hover" onClick={() => navigate({ screen: "room", roomId: room.id })}>
                <div className="row-h-between">
                  <div className="badge badge-outline">{room.code}</div>
                  <div className="text-xs text-muted">{window.QC.timeAgo(room.createdAt)}</div>
                </div>
                <div style={{ marginTop: 10, fontWeight: 700, fontSize: 17, letterSpacing: "-0.01em" }}>
                  {room.name}
                </div>
                {room.description && (
                  <div className="text-sm text-muted" style={{ marginTop: 2, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
                    {room.description}
                  </div>
                )}
                <hr className="divider" />
                <div className="row-h-between" style={{ alignItems: "flex-start" }}>
                  <div>
                    <div className="text-xs text-muted">Tổng chi · {room.billCount} bill</div>
                    <div className="fw-700" style={{ fontSize: 18, marginTop: 2, fontVariantNumeric: "tabular-nums" }}>
                      {window.QC.formatVND(room.totalSpent || 0)}
                    </div>
                  </div>
                  <div style={{ textAlign: "right" }}>
                    <div className="text-xs text-muted">
                      {myBal > 100 ? "Bạn được trả" : myBal < -100 ? "Bạn nợ" : "Đã cân"}
                    </div>
                    <div className={"money " + (myBal > 100 ? "money-positive" : myBal < -100 ? "money-negative" : "money-zero")}
                         style={{ fontSize: 18, marginTop: 2 }}>
                      {Math.abs(myBal) < 100 ? "0 ₫" : window.QC.formatVND(Math.abs(myBal))}
                    </div>
                  </div>
                </div>
                <hr className="divider" />
                <div className="row-h-between">
                  <div className="text-xs text-muted">{room.memberIds.length} thành viên</div>
                </div>
              </div>
            );
          })}
        </div>
      )}

      <CreateRoomModal open={showCreate} onClose={() => setShowCreate(false)}
                       onCreated={(r) => { reload(); navigate({ screen: "room", roomId: r.id }); }} />
      <JoinRoomModal open={showJoin} onClose={() => setShowJoin(false)}
                     onJoined={(r) => { reload(); navigate({ screen: "room", roomId: r.id }); }} />
    </div>
  );
}

function CreateRoomModal({ open, onClose, onCreated }) {
  const [name, setName] = React.useState("");
  const [desc, setDesc] = React.useState("");
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState("");
  const toast = useToast();

  React.useEffect(() => {
    if (open) { setName(""); setDesc(""); setError(""); }
  }, [open]);

  const submit = async () => {
    if (!name.trim()) return;
    setSubmitting(true); setError("");
    try {
      const { room } = await window.api.rooms.create({ name: name.trim(), description: desc.trim() });
      toast("Đã tạo phòng");
      onClose();
      onCreated(room);
    } catch (err) {
      setError(err.message);
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <Modal open={open} onClose={onClose} title="Tạo phòng mới"
           footer={<>
             <Button variant="ghost" onClick={onClose}>Huỷ</Button>
             <Button variant="primary" onClick={submit} disabled={!name.trim() || submitting}>
               {submitting ? "Đang tạo..." : "Tạo phòng"}
             </Button>
           </>}>
      <div className="stack stack-md">
        <Field label="Tên phòng" hint='Ví dụ: "Đà Lạt 3N2Đ", "Sinh nhật Linh"' error={error}>
          <input className="input" value={name} onChange={e => setName(e.target.value)}
                 placeholder="Đặt tên cho chuyến đi" autoFocus />
        </Field>
        <Field label="Mô tả (tuỳ chọn)">
          <textarea className="textarea" value={desc} onChange={e => setDesc(e.target.value)}
                    placeholder="Ngắn gọn thôi — ai, khi nào, vì sao" />
        </Field>
        <div style={{ background: "var(--wf-bg-subtle)", padding: 12, borderRadius: "var(--r-md)", fontSize: 13, color: "var(--wf-fg-muted)" }}>
          Sau khi tạo, bạn sẽ nhận được mã 6 ký tự để mời thành viên khác.
        </div>
      </div>
    </Modal>
  );
}

function JoinRoomModal({ open, onClose, onJoined }) {
  const [code, setCode] = React.useState("");
  const [error, setError] = React.useState("");
  const [submitting, setSubmitting] = React.useState(false);
  const toast = useToast();

  React.useEffect(() => {
    if (open) { setCode(""); setError(""); }
  }, [open]);

  const submit = async () => {
    const c = code.trim().toUpperCase();
    if (!c) return;
    setSubmitting(true); setError("");
    try {
      const { room } = await window.api.rooms.joinByCode(c);
      toast("Đã vào phòng " + room.name);
      onClose();
      onJoined(room);
    } catch (err) {
      setError(err.message);
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <Modal open={open} onClose={onClose} title="Vào phòng bằng mã"
           footer={<>
             <Button variant="ghost" onClick={onClose}>Huỷ</Button>
             <Button variant="primary" onClick={submit} disabled={!code.trim() || submitting}>
               {submitting ? "Đang vào..." : "Vào phòng"}
             </Button>
           </>}>
      <div className="stack stack-md">
        <Field label="Mã phòng" hint="Mã 6 ký tự bạn nhận được từ người tạo phòng" error={error}>
          <input className="input mono" value={code}
                 onChange={e => { setCode(e.target.value.toUpperCase()); setError(""); }}
                 placeholder="VD: DLT9K2"
                 style={{ fontSize: 18, letterSpacing: "0.1em", textTransform: "uppercase" }}
                 autoFocus />
        </Field>
      </div>
    </Modal>
  );
}

Object.assign(window, { RoomsScreen, CreateRoomModal, JoinRoomModal });