"use client";

import { useState } from "react";
import type { BranchStock, ProductVariant } from "@/types";
import { useLanguage } from "@/lib/language-context";
import ColorSwatch from "@/components/ui/ColorSwatch";

interface BranchAvailabilityProps {
  branches: BranchStock[];
  enableReservations: boolean;
  selectedVariant?: ProductVariant | null;
  onReserve?: (branchId: number, branchName: string) => void;
}

export default function BranchAvailability({
  branches,
  enableReservations,
  selectedVariant,
  onReserve,
}: BranchAvailabilityProps) {
  const { t } = useLanguage();
  const [open, setOpen] = useState(false);

  if (!branches || branches.length === 0) return null;

  return (
    <div className="border border-gray-200 rounded-2xl overflow-hidden">
      {/* Header / toggle */}
      <button
        type="button"
        onClick={() => setOpen((v) => !v)}
        className="w-full flex items-center justify-between px-5 py-4 bg-gray-50 hover:bg-gray-100 transition-colors text-left"
      >
        <div className="flex items-center gap-2.5">
          <svg
            className="w-5 h-5 text-gray-500 flex-shrink-0"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            strokeWidth={1.75}
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
            />
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
            />
          </svg>
          <span className="text-sm font-semibold text-gray-800">
            {t.product.checkAvailability}
          </span>
        </div>
        <svg
          className={`w-4 h-4 text-gray-400 transition-transform ${
            open ? "rotate-180" : ""
          }`}
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          strokeWidth={2}
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            d="M19 9l-7 7-7-7"
          />
        </svg>
      </button>

      {/* Branch list */}
      {open && (
        <div className="divide-y divide-gray-100">
          {branches.map((branch) => {
            // If a variant is selected, show only that variant's stock at this branch
            const variantsToShow = selectedVariant
              ? branch.variants.filter((v) => v.item_id === selectedVariant.id)
              : branch.variants;

            // Overall branch availability for the selected variant (or any variant)
            const branchInStock = variantsToShow.some((v) => v.in_stock);
            const totalAvailable = variantsToShow.reduce(
              (sum, v) => sum + v.available_qty,
              0,
            );

            return (
              <div key={branch.branch_id} className="px-5 py-4">
                <div className="flex items-center justify-between gap-3 mb-3">
                  <div className="flex items-center gap-2">
                    <span className="text-sm font-semibold text-gray-800">
                      {branch.branch_name}
                    </span>
                    <span
                      className={`inline-flex items-center gap-1 text-xs font-medium px-2 py-0.5 rounded-full ${
                        branchInStock
                          ? "bg-green-50 text-green-700"
                          : "bg-gray-100 text-gray-500"
                      }`}
                    >
                      <span
                        className={`w-1.5 h-1.5 rounded-full ${
                          branchInStock ? "bg-green-500" : "bg-gray-400"
                        }`}
                      />
                      {branchInStock ? t.product.inStock : t.product.outOfStock}
                    </span>
                  </div>

                  {enableReservations && branchInStock && onReserve && (
                    <button
                      type="button"
                      onClick={() =>
                        onReserve(branch.branch_id, branch.branch_name)
                      }
                      className="text-xs font-semibold px-3 py-1.5 rounded-lg border-2 transition-all"
                      style={{
                        borderColor: "var(--color-primary)",
                        color: "var(--color-primary)",
                      }}
                      onMouseEnter={(e) => {
                        (
                          e.currentTarget as HTMLButtonElement
                        ).style.backgroundColor = "var(--color-primary)";
                        (e.currentTarget as HTMLButtonElement).style.color =
                          "#fff";
                      }}
                      onMouseLeave={(e) => {
                        (
                          e.currentTarget as HTMLButtonElement
                        ).style.backgroundColor = "transparent";
                        (e.currentTarget as HTMLButtonElement).style.color =
                          "var(--color-primary)";
                      }}
                    >
                      {t.product.reserve}
                    </button>
                  )}
                </div>

                {/* Variant breakdown table */}
                {variantsToShow.length > 0 && (
                  <div className="overflow-x-auto">
                    <table className="w-full text-xs text-left">
                      <thead>
                        <tr className="text-gray-400 uppercase tracking-wide">
                          {variantsToShow.some((v) => v.color) && (
                            <th className="pb-1.5 pr-4 font-semibold">
                              {t.product.color}
                            </th>
                          )}
                          {variantsToShow.some((v) => v.size) && (
                            <th className="pb-1.5 pr-4 font-semibold">
                              {t.product.size}
                            </th>
                          )}
                          <th className="pb-1.5 font-semibold">
                            {t.product.availableQty}
                          </th>
                        </tr>
                      </thead>
                      <tbody className="divide-y divide-gray-50">
                        {variantsToShow.map((v) => (
                          <tr key={v.item_id}>
                            {variantsToShow.some((x) => x.color) && (
                              <td className="py-1.5 pr-4 text-gray-700">
                                {v.color ? (
                                  <ColorSwatch
                                    name={v.color.name}
                                    hex={v.color.hex ?? v.color.code}
                                    size="sm"
                                  />
                                ) : (
                                  "—"
                                )}
                              </td>
                            )}
                            {variantsToShow.some((x) => x.size) && (
                              <td className="py-1.5 pr-4 text-gray-700">
                                {v.size?.name ?? "—"}
                              </td>
                            )}
                            <td className="py-1.5">
                              <span
                                className={`font-semibold ${
                                  v.in_stock
                                    ? "text-green-600"
                                    : "text-gray-400"
                                }`}
                              >
                                {v.in_stock
                                  ? v.available_qty
                                  : t.product.outOfStock}
                              </span>
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                )}

                {/* Show total when a variant is selected */}
                {selectedVariant && totalAvailable > 0 && (
                  <p className="text-xs text-gray-500 mt-2">
                    {t.product.totalAvailable.replace(
                      "{{count}}",
                      String(totalAvailable),
                    )}
                  </p>
                )}
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}