"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import toast from "react-hot-toast";

import StepShell from "@/app/components/astrologer/StepShell";
import PillMultiSelect from "@/app/components/astrologer/PillMultiSelect";
import { getMasterLanguages, updateLanguages, friendlyErrorMessage } from "@/app/lib/astrologer";

interface Option {
  id: number;
  label: string;
}

function extractList(response: any): any[] {
  const list =
    response?.data?.languages ??
    response?.data ??
    response?.languages ??
    response ??
    [];

  return Array.isArray(list) ? list : [];
}

function extractOptions(response: any): Option[] {
  return extractList(response).map((item: any) => ({
    id: item.id ?? item.language_id,
    label:
      item.language_name ??
      item.name ??
      item.language ??
      item.title ??
      String(item.id),
  }));
}

// Confirmed live: like master/skills, master/languages carries
// `is_selected` per option — pre-check whichever languages this
// astrologer already has saved.
function extractSelectedIds(response: any): number[] {
  return extractList(response)
    .filter((item: any) => item.is_selected)
    .map((item: any) => item.id ?? item.language_id);
}

export default function EditLanguagesPage() {
  const router = useRouter();

  const [options, setOptions] = useState<Option[]>([]);
  const [selected, setSelected] = useState<number[]>([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const token = localStorage.getItem("astrologerToken");

    if (!token) {
      router.replace("/astrologer/signin");
      return;
    }

    getMasterLanguages(token)
      .then((response) => {
        setOptions(extractOptions(response));
        setSelected(extractSelectedIds(response));
      })
      .catch(() => toast.error("Unable to load languages."));
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const handleSave = async () => {
    if (selected.length === 0) {
      toast.error("Choose at least one language");
      return;
    }

    const token = localStorage.getItem("astrologerToken");

    if (!token) {
      router.replace("/astrologer/signin");
      return;
    }

    try {
      setLoading(true);

      const response = await updateLanguages(selected, token);

      if (!response.success) {
        toast.error(friendlyErrorMessage(response.message, "Unable to save. Please try again."));
        return;
      }

      toast.success("Saved");

      router.push("/astrologer/profile");
    } catch (error: any) {
      toast.error(friendlyErrorMessage(error.response?.data?.message, "Something went wrong."));
    } finally {
      setLoading(false);
    }
  };

  return (
    <StepShell step={2} title="Choose Languages" mode="edit" loading={loading} onSave={handleSave}>
      <PillMultiSelect options={options} selectedIds={selected} onChange={setSelected} />
    </StepShell>
  );
}