"use client";

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

interface Vault {
  id: number;
  amount: number;
  duration_days: number;
  bonus_rate: number;
  bonus_amount: number;
  locked_at: string;
  unlocks_at: string;
  status: string;
}

export default function CreditVaultPage() {
  const { status } = useSession();
  const router = useRouter();
  const [vaults, setVaults] = useState<Vault[]>([]);
  const [availableCredits, setAvailableCredits] = useState(0);
  const [loading, setLoading] = useState(true);
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState<string | null>(null);

  // Form
  const [amount, setAmount] = useState("");
  const [duration, setDuration] = useState("30");

  useEffect(() => {
    if (status === "unauthenticated") router.push("/login");
  }, [status, router]);

  useEffect(() => {
    loadVaults();
  }, []);

  async function loadVaults() {
    try {
      const res = await fetch("/api/credits/vault");
      if (res.ok) {
        const data = await res.json();
        setVaults(data.data || []);
        setAvailableCredits(data.available_credits ?? 0);
      }
    } catch {
      // silently fail
    } finally {
      setLoading(false);
    }
  }

  const bonusRates: Record<string, number> = { "30": 3, "60": 5, "90": 8 };
  const estimatedBonus = amount ? (Number(amount) * (bonusRates[duration] / 100)).toFixed(2) : "0.00";

  async function handleLock(e: React.FormEvent) {
    e.preventDefault();
    if (!amount || Number(amount) < 10) return;

    setSubmitting(true);
    setError(null);
    setSuccess(null);

    try {
      const res = await fetch("/api/credits/vault", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ action: "lock", amount: Number(amount), duration_days: Number(duration) }),
      });

      if (res.ok) {
        const data = await res.json();
        setSuccess(`Locked ${amount} credits! You'll earn ${data.bonus_amount} bonus credits.`);
        setAmount("");
        loadVaults();
      } else {
        const data = await res.json();
        setError(data.error || "Failed to lock credits");
      }
    } catch {
      setError("Network error");
    } finally {
      setSubmitting(false);
    }
  }

  async function handleUnlock(vaultId: number) {
    try {
      const res = await fetch("/api/credits/vault", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ action: "unlock", vault_id: vaultId }),
      });

      if (res.ok) {
        const data = await res.json();
        setSuccess(`Vault unlocked! ${data.total_returned} credits returned to your balance.`);
        loadVaults();
      } else {
        const data = await res.json();
        setError(data.error || "Failed to unlock");
      }
    } catch {
      setError("Network error");
    }
  }

  function getVaultProgress(vault: Vault): number {
    const start = new Date(vault.locked_at).getTime();
    const end = new Date(vault.unlocks_at).getTime();
    const now = Date.now();
    return Math.min(100, Math.max(0, ((now - start) / (end - start)) * 100));
  }

  if (status === "loading" || loading) {
    return (
      <div className="max-w-3xl mx-auto space-y-6">
        <div className="h-8 w-48 bg-surface-light rounded animate-pulse" />
        <div className="bg-surface rounded-xl p-6 animate-pulse space-y-4">
          <div className="h-20 bg-surface-light rounded" />
          <div className="h-10 bg-surface-light rounded" />
        </div>
      </div>
    );
  }

  const lockedVaults = vaults.filter((v) => v.status === "locked");
  const totalLocked = lockedVaults.reduce((sum, v) => sum + v.amount, 0);
  const totalPendingBonus = lockedVaults.reduce((sum, v) => sum + v.bonus_amount, 0);

  return (
    <div className="max-w-3xl mx-auto space-y-6">
      <h1 className="text-2xl font-bold">Credit Vault</h1>
      <p className="text-text-muted text-sm">
        Lock your credits for a period and earn bonus credits as a reward. The longer you lock, the more you earn.
      </p>

      {/* Summary cards */}
      <div className="grid grid-cols-3 gap-4">
        <div className="bg-surface rounded-xl p-4 border border-white/5 text-center">
          <p className="text-text-muted text-xs mb-1">Available</p>
          <p className="text-xl font-bold text-gold">{availableCredits}</p>
        </div>
        <div className="bg-surface rounded-xl p-4 border border-white/5 text-center">
          <p className="text-text-muted text-xs mb-1">Locked</p>
          <p className="text-xl font-bold text-primary">{totalLocked}</p>
        </div>
        <div className="bg-surface rounded-xl p-4 border border-white/5 text-center">
          <p className="text-text-muted text-xs mb-1">Pending Bonus</p>
          <p className="text-xl font-bold text-green-400">{totalPendingBonus.toFixed(2)}</p>
        </div>
      </div>

      {/* Lock form */}
      <form onSubmit={handleLock} className="bg-surface rounded-xl p-6 border border-white/5 space-y-4">
        <h2 className="text-lg font-semibold">Lock Credits</h2>

        {error && (
          <div className="bg-red-500/10 border border-red-500/20 rounded-lg px-4 py-2.5 text-sm text-red-400">
            {error}
          </div>
        )}
        {success && (
          <div className="bg-green-500/10 border border-green-500/20 rounded-lg px-4 py-2.5 text-sm text-green-400">
            {success}
          </div>
        )}

        <div className="grid grid-cols-2 gap-4">
          <div>
            <label className="block text-sm font-medium text-text-muted mb-1">Amount</label>
            <input
              type="number"
              value={amount}
              onChange={(e) => setAmount(e.target.value)}
              min={10}
              max={availableCredits}
              placeholder="Min 10 credits"
              required
              className="w-full rounded-lg border border-white/10 bg-surface-light px-4 py-2.5 text-text focus:border-primary focus:outline-none"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-text-muted mb-1">Duration</label>
            <select
              value={duration}
              onChange={(e) => setDuration(e.target.value)}
              className="w-full rounded-lg border border-white/10 bg-surface-light px-4 py-2.5 text-text focus:border-primary focus:outline-none"
            >
              <option value="30">30 days (3% bonus)</option>
              <option value="60">60 days (5% bonus)</option>
              <option value="90">90 days (8% bonus)</option>
            </select>
          </div>
        </div>

        {amount && Number(amount) >= 10 && (
          <div className="bg-primary/10 border border-primary/20 rounded-lg px-4 py-3">
            <p className="text-sm text-text">
              You will receive <span className="text-gold font-bold">{estimatedBonus}</span> bonus credits after {duration} days.
            </p>
            <p className="text-xs text-text-muted mt-1">
              Total return: {Number(amount) + Number(estimatedBonus)} credits
            </p>
          </div>
        )}

        <button
          type="submit"
          disabled={submitting || !amount || Number(amount) < 10}
          className="gradient-gold text-background px-6 py-2.5 rounded-lg font-semibold disabled:opacity-40 hover:opacity-90 transition-opacity"
        >
          {submitting ? "Locking..." : "Lock Credits"}
        </button>
      </form>

      {/* Active vaults */}
      <div className="bg-surface rounded-xl p-6 border border-white/5">
        <h2 className="text-lg font-semibold mb-4">Your Vaults</h2>

        {vaults.length === 0 ? (
          <p className="text-text-muted text-sm">No vaults yet. Lock some credits to get started!</p>
        ) : (
          <div className="space-y-4">
            {vaults.map((vault) => {
              const progress = getVaultProgress(vault);
              const matured = new Date(vault.unlocks_at) <= new Date();
              const isLocked = vault.status === "locked";

              return (
                <div key={vault.id} className="p-4 bg-surface-light rounded-lg border border-white/5">
                  <div className="flex items-center justify-between mb-3">
                    <div>
                      <p className="font-medium text-text">
                        {vault.amount} credits for {vault.duration_days} days
                      </p>
                      <p className="text-xs text-text-muted mt-0.5">
                        Locked {new Date(vault.locked_at).toLocaleDateString()} &middot; Unlocks {new Date(vault.unlocks_at).toLocaleDateString()}
                      </p>
                    </div>
                    <div className="text-right">
                      <p className="text-sm font-medium text-green-400">
                        +{vault.bonus_amount} bonus
                      </p>
                      <span className={`text-xs px-2 py-0.5 rounded-full ${
                        vault.status === "unlocked"
                          ? "bg-green-500/10 text-green-400"
                          : matured
                          ? "bg-gold/10 text-gold"
                          : "bg-primary/10 text-primary"
                      }`}>
                        {vault.status === "unlocked" ? "Unlocked" : matured ? "Ready" : "Locked"}
                      </span>
                    </div>
                  </div>

                  {/* Progress bar */}
                  {isLocked && (
                    <div className="w-full bg-surface rounded-full h-2 mb-3">
                      <div
                        className={`h-2 rounded-full transition-all ${matured ? "bg-gold" : "bg-primary"}`}
                        style={{ width: `${progress}%` }}
                      />
                    </div>
                  )}

                  {isLocked && matured && (
                    <button
                      onClick={() => handleUnlock(vault.id)}
                      className="gradient-gold text-background px-4 py-2 rounded-lg text-sm font-semibold hover:opacity-90 transition-opacity"
                    >
                      Unlock + Claim Bonus
                    </button>
                  )}
                </div>
              );
            })}
          </div>
        )}
      </div>
    </div>
  );
}