"use client";

import { useConnections } from "@/api/hooks/reads";
import { Skeleton } from "@seed-design/react";
import { profileStrings } from "./strings";

/**
 * Read-only connected-banks list (Task 13 scope: NO connect/disconnect here —
 * that stays a mobile-only action per the brief). Mirrors the bank rows in
 * `ProfileView.swift`'s `banksCard`, minus the connect/disconnect chips.
 */
export function ConnectedBanks() {
  const { data: connections, isLoading } = useConnections();

  return (
    <section aria-labelledby="connected-banks-heading">
      <h2
        id="connected-banks-heading"
        style={{ fontSize: 12, color: "var(--seed-color-fg-subtle, #6b7280)", margin: "0 0 12px" }}
      >
        {profileStrings.banks.title}
      </h2>

      {isLoading && (
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          <Skeleton height="44px" />
          <Skeleton height="44px" />
        </div>
      )}

      {!isLoading && (!connections || connections.length === 0) && (
        <p style={{ fontSize: 14, color: "var(--seed-color-fg-muted, #6b7280)" }}>
          {profileStrings.banks.empty}
        </p>
      )}

      {!isLoading && connections && connections.length > 0 && (
        <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 4 }}>
          {connections.map((c) => (
            <li
              key={c.bank}
              style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "space-between",
                padding: "10px 0",
              }}
            >
              <div style={{ display: "flex", flexDirection: "column" }}>
                <span style={{ fontSize: 14, fontWeight: 600 }}>{c.bank}</span>
                <span style={{ fontSize: 12, color: "var(--seed-color-fg-muted, #6b7280)" }}>
                  {c.username}
                </span>
              </div>
              {c.courierManaged && (
                <span
                  style={{
                    fontSize: 11,
                    padding: "4px 8px",
                    borderRadius: 999,
                    background: "var(--seed-color-bg-layer-default)",
                    color: "var(--seed-color-fg-muted, #6b7280)",
                  }}
                >
                  {profileStrings.banks.courierManaged}
                </span>
              )}
            </li>
          ))}
        </ul>
      )}

      <p style={{ fontSize: 12, color: "var(--seed-color-fg-muted, #6b7280)", marginTop: 8 }}>
        {profileStrings.banks.manageNote}
      </p>
    </section>
  );
}