"use client";

import { useSession } from "next-auth/react";
import { useRouter } from "next/navigation";
import { useState, useEffect, useCallback } from "react";

interface Settings {
  id: number;
  user_id: number;
  free_max_minutes: number;
  group_rate: number;
  private_rate: number;
  audio_enabled: boolean;
  category: string;
  strapline: string;
  is_live: boolean;
}

const CATEGORIES = ["Adult", "Chat", "Party", "Fetish"];

export default function LiveCamSettingsPage() {
  const { data: session, status } = useSession();
  const router = useRouter();
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [saved, setSaved] = useState(false);

  const [freeMaxMinutes, setFreeMaxMinutes] = useState(5);
  const [groupRate, setGroupRate] = useState(10);
  const [privateRate, setPrivateRate] = useState(20);
  const [audioEnabled, setAudioEnabled] = useState(true);
  const [category, setCategory] = useState("Adult");
  const [strapline, setStrapline] = useState("");

  const loadSettings = useCallback(async () => {
    try {
      const res = await fetch("/api/livecam/settings");
      const json = await res.json();
      if (json.data) {
        const s = json.data as Settings;
        setFreeMaxMinutes(s.free_max_minutes);
        setGroupRate(s.group_rate);
        setPrivateRate(s.private_rate);
        setAudioEnabled(s.audio_enabled);
        setCategory(s.category);
        setStrapline(s.strapline || "");
      }
    } catch {
      // No settings yet, use defaults
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    if (status === "unauthenticated") {
      router.push("/login");
      return;
    }
    if (status === "authenticated") {
      const userType = (session?.user as Record<string, unknown>)?.userType;
      if (userType !== "escort") {
        router.push("/dashboard");
        return;
      }
      loadSettings();
    }
  }, [status, session, router, loadSettings]);

  const handleSave = async () => {
    setSaving(true);
    setSaved(false);
    try {
      const res = await fetch("/api/livecam/settings", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          free_max_minutes: freeMaxMinutes,
          group_rate: groupRate,
          private_rate: privateRate,
          audio_enabled: audioEnabled,
          category,
          strapline,
        }),
      });
      if (res.ok) {
        setSaved(true);
        setTimeout(() => setSaved(false), 3000);
      }
    } catch {
      // Error handled silently
    } finally {
      setSaving(false);
    }
  };

  if (status === "loading" || loading) {
    return (
      <div className="flex items-center justify-center min-h-[60vh]">
        <div className="w-8 h-8 border-2 border-gold border-t-transparent rounded-full animate-spin" />
      </div>
    );
  }

  return (
    <div className="max-w-2xl mx-auto space-y-8">
      <div>
        <h1 className="text-2xl font-bold text-white">LiveCam Setup</h1>
        <p className="text-text-muted mt-1">Configure your live cam broadcast settings</p>
      </div>

      <div className="bg-surface rounded-xl border border-white/5 p-6 space-y-6">
        {/* Free Max Minutes */}
        <div>
          <label className="block text-sm font-medium text-white mb-2">
            Free Preview Duration: <span className="text-gold font-bold">{freeMaxMinutes} min</span>
          </label>
          <input
            type="range"
            min={1}
            max={10}
            value={freeMaxMinutes}
            onChange={(e) => setFreeMaxMinutes(Number(e.target.value))}
            className="w-full h-2 bg-surface-light rounded-lg appearance-none cursor-pointer accent-gold"
          />
          <div className="flex justify-between text-xs text-text-muted mt-1">
            <span>1 min</span>
            <span>10 min</span>
          </div>
        </div>

        {/* Group Rate */}
        <div>
          <label className="block text-sm font-medium text-white mb-2">
            Group Show Rate <span className="text-gold">(credits/min)</span>
          </label>
          <input
            type="number"
            min={0}
            value={groupRate}
            onChange={(e) => setGroupRate(Number(e.target.value))}
            className="w-full bg-surface-light border border-white/10 rounded-lg px-4 py-2.5 text-white focus:outline-none focus:ring-2 focus:ring-gold/50 focus:border-gold"
          />
        </div>

        {/* Private Rate */}
        <div>
          <label className="block text-sm font-medium text-white mb-2">
            Private Show Rate <span className="text-gold">(credits/min)</span>
          </label>
          <input
            type="number"
            min={0}
            value={privateRate}
            onChange={(e) => setPrivateRate(Number(e.target.value))}
            className="w-full bg-surface-light border border-white/10 rounded-lg px-4 py-2.5 text-white focus:outline-none focus:ring-2 focus:ring-gold/50 focus:border-gold"
          />
        </div>

        {/* Audio Toggle */}
        <div className="flex items-center justify-between">
          <label className="text-sm font-medium text-white">Audio Enabled</label>
          <button
            type="button"
            onClick={() => setAudioEnabled(!audioEnabled)}
            className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
              audioEnabled ? "bg-gold" : "bg-surface-light"
            }`}
          >
            <span
              className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                audioEnabled ? "translate-x-6" : "translate-x-1"
              }`}
            />
          </button>
        </div>

        {/* Category */}
        <div>
          <label className="block text-sm font-medium text-white mb-2">Category</label>
          <select
            value={category}
            onChange={(e) => setCategory(e.target.value)}
            className="w-full bg-surface-light border border-white/10 rounded-lg px-4 py-2.5 text-white focus:outline-none focus:ring-2 focus:ring-gold/50 focus:border-gold"
          >
            {CATEGORIES.map((c) => (
              <option key={c} value={c}>
                {c}
              </option>
            ))}
          </select>
        </div>

        {/* Strapline */}
        <div>
          <label className="block text-sm font-medium text-white mb-2">Strapline</label>
          <input
            type="text"
            maxLength={200}
            value={strapline}
            onChange={(e) => setStrapline(e.target.value)}
            placeholder="Short tagline for your live cam..."
            className="w-full bg-surface-light border border-white/10 rounded-lg px-4 py-2.5 text-white placeholder-text-muted focus:outline-none focus:ring-2 focus:ring-gold/50 focus:border-gold"
          />
          <p className="text-xs text-text-muted mt-1">{strapline.length}/200</p>
        </div>

        {/* Buttons */}
        <div className="flex flex-col sm:flex-row gap-3 pt-4">
          <button
            onClick={handleSave}
            disabled={saving}
            className="flex-1 bg-surface-light hover:bg-white/10 text-white font-semibold px-6 py-3 rounded-lg transition-all border border-white/10 disabled:opacity-50"
          >
            {saving ? "Saving..." : saved ? "Saved!" : "Save Settings"}
          </button>
          <button
            onClick={() => router.push("/dashboard/livecam/broadcast")}
            className="flex-1 bg-gold hover:bg-gold-light text-black font-bold px-6 py-3 rounded-lg transition-all shadow-glow hover:shadow-lg"
          >
            Go Live
          </button>
        </div>

        {/* Start Duet */}
        <div className="pt-2">
          <button
            onClick={() => router.push("/livecam/duet")}
            className="w-full bg-gradient-to-r from-gold to-purple-600 hover:from-gold-light hover:to-purple-500 text-white font-bold px-6 py-3 rounded-lg transition-all flex items-center justify-center gap-2"
          >
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
            </svg>
            Start Duet
          </button>
        </div>

        {saved && (
          <p className="text-green-400 text-sm text-center">Settings saved successfully!</p>
        )}
      </div>
    </div>
  );
}