import { useState, useEffect } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { useQuery } from "@tanstack/react-query";
import { motion } from "framer-motion";
import { Save, Loader2 } from "lucide-react";

import AdminLayout from "@/components/pc/admin/layout/Layout";
import Toast from "@/components/common/Toast";
import { useToast } from "@/hooks/common";
import { useAdminAuth } from "@/hooks/pc/admin";
import { getMembers } from "@/api/public/members";
import { getAlbums } from "@/api/public/albums";
import { getConcertSchedule, updateConcertSchedule } from "@/api/admin/concert";

import ConcertInfoSection from "../form/concert/ConcertInfoSection";
import ScheduleSection from "../form/concert/ScheduleSection";
import SetlistSection from "../form/concert/SetlistSection";
import MerchandiseSection from "../form/concert/MerchandiseSection";

/**
 * 콘서트 일정 수정 폼
 */
function ConcertEditForm() {
  const { seriesId } = useParams();
  const navigate = useNavigate();
  const { toast, setToast } = useToast();
  const { isAuthenticated } = useAdminAuth();

  // 멤버/앨범 데이터
  const { data: membersData = [] } = useQuery({
    queryKey: ["members"],
    queryFn: getMembers,
    enabled: isAuthenticated,
    staleTime: 5 * 60 * 1000,
  });
  const members = membersData.filter((m) => !m.is_former);

  const { data: albumsData = [] } = useQuery({
    queryKey: ["albums"],
    queryFn: getAlbums,
    enabled: isAuthenticated,
    staleTime: 5 * 60 * 1000,
  });

  // 기존 데이터 로드
  const { data: concertData, isLoading: isLoadingConcert } = useQuery({
    queryKey: ["concert", seriesId],
    queryFn: () => getConcertSchedule(seriesId),
    enabled: isAuthenticated && !!seriesId,
  });

  // 폼 상태
  const [title, setTitle] = useState("");
  const [posterFile, setPosterFile] = useState(null);
  const [posterPreview, setPosterPreview] = useState(null);
  const [selectedMemberIds, setSelectedMemberIds] = useState([]);
  const [rounds, setRoundsRaw] = useState([]);
  const [setlists, setSetlists] = useState({});
  const [merchandiseItems, setMerchandiseItems] = useState([]);
  const [saving, setSaving] = useState(false);
  const [initialized, setInitialized] = useState(false);

  // 기존 데이터로 초기화
  useEffect(() => {
    if (concertData && !initialized) {
      setTitle(concertData.title || "");
      setPosterPreview(concertData.posterUrl || null);
      setSelectedMemberIds(concertData.memberIds || []);
      setRoundsRaw(concertData.rounds || []);
      setSetlists(concertData.setlists || {});
      setMerchandiseItems(
        (concertData.merchandise || []).map((m) => ({
          id: m.id,
          existingId: m.id,
          preview: m.thumbUrl || m.mediumUrl,
          file: null,
        }))
      );
      setInitialized(true);
    }
  }, [concertData, initialized]);

  // 회차 변경 시 세트리스트 동기화
  const setRounds = (updater) => {
    setRoundsRaw((prev) => {
      const newRounds = typeof updater === "function" ? updater(prev) : updater;

      setSetlists((prevSetlists) => {
        const updated = { ...prevSetlists };
        for (const round of newRounds) {
          if (!updated[round.id]) {
            const lastRound = prev[prev.length - 1];
            const source = prevSetlists[lastRound?.id] || [
              { id: 1, songName: "", albumName: "", memberIds: [] },
            ];
            let maxId = Object.values(updated)
              .flat()
              .reduce((max, s) => Math.max(max, s.id || 0), 0);
            updated[round.id] = source.map((s) => ({
              ...s,
              id: ++maxId,
              memberIds: [...s.memberIds],
            }));
          }
        }
        const roundIds = new Set(newRounds.map((r) => r.id));
        for (const key of Object.keys(updated)) {
          if (!roundIds.has(Number(key))) {
            delete updated[key];
          }
        }
        return updated;
      });

      return newRounds;
    });
  };

  // 멤버 토글
  const toggleMember = (memberId) => {
    setSelectedMemberIds((prev) =>
      prev.includes(memberId)
        ? prev.filter((id) => id !== memberId)
        : [...prev, memberId]
    );
  };

  const toggleAllMembers = () => {
    if (selectedMemberIds.length === members.length) {
      setSelectedMemberIds([]);
    } else {
      setSelectedMemberIds(members.map((m) => m.id));
    }
  };

  // 포스터
  const handlePosterChange = (file) => {
    setPosterFile(file);
    const reader = new FileReader();
    reader.onloadend = () => setPosterPreview(reader.result);
    reader.readAsDataURL(file);
  };

  const handlePosterRemove = () => {
    setPosterFile(null);
    setPosterPreview(null);
  };

  // 폼 제출
  const handleSubmit = async (e) => {
    e.preventDefault();

    if (!title.trim()) {
      setToast({ type: "error", message: "공연명을 입력해주세요." });
      return;
    }

    const validRounds = rounds.filter((r) => r.date);
    if (validRounds.length === 0) {
      setToast({ type: "error", message: "최소 1개 이상의 공연 일정이 필요합니다." });
      return;
    }

    setSaving(true);

    try {
      const formData = new FormData();
      formData.append("title", title.trim());
      formData.append("memberIds", JSON.stringify(selectedMemberIds));

      if (posterFile) {
        formData.append("poster", posterFile);
      }

      const roundsData = validRounds.map((r) => ({
        date: r.date,
        time: r.time || null,
        venueId: r.venue?.id || null,
        venueName: r.venue?.name || null,
        venueCountry: r.venue?.country || null,
        venueAddress: r.venue?.address || null,
        venueLat: r.venue?.lat || null,
        venueLng: r.venue?.lng || null,
      }));
      formData.append("rounds", JSON.stringify(roundsData));

      // 회차별 세트리스트
      const setlistsData = validRounds.map((r) => {
        const roundSetlist = setlists[r.id] || [];
        return roundSetlist
          .filter((s) => s.songName?.trim())
          .map((s) => ({
            songName: s.songName.trim(),
            albumName: s.albumName?.trim() || null,
            memberIds: s.memberIds || [],
          }));
      });
      formData.append("setlists", JSON.stringify(setlistsData));

      // 기존 유지할 굿즈 ID
      const keepIds = merchandiseItems
        .filter((item) => item.existingId && !item.file)
        .map((item) => item.existingId);
      formData.append("keepMerchandiseIds", JSON.stringify(keepIds));

      // 새 굿즈 파일
      merchandiseItems.forEach((item) => {
        if (item.file) {
          formData.append("merchandise", item.file);
        }
      });

      await updateConcertSchedule(seriesId, formData);

      setToast({ type: "success", message: "콘서트 일정이 수정되었습니다." });
      setTimeout(() => navigate("/admin/schedule"), 1000);
    } catch (err) {
      console.error("콘서트 수정 실패:", err);
      setToast({ type: "error", message: err.message || "수정에 실패했습니다." });
    } finally {
      setSaving(false);
    }
  };

  if (isLoadingConcert) {
    return (
      <AdminLayout>
        <div className="flex items-center justify-center h-64">
          <Loader2 className="w-8 h-8 text-primary animate-spin" />
        </div>
      </AdminLayout>
    );
  }

  return (
    <AdminLayout>
      <Toast toast={toast} onClose={() => setToast(null)} />

      <motion.form
        initial={{ opacity: 0, y: 12 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.4, ease: [0.25, 0.1, 0.25, 1] }}
        onSubmit={handleSubmit}
        className="space-y-6 max-w-4xl mx-auto px-6 py-8"
      >
        <ConcertInfoSection
          title={title}
          setTitle={setTitle}
          posterPreview={posterPreview}
          onPosterChange={handlePosterChange}
          onPosterRemove={handlePosterRemove}
          members={members}
          selectedMemberIds={selectedMemberIds}
          onToggleMember={toggleMember}
          onToggleAllMembers={toggleAllMembers}
        />

        <ScheduleSection rounds={rounds} setRounds={setRounds} />

        <MerchandiseSection
          items={merchandiseItems}
          setItems={setMerchandiseItems}
        />

        <SetlistSection
          rounds={rounds}
          setlists={setlists}
          setSetlists={setSetlists}
          members={members}
          selectedMemberIds={selectedMemberIds}
          albums={albumsData}
        />

        <div className="flex items-center justify-end gap-4">
          <button
            type="button"
            onClick={() => navigate("/admin/schedule")}
            className="px-6 py-2.5 text-gray-600 hover:text-gray-900 transition-colors"
          >
            취소
          </button>
          <button
            type="submit"
            disabled={saving}
            className="flex items-center gap-2 px-6 py-2.5 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors disabled:opacity-50"
          >
            {saving ? (
              <>
                <span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                수정 중...
              </>
            ) : (
              <>
                <Save size={18} />
                수정
              </>
            )}
          </button>
        </div>
      </motion.form>
    </AdminLayout>
  );
}

export default ConcertEditForm;
