import { useState, useEffect } from 'react';
import { apiFetch } from '../lib/api';

// ── Types ────────────────────────────────────────────────────────────────────

interface Video {
  id: string;
  title: string;
  storageType: string;
  storageKey: string;
  requiredLevel: number;
  isPublished: boolean;
  createdAt: string;
}

interface Plan {
  id: string;
  slug: string;
  name: string;
  level: number;
  priceInCents: number;
  isActive: boolean;
}

interface AdminUser {
  id: string;
  email: string | null;
  nickname: string;
  isActive: boolean;
  createdAt: string;
  roles: { id: string; slug: string; name: string }[];
  activeSubscription: {
    id: string;
    status: string;
    endsAt: string | null;
    plan: Plan;
  } | null;
}

// ── Tabs ─────────────────────────────────────────────────────────────────────

type Tab = 'videos' | 'users' | 'plans';

export default function AdminPage() {
  const [tab, setTab] = useState<Tab>('videos');

  return (
    <div className="flex flex-col gap-6">
      <div className="flex items-center gap-1 border-b border-od-border pb-4">
        {(['videos', 'users', 'plans'] as Tab[]).map((t) => (
          <button
            key={t}
            onClick={() => setTab(t)}
            className={`rounded px-3 py-1.5 font-mono text-xs transition-colors ${
              tab === t
                ? 'bg-od-surface text-od-accent border border-od-accent'
                : 'text-od-muted hover:text-od-text'
            }`}
          >
            {t}
          </button>
        ))}
      </div>

      {tab === 'videos' && <VideosTab />}
      {tab === 'users'  && <UsersTab />}
      {tab === 'plans'  && <PlansTab />}
    </div>
  );
}

// ── Videos tab ───────────────────────────────────────────────────────────────

function VideosTab() {
  const [videos, setVideos] = useState<Video[]>([]);
  const [loading, setLoading] = useState(true);
  const [form, setForm] = useState({
    title: '', storageType: 'youtube', storageKey: '',
    requiredLevel: 0, isPublished: false,
  });
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    apiFetch<{ success: boolean; data: { videos: Video[] } }>('/admin/videos')
      .then((r) => setVideos(r.data.videos))
      .catch(() => {})
      .finally(() => setLoading(false));
  }, []);

  async function handleCreate(e: React.FormEvent) {
    e.preventDefault();
    if (!form.title || !form.storageKey || saving) return;
    setSaving(true);
    setError(null);
    try {
      const r = await apiFetch<{ success: boolean; data: { video: Video } }>(
        '/admin/videos',
        { method: 'POST', body: JSON.stringify(form) }
      );
      setVideos((v) => [r.data.video, ...v]);
      setForm({ title: '', storageType: 'youtube', storageKey: '', requiredLevel: 0, isPublished: false });
    } catch {
      setError('Erreur lors de la création.');
    }
    setSaving(false);
  }

  async function togglePublish(video: Video) {
    try {
      const r = await apiFetch<{ success: boolean; data: { video: Video } }>(
        `/admin/videos/${video.id}`,
        { method: 'PATCH', body: JSON.stringify({ isPublished: !video.isPublished }) }
      );
      setVideos((v) => v.map((x) => x.id === video.id ? r.data.video : x));
    } catch {}
  }

  async function handleDelete(id: string) {
    if (!confirm('Supprimer cette vidéo ?')) return;
    try {
      await apiFetch(`/admin/videos/${id}`, { method: 'DELETE' });
      setVideos((v) => v.filter((x) => x.id !== id));
    } catch {}
  }

  return (
    <div className="flex flex-col gap-6">

      {/* Formulaire création */}
      <form onSubmit={handleCreate} className="flex flex-col gap-3 rounded border border-od-border bg-od-surface p-4">
        <p className="font-mono text-xs text-od-muted uppercase tracking-widest">Nouvelle vidéo</p>

        <input
          value={form.title}
          onChange={(e) => setForm((f) => ({ ...f, title: e.target.value }))}
          placeholder="Titre"
          required
          className="rounded border border-od-border bg-od-bg px-3 py-2 text-sm text-od-text placeholder-od-muted outline-none focus:border-od-accent"
        />

        <div className="flex gap-2">
          <select
            value={form.storageType}
            onChange={(e) => setForm((f) => ({ ...f, storageType: e.target.value }))}
            className="rounded border border-od-border bg-od-bg px-3 py-2 text-sm text-od-text outline-none focus:border-od-accent"
          >
            <option value="youtube">YouTube</option>
            <option value="local">Local</option>
            <option value="s3">S3</option>
            <option value="external">External</option>
          </select>
          <input
            value={form.storageKey}
            onChange={(e) => setForm((f) => ({ ...f, storageKey: e.target.value }))}
            placeholder={form.storageType === 'youtube' ? 'ID YouTube (ex: dQw4w9WgXcQ)' : 'Chemin / URL'}
            required
            className="flex-1 rounded border border-od-border bg-od-bg px-3 py-2 text-sm text-od-text placeholder-od-muted outline-none focus:border-od-accent"
          />
        </div>

        <div className="flex items-center gap-4">
          <label className="flex items-center gap-2 text-sm text-od-muted">
            Niveau requis
            <input
              type="number"
              min={0}
              value={form.requiredLevel}
              onChange={(e) => setForm((f) => ({ ...f, requiredLevel: parseInt(e.target.value) || 0 }))}
              className="w-16 rounded border border-od-border bg-od-bg px-2 py-1 text-sm text-od-text outline-none focus:border-od-accent"
            />
          </label>
          <label className="flex items-center gap-2 text-sm text-od-muted">
            <input
              type="checkbox"
              checked={form.isPublished}
              onChange={(e) => setForm((f) => ({ ...f, isPublished: e.target.checked }))}
            />
            Publié
          </label>
        </div>

        {error && <p className="text-xs text-od-crit">{error}</p>}
        <button
          type="submit"
          disabled={saving}
          className="self-start rounded border border-od-accent px-4 py-1.5 font-mono text-xs text-od-accent hover:bg-od-accent hover:text-od-bg transition-colors disabled:opacity-40"
        >
          {saving ? '…' : 'Créer'}
        </button>
      </form>

      {/* Liste */}
      {loading ? (
        <div className="flex flex-col gap-2">
          {[...Array(3)].map((_, i) => <div key={i} className="h-12 rounded border border-od-border animate-pulse" />)}
        </div>
      ) : (
        <div className="flex flex-col gap-2">
          {videos.map((v) => (
            <div key={v.id} className="flex items-center gap-3 rounded border border-od-border bg-od-surface px-4 py-3">
              <div className="flex-1 min-w-0">
                <p className="text-sm text-od-text truncate">{v.title}</p>
                <p className="font-mono text-xs text-od-muted">{v.storageType} · niveau {v.requiredLevel}</p>
              </div>
              <button
                onClick={() => togglePublish(v)}
                className={`font-mono text-xs px-2 py-0.5 rounded border transition-colors ${
                  v.isPublished
                    ? 'border-od-accent text-od-accent hover:bg-od-accent hover:text-od-bg'
                    : 'border-od-border text-od-muted hover:border-od-accent hover:text-od-accent'
                }`}
              >
                {v.isPublished ? 'publié' : 'brouillon'}
              </button>
              <button
                onClick={() => handleDelete(v.id)}
                className="font-mono text-xs text-od-muted hover:text-od-crit transition-colors"
              >
                ✕
              </button>
            </div>
          ))}
          {videos.length === 0 && <p className="text-sm text-od-muted">Aucune vidéo.</p>}
        </div>
      )}
    </div>
  );
}

// ── Users tab ────────────────────────────────────────────────────────────────

function UsersTab() {
  const [users, setUsers] = useState<AdminUser[]>([]);
  const [plans, setPlans] = useState<Plan[]>([]);
  const [loading, setLoading] = useState(true);
  const [assigning, setAssigning] = useState<string | null>(null);
  const [selectedPlan, setSelectedPlan] = useState<Record<string, string>>({});

  useEffect(() => {
    Promise.all([
      apiFetch<{ success: boolean; data: { users: AdminUser[] } }>('/admin/users'),
      apiFetch<{ success: boolean; data: { plans: Plan[] } }>('/admin/plans'),
    ])
      .then(([ur, pr]) => {
        setUsers(ur.data.users);
        setPlans(pr.data.plans);
      })
      .catch(() => {})
      .finally(() => setLoading(false));
  }, []);

  async function assignPlan(userId: string) {
    const planId = selectedPlan[userId];
    if (!planId || assigning) return;
    setAssigning(userId);
    try {
      await apiFetch(`/admin/users/${userId}/subscriptions`, {
        method: 'POST',
        body: JSON.stringify({ planId }),
      });
      // Rafraîchir la liste users
      const r = await apiFetch<{ success: boolean; data: { users: AdminUser[] } }>('/admin/users');
      setUsers(r.data.users);
    } catch {}
    setAssigning(null);
  }

  if (loading) return <div className="h-32 animate-pulse rounded border border-od-border" />;

  return (
    <div className="flex flex-col gap-2">
      {users.map((u) => (
        <div key={u.id} className="flex flex-col gap-2 rounded border border-od-border bg-od-surface px-4 py-3">
          <div className="flex items-start justify-between gap-2">
            <div>
              <p className="text-sm font-medium text-od-text">{u.nickname}</p>
              <p className="font-mono text-xs text-od-muted">{u.email ?? '—'}</p>
            </div>
            <div className="text-right">
              {u.activeSubscription ? (
                <span className="font-mono text-xs text-od-accent">
                  {u.activeSubscription.plan.name}
                  {u.activeSubscription.endsAt && ` · ${new Date(u.activeSubscription.endsAt).toLocaleDateString()}`}
                </span>
              ) : (
                <span className="font-mono text-xs text-od-muted">free</span>
              )}
            </div>
          </div>

          <div className="flex items-center gap-2">
            <select
              value={selectedPlan[u.id] ?? ''}
              onChange={(e) => setSelectedPlan((s) => ({ ...s, [u.id]: e.target.value }))}
              className="flex-1 rounded border border-od-border bg-od-bg px-2 py-1 text-xs text-od-text outline-none focus:border-od-accent"
            >
              <option value="">— Assigner un plan —</option>
              {plans.filter((p) => p.isActive).map((p) => (
                <option key={p.id} value={p.id}>{p.name} (niv. {p.level})</option>
              ))}
            </select>
            <button
              disabled={!selectedPlan[u.id] || assigning === u.id}
              onClick={() => assignPlan(u.id)}
              className="rounded border border-od-border px-3 py-1 font-mono text-xs text-od-muted hover:border-od-accent hover:text-od-accent transition-colors disabled:opacity-40"
            >
              {assigning === u.id ? '…' : 'Assigner'}
            </button>
          </div>
        </div>
      ))}
      {users.length === 0 && <p className="text-sm text-od-muted">Aucun utilisateur.</p>}
    </div>
  );
}

// ── Plans tab ─────────────────────────────────────────────────────────────────

function PlansTab() {
  const [plans, setPlans] = useState<Plan[]>([]);
  const [loading, setLoading] = useState(true);
  const [form, setForm] = useState({ slug: '', name: '', level: 1, priceInCents: 0 });
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    apiFetch<{ success: boolean; data: { plans: Plan[] } }>('/admin/plans')
      .then((r) => setPlans(r.data.plans))
      .catch(() => {})
      .finally(() => setLoading(false));
  }, []);

  async function handleCreate(e: React.FormEvent) {
    e.preventDefault();
    if (!form.slug || !form.name || saving) return;
    setSaving(true);
    setError(null);
    try {
      const r = await apiFetch<{ success: boolean; data: { plan: Plan } }>(
        '/admin/plans',
        { method: 'POST', body: JSON.stringify(form) }
      );
      setPlans((p) => [...p, r.data.plan]);
      setForm({ slug: '', name: '', level: 1, priceInCents: 0 });
    } catch {
      setError('Erreur lors de la création.');
    }
    setSaving(false);
  }

  async function toggleActive(plan: Plan) {
    try {
      const r = await apiFetch<{ success: boolean; data: { plan: Plan } }>(
        `/admin/plans/${plan.id}`,
        { method: 'PATCH', body: JSON.stringify({ isActive: !plan.isActive }) }
      );
      setPlans((p) => p.map((x) => x.id === plan.id ? r.data.plan : x));
    } catch {}
  }

  if (loading) return <div className="h-24 animate-pulse rounded border border-od-border" />;

  return (
    <div className="flex flex-col gap-6">

      <form onSubmit={handleCreate} className="flex flex-col gap-3 rounded border border-od-border bg-od-surface p-4">
        <p className="font-mono text-xs text-od-muted uppercase tracking-widest">Nouveau plan</p>
        <div className="flex gap-2">
          <input
            value={form.slug}
            onChange={(e) => setForm((f) => ({ ...f, slug: e.target.value }))}
            placeholder="slug (ex: premium)"
            required
            className="flex-1 rounded border border-od-border bg-od-bg px-3 py-2 text-sm text-od-text placeholder-od-muted outline-none focus:border-od-accent"
          />
          <input
            value={form.name}
            onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
            placeholder="Nom"
            required
            className="flex-1 rounded border border-od-border bg-od-bg px-3 py-2 text-sm text-od-text placeholder-od-muted outline-none focus:border-od-accent"
          />
        </div>
        <div className="flex gap-2">
          <label className="flex items-center gap-2 text-sm text-od-muted">
            Niveau
            <input
              type="number" min={1}
              value={form.level}
              onChange={(e) => setForm((f) => ({ ...f, level: parseInt(e.target.value) || 1 }))}
              className="w-16 rounded border border-od-border bg-od-bg px-2 py-1 text-sm text-od-text outline-none focus:border-od-accent"
            />
          </label>
          <label className="flex items-center gap-2 text-sm text-od-muted">
            Prix (centimes)
            <input
              type="number" min={0}
              value={form.priceInCents}
              onChange={(e) => setForm((f) => ({ ...f, priceInCents: parseInt(e.target.value) || 0 }))}
              className="w-24 rounded border border-od-border bg-od-bg px-2 py-1 text-sm text-od-text outline-none focus:border-od-accent"
            />
          </label>
        </div>
        {error && <p className="text-xs text-od-crit">{error}</p>}
        <button
          type="submit" disabled={saving}
          className="self-start rounded border border-od-accent px-4 py-1.5 font-mono text-xs text-od-accent hover:bg-od-accent hover:text-od-bg transition-colors disabled:opacity-40"
        >
          {saving ? '…' : 'Créer'}
        </button>
      </form>

      <div className="flex flex-col gap-2">
        {plans.map((p) => (
          <div key={p.id} className="flex items-center gap-3 rounded border border-od-border bg-od-surface px-4 py-3">
            <div className="flex-1">
              <p className="text-sm text-od-text">{p.name}</p>
              <p className="font-mono text-xs text-od-muted">
                {p.slug} · niv. {p.level} · {(p.priceInCents / 100).toFixed(2)} €
              </p>
            </div>
            <button
              onClick={() => toggleActive(p)}
              className={`font-mono text-xs px-2 py-0.5 rounded border transition-colors ${
                p.isActive
                  ? 'border-od-accent text-od-accent hover:bg-od-accent hover:text-od-bg'
                  : 'border-od-border text-od-muted hover:border-od-accent hover:text-od-accent'
              }`}
            >
              {p.isActive ? 'actif' : 'inactif'}
            </button>
          </div>
        ))}
        {plans.length === 0 && <p className="text-sm text-od-muted">Aucun plan.</p>}
      </div>
    </div>
  );
}