"use client";
import React, { useTransition, useState } from "react";
import { useRouter } from "next/navigation";
import { Company } from "./types";
import { LoginEmployeeProps } from "./types";
import { selectEmployeeHook } from "./hook";

function LoginEmployee({
  selectionList,
  translation,
  lang
}: LoginEmployeeProps) {
  const isArrayLengthOne = Array.isArray(selectionList) && selectionList.length === 1;
  const isArrayLengthZero = Array.isArray(selectionList) && selectionList.length === 0;
  const isArrayMoreThanOne = Array.isArray(selectionList) && selectionList.length > 1;
  const Router = useRouter();

  const [isPending, startTransition] = useTransition();
  const [error, setError] = useState<string | null>(null);
  const [jsonText, setJsonText] = useState<string | null>(null);

  const onSubmitEmployee = async (uu_id: string) => {
    selectEmployeeHook(startTransition, { company_uu_id: uu_id }, setError, setJsonText, Router, lang)
  };

  // Render a company card with consistent styling
  const CompanyCard = ({ company, showButton = false }: { company: Company, showButton?: boolean }) => (
    <div className="w-full p-4 mb-4 bg-white border border-gray-200 rounded-lg shadow-sm hover:shadow-md transition-all">
      <div className="flex flex-col" onClick={() => onSubmitEmployee(company.uu_id)}>
        {/* Company name and type */}
        <div className="flex items-center mb-2">
          <h3 className="text-xl font-semibold text-gray-800">{company.public_name}</h3>
          {company.company_type && (
            <span className="ml-2 px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded-full">
              {company.company_type}
            </span>
          )}
        </div>

        {/* Duty information */}
        {company.duty && (
          <div className="mb-2 text-sm text-gray-600">
            <span className="font-medium">{translation.duty}:</span> {company.duty}
          </div>
        )}

        {/* ID information */}
        <div className="text-xs text-gray-500 mb-3">
          <span className="font-medium">{translation.id}:</span> {company.uu_id}
        </div>

      </div>
    </div>
  );

  return (
    <div className="w-full max-w-md mx-auto">
      <h1 className="text-2xl font-bold text-gray-900 mb-2">{translation.companySelection}</h1>
      <p className="text-sm text-gray-500 mb-6">{translation.loggedInAs}</p>

      {/* No companies available */}
      {isArrayLengthZero && (
        <div className="text-center p-6 bg-gray-50 rounded-lg border border-gray-200">
          <p className="text-gray-600">{translation.noSelections}</p>
        </div>
      )}

      {/* Single company */}
      {isArrayLengthOne && <CompanyCard company={selectionList[0]} showButton={true} />}

      {/* Multiple companies */}
      {isArrayMoreThanOne && (
        <div className="space-y-3">
          {selectionList.map((company, index) => (
            <div
              key={company.uu_id || index}
              onClick={() => onSubmitEmployee(company.uu_id)}
              className="cursor-pointer hover:translate-x-1 transition-transform"
            >
              <CompanyCard company={company} />
            </div>
          ))}
        </div>
      )}

      {/* Show error if any */}
      {error && <p className="mt-4 text-sm text-red-600">{error}</p>}

      {/* Loading indicator */}
      {isPending && (
        <div className="mt-4 flex justify-center">
          <div className="animate-spin h-5 w-5 border-2 border-blue-600 rounded-full border-t-transparent"></div>
        </div>
      )}
    </div>
  );
}

export default LoginEmployee;
