import type {CharacterData} from "../../../../../types/CharacterJson.ts";
import type {AttributeWithValue} from "../../../../../utils/loaders";
import {useState, useEffect} from 'react';
import {loadRace, loadProfession, loadAttributesWithValues} from "../../../../../utils/loaders";

export default function SheetHeader({jsonData}: { jsonData: CharacterData }) {
  const [raceName, setRaceName] = useState<string>(jsonData.r);
  const [professionName, setProfessionName] = useState<string>(jsonData.p);
  const [attributes, setAttributes] = useState<AttributeWithValue[]>([]);

  useEffect(() => {
    let isMounted = true;

    const loadData = async () => {
      try {
        // Load race and profession using the new loader functions
        const [race, profession] = await Promise.all([
          loadRace(jsonData.r),
          loadProfession(jsonData.p)
        ]);

        // Process attributes using the new loadAttributesWithValues function
        const loadedAttributes = await loadAttributesWithValues(jsonData.attr.values);

        if (isMounted) {
          setRaceName(race?.name || jsonData.r);
          // For profession, handle gendered name
          if (profession?.name) {
            setProfessionName(profession.name.m || profession.name.f || jsonData.p);
          } else {
            setProfessionName(jsonData.p);
          }
          // Set the attributes with their values, names, and short forms
          setAttributes(loadedAttributes);
        }
      } catch (error) {
        console.error('Error loading data:', error);
        if (isMounted) {
          setRaceName(jsonData.r);
          setProfessionName(jsonData.p);
        }
      }
    };

    loadData();

    return () => {
      isMounted = false;
    };
  }, [jsonData.r, jsonData.p, jsonData.attr]);

  console.log(jsonData)

  return (
      <>
        <div className="flex justify-between items-center py-5 px-5">
          <div className="w-[30%]">
            <p className="border-b border-gray-500 font-semibold">
              {jsonData.name}
            </p>
            <small>Name</small>
          </div>
          <div className="w-[30%]">
            <p className="border-b border-gray-500 font-semibold">
              {raceName}
            </p>
            <small>Spezies</small>
          </div>
          <div className="w-[30%]">
            <p className="border-b border-gray-500 font-semibold">
              {professionName}
            </p>
            <small>Profession</small>
          </div>
        </div>

        <div className="flex justify-between items-center py-3 px-10">
          <div className="w-[20%] h-[20%] rounded-full overflow-hidden">
            <img src="#" alt="char bild"/>
          </div>

          <div className="flex flex-col gap-2 w-[80%]">
            <div className="flex justify-between">
              {attributes.map(attr => (
                  <div key={attr.id} className="w-[10%] text-center">
                    <div className="font-bold">{attr.short}</div>
                    <div>{attr.value}</div>
                  </div>
              ))}
            </div>

            <div className="w-[100%] flex pt-5">
              <span className="relative group cursor-help">
                LP
                <span
                    className="absolute left-0 bottom-full mb-1 px-2 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">
                  Lebenspunkte
                </span>
              </span>
              <div
                  className="ms-5 w-[50%] bg-red-800 rounded-s-full h-6 flex items-center justify-center text-white text-sm font-medium">
                15 / 15
              </div>
              <div
                  className="me-5 w-[50%] bg-green-800 rounded-e-full h-6 flex items-center justify-center text-white text-sm font-medium">
                16 / 16
              </div>
              <span className="relative group cursor-help whitespace-nowrap">
                AP/KP
                <span
                    className="absolute right-0 bottom-full mb-1 px-2 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">
                  Astralpunkte / Karmapunkte
                </span>
              </span>
            </div>

            <div className="w-[100%] flex pt-5">
              <span className="w-[10%] relative group cursor-help">
                SP
                <span
                    className="absolute left-0 bottom-full mb-1 px-2 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">
                  Schicksalspunkte
                </span>
              </span>
              <div className="w-[90%] flex items-center gap-2">
                <div className="rounded-full w-5 h-5 bg-violet-400"></div>
                <div className="rounded-full w-5 h-5 bg-violet-400"></div>
                <div className="rounded-full w-5 h-5 bg-violet-400"></div>
              </div>
            </div>
          </div>
        </div>
      </>
  )
}
