import { INK, RED, SKY, MUTE, FONT_MONO, FONT_SERIF } from "../../theme";
import { fmtDate } from "../../lib/dates";
import AirmailEdge from "../../components/AirmailEdge";
import EmptyState from "../../components/EmptyState";
import Notice from "../../components/Notice";

/* Postvak: overzicht van correspondenties; favorieten (★) bovenaan, daarbinnen nieuwste eerst (de server sorteert).
   threads = [{ user, last, letterCount, unread, favorite }] */
export default function InboxView({ meId, threads, loading, error, onRetry, onOpen }) {
  return (
    <main className="app-main">
      <Notice loading={loading} error={error} onRetry={onRetry} />
      {!loading && !error && threads.length === 0 && (
        <EmptyState title="Je postvak is leeg.">Zoek een profiel en schrijf je eerste brief.</EmptyState>
      )}
      {threads.map(({ user, last, letterCount, unread, favorite }) => (
        <button
          key={user.id}
          onClick={() => onOpen(user.id)}
          aria-label={`Correspondentie met ${user.name}${favorite ? ", favoriet" : ""}${unread ? `, ${unread} nieuw` : ""}`}
          style={{
            display: "block", width: "100%", textAlign: "left", border: `2px solid ${unread ? RED : INK}`,
            background: unread ? "#fff" : SKY, padding: 0, marginBottom: 14, color: INK,
          }}
        >
          <AirmailEdge h={6} />
          <div style={{ padding: "12px 16px", display: "flex", gap: 12, alignItems: "center" }}>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
                <strong style={{ fontSize: 17 }}>
                  {favorite && <span aria-hidden="true" style={{ color: RED, marginRight: 6 }}>★</span>}
                  {user.name}
                </strong>
                <span style={{ fontFamily: FONT_MONO, fontSize: 10, color: MUTE }}>
                  {letterCount === 1 ? "1 brief" : `${letterCount} brieven`}
                </span>
                {unread > 0 && (
                  <span style={{ fontFamily: FONT_MONO, fontSize: 10, color: RED, fontWeight: 700 }}>
                    ● {unread} nieuw
                  </span>
                )}
              </div>
              <p
                style={{
                  margin: "4px 0 0", fontFamily: FONT_SERIF, fontSize: 14, color: INK,
                  whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis",
                  opacity: unread ? 1 : 0.75, fontWeight: unread ? 500 : 400,
                }}
              >
                {last.from === meId ? "Jij: " : ""}
                {last.text}
              </p>
            </div>
            <span style={{ fontFamily: FONT_MONO, fontSize: 10, color: MUTE }}>{fmtDate(last.date)}</span>
          </div>
        </button>
      ))}
    </main>
  );
}