"use client";

import { useConnections } from "@/api/hooks/reads";
import { Skeleton } from "@seed-design/react";
import { EmptyState, IconChip, SectionHeader } from "@/ds";
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();
  const empty = !isLoading && (!connections || connections.length === 0);

  return (
    <section aria-labelledby="connected-banks-heading">
      <div id="connected-banks-heading">
        <SectionHeader title={profileStrings.banks.title} />
      </div>

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

      {empty && (
        <EmptyState icon="bank" title={profileStrings.banks.empty} hint={profileStrings.banks.manageNote} compact />
      )}

      {!isLoading && connections && connections.length > 0 && (
        <>
          <ul style={{ listStyle: "none", margin: "8px 0 0", padding: 0, display: "flex", flexDirection: "column" }}>
            {connections.map((c) => (
              <li
                key={c.bank}
                style={{
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "space-between",
                  gap: 12,
                  padding: "10px 0",
                }}
              >
                <div style={{ display: "flex", alignItems: "center", gap: 12, minWidth: 0 }}>
                  <IconChip icon="bank" tint="var(--seed-color-bg-neutral-subtle, #eef0f2)" fg="var(--seed-color-fg-neutral)" />
                  <div style={{ display: "flex", flexDirection: "column", gap: 2, minWidth: 0 }}>
                    <span
                      style={{
                        fontSize: 15,
                        fontWeight: 700,
                        overflow: "hidden",
                        textOverflow: "ellipsis",
                        whiteSpace: "nowrap",
                      }}
                    >
                      {c.bank}
                    </span>
                    <span style={{ fontSize: 12, color: "var(--seed-color-fg-muted, #6b7280)" }}>{c.username}</span>
                  </div>
                </div>
                {c.courierManaged && (
                  <span
                    style={{
                      fontSize: 11,
                      padding: "4px 8px",
                      borderRadius: 999,
                      flexShrink: 0,
                      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>
  );
}