"use client";

import { useState, useEffect } from "react";
import ManagePageSkeleton from "@/components/shared/manage-page-skeleton";

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

interface EnjoyEntry {
  enjoy_id: number;
  cost: number;
}

export default function ServicesOfferedPage() {
  const [selectedOffers, setSelectedOffers] = useState<Set<number>>(new Set());
  const [enjoys, setEnjoys] = useState<EnjoyEntry[]>([]);
  const [saving, setSaving] = useState(false);
  const [loading, setLoading] = useState(true);
  const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
  const [offerOptions, setOfferOptions] = useState<Option[]>([]);
  const [enjoyOptions, setEnjoyOptions] = useState<Option[]>([]);

  useEffect(() => {
    Promise.all([
      fetch("/api/onboarding/options").then((r) => r.json()),
      fetch("/api/profile/services").then((r) => r.json()),
      fetch("/api/profile/enjoys").then((r) => r.json()),
    ])
      .then(([opts, servicesData, enjoysData]) => {
        setOfferOptions(opts.offers || []);
        setEnjoyOptions(opts.enjoys || []);

        // Set selected offers
        const offerIds = (servicesData.offers || []).map((o: Option) => o.id);
        setSelectedOffers(new Set(offerIds));

        // Set enjoys with costs
        const enjoyEntries = (enjoysData.enjoys || []).map(
          (eu: { enjoy_id: number; cost: number | string }) => ({
            enjoy_id: eu.enjoy_id,
            cost: Number(eu.cost) || 0,
          })
        );
        setEnjoys(enjoyEntries);
      })
      .finally(() => setLoading(false));
  }, []);

  function toggleOffer(id: number) {
    setSelectedOffers((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  }

  function toggleEnjoy(id: number) {
    setEnjoys((prev) => {
      const existing = prev.find((e) => e.enjoy_id === id);
      if (existing) {
        return prev.filter((e) => e.enjoy_id !== id);
      }
      return [...prev, { enjoy_id: id, cost: 0 }];
    });
  }

  function updateEnjoyCost(enjoyId: number, cost: number) {
    setEnjoys((prev) =>
      prev.map((e) => (e.enjoy_id === enjoyId ? { ...e, cost } : e))
    );
  }

  async function handleSave() {
    setSaving(true);
    setMessage(null);
    try {
      const [servicesRes, enjoysRes] = await Promise.all([
        fetch("/api/profile/services", {
          method: "PUT",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ offer_ids: Array.from(selectedOffers) }),
        }),
        fetch("/api/profile/enjoys", {
          method: "PUT",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ enjoys }),
        }),
      ]);

      if (!servicesRes.ok || !enjoysRes.ok) throw new Error("Failed to save");
      setMessage({ type: "success", text: "Services and enjoys updated successfully." });
    } catch {
      setMessage({ type: "error", text: "Failed to update services." });
    } finally {
      setSaving(false);
    }
  }

  if (loading) return <ManagePageSkeleton />;

  const selectedEnjoyIds = new Set(enjoys.map((e) => e.enjoy_id));

  return (
    <div className="max-w-2xl mx-auto">
      <h1 className="text-3xl font-bold text-text mb-6">Services Offered</h1>

      <div className="bg-surface rounded-lg p-6 space-y-6">
        {message && (
          <div className={`p-3 rounded-lg text-sm ${message.type === "success" ? "bg-green-900/30 text-green-400" : "bg-red-900/30 text-red-400"}`}>
            {message.text}
          </div>
        )}

        <div>
          <h2 className="text-lg font-semibold text-text mb-3">Offers</h2>
          <div className="flex flex-wrap gap-2">
            {offerOptions.map((o) => (
              <button
                key={o.id}
                onClick={() => toggleOffer(o.id)}
                className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
                  selectedOffers.has(o.id)
                    ? "bg-primary text-white"
                    : "bg-background text-text-muted hover:bg-surface-light"
                }`}
              >
                {o.name}
              </button>
            ))}
          </div>
          <p className="text-sm text-text-muted mt-2">{selectedOffers.size} offers selected</p>
        </div>

        <div>
          <h2 className="text-lg font-semibold text-text mb-3">Enjoys</h2>
          <div className="space-y-2">
            {enjoyOptions.map((o) => {
              const isSelected = selectedEnjoyIds.has(o.id);
              const entry = enjoys.find((e) => e.enjoy_id === o.id);
              return (
                <div key={o.id} className="flex items-center gap-3">
                  <button
                    onClick={() => toggleEnjoy(o.id)}
                    className={`px-4 py-2 rounded-full text-sm font-medium transition-colors flex-shrink-0 ${
                      isSelected
                        ? "bg-primary text-white"
                        : "bg-background text-text-muted hover:bg-surface-light"
                    }`}
                  >
                    {o.name}
                  </button>
                  {isSelected && (
                    <input
                      type="number"
                      min={0}
                      step="0.01"
                      value={entry?.cost || 0}
                      onChange={(e) => updateEnjoyCost(o.id, parseFloat(e.target.value) || 0)}
                      placeholder="Cost"
                      className="bg-background border border-surface-light rounded-lg px-3 py-2 text-text text-sm w-28 focus:outline-none focus:ring-2 focus:ring-primary"
                    />
                  )}
                </div>
              );
            })}
          </div>
        </div>

        <button
          onClick={handleSave}
          disabled={saving}
          className="bg-primary hover:bg-primary-dark text-white px-6 py-2.5 rounded-lg font-semibold transition-colors disabled:opacity-50"
        >
          {saving ? "Saving..." : "Save Services"}
        </button>
      </div>
    </div>
  );
}