"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 { getMasterSkills, updateSkills, friendlyErrorMessage } from "@/app/lib/astrologer";

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

const FALLBACK_SKILLS: Option[] = [
  { id: 1, label: "Vedic Astrology" },
  { id: 2, label: "Numerology" },
  { id: 3, label: "Tarot" },
  { id: 4, label: "Palmistry" },
  { id: 5, label: "Vastu" },
  { id: 6, label: "KP System" },
  { id: 7, label: "Nadi" },
  { id: 8, label: "Face Reading" },
];

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

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

// Confirmed live: GET /astrologer/master/skills returns
// `data: [{ id, skill_name, is_selected }, ...]` — `is_selected` lets
// us pre-check whichever skills this astrologer already has saved.
function extractOptions(response: any): Option[] {
  const list = extractList(response);

  if (list.length === 0) return FALLBACK_SKILLS;

  return list.map((item: any) => ({
    id: item.id ?? item.skill_id,
    label:
      item.skill_name ?? item.name ?? item.skill ?? item.title ?? String(item.id),
  }));
}

function extractSelectedIds(response: any): number[] {
  return extractList(response)
    .filter((item: any) => item.is_selected)
    .map((item: any) => item.id ?? item.skill_id);
}

export default function EditSkillsPage() {
  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;
    }

    getMasterSkills(token)
      .then((response) => {
        setOptions(extractOptions(response));
        setSelected(extractSelectedIds(response));
      })
      .catch(() => setOptions(FALLBACK_SKILLS));
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

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

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

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

    try {
      setLoading(true);

      const response = await updateSkills(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={3} title="Choose Skills" mode="edit" loading={loading} onSave={handleSave}>
      <PillMultiSelect options={options} selectedIds={selected} onChange={setSelected} />
    </StepShell>
  );
}