import {
  ExclamationTriangleIcon,
  CheckCircleIcon,
} from "@heroicons/react/24/outline";
import type { UnmatchedProperty } from "@/lib/properties/unmatched";
import MatchAddress from "./MatchAddress";

// The "Needs attention" tab: properties with no UPRN, separated out of the main
// table until they're matched. Each row lets the user correct the address /
// postcode (UPRN matching is a later step).
export default function UnmatchedProperties({
  properties,
  portfolioId,
}: {
  properties: UnmatchedProperty[];
  portfolioId: string;
}) {
  const count = properties.length;

  if (count === 0) {
    return (
      <div className="rounded-2xl border border-gray-100 bg-white px-6 py-16 text-center shadow-sm">
        <CheckCircleIcon className="mx-auto h-9 w-9 text-emerald-500" />
        <p className="mt-3 text-sm font-semibold text-gray-700">
          All properties are matched
        </p>
        <p className="mt-1 text-xs text-gray-400">
          Every property has a UPRN — nothing needs attention.
        </p>
      </div>
    );
  }

  return (
    <section
      aria-label="Properties without a UPRN"
      className="overflow-hidden rounded-2xl border border-amber-200 bg-amber-50 shadow-sm"
    >
      <div className="flex items-start gap-3 border-b border-amber-100 px-6 py-4">
        <ExclamationTriangleIcon className="mt-0.5 h-5 w-5 shrink-0 text-amber-500" />
        <div className="min-w-0">
          <div className="flex items-center gap-2">
            <h2 className="text-sm font-bold text-amber-900">
              Properties without a UPRN
            </h2>
            <span className="inline-flex items-center rounded-full bg-amber-200/70 px-2 py-0.5 text-xs font-semibold text-amber-800">
              {count}
            </span>
          </div>
          <p className="mt-0.5 max-w-xl text-xs text-amber-700">
            {count === 1 ? "This property" : "These properties"} couldn&apos;t be
            matched by AraAddressMatcher automatically. Double check the{" "}
            {count === 1 ? "address" : "addresses"} and Ara will try again with
            AraAddressMatcherPlus.
          </p>
        </div>
      </div>

      <div className="bg-white">
        <div className="grid grid-cols-12 gap-3 border-b border-gray-100 bg-gray-50/80 px-6 py-2 text-[11px] font-semibold uppercase tracking-wider text-gray-500">
          <div className="col-span-6">Address</div>
          <div className="col-span-3">Postcode</div>
          <div className="col-span-3 text-right">Action</div>
        </div>

        <ul className="divide-y divide-gray-50">
          {properties.map((p) => (
            <li
              key={p.id}
              className="grid grid-cols-12 items-center gap-3 px-6 py-3"
            >
              <p
                className="col-span-6 truncate text-sm text-gray-800"
                title={p.address ?? undefined}
              >
                {p.address ?? (
                  <span className="italic text-gray-400">No address</span>
                )}
              </p>
              <p className="col-span-3 text-sm text-gray-600">
                {p.postcode ?? <span className="text-gray-400">—</span>}
              </p>
              <div className="col-span-3 flex justify-end">
                <MatchAddress property={p} portfolioId={portfolioId} />
              </div>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}
