"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { c2api } from "@/lib/c2api";
import { useAuth } from "@/components/AuthProvider";
import { useNodes } from "@/lib/useNodes";
import { getCurrentSubscription, getPlan, type Subscription } from "@/lib/billing";
import { Card, CardHeader } from "@/components/ui/Card";
import { Badge } from "@/components/ui/Badge";
import { Button } from "@/components/ui/Button";
import { Skeleton } from "@/components/ui/Skeleton";

function StatTile({ label, value }: { label: string; value: string | number }) {
  return (
    <div>
      <p className="text-xs text-gray-500 uppercase tracking-wider font-mono">{label}</p>
      <p className="text-2xl font-bold text-white font-mono mt-1">{value}</p>
    </div>
  );
}

export default function OrganizationSettingsPage() {
  const { nodes } = useNodes();
  const { isOrgOwner, isAdmin } = useAuth();
  const [memberCount, setMemberCount] = useState<number | null>(null);
  const [sub, setSub] = useState<Subscription | null>(null);
  const [orgName, setOrgName] = useState("");
  const [savedName, setSavedName] = useState("");
  const [orgLoading, setOrgLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [saveError, setSaveError] = useState<string | null>(null);

  const canEdit = isOrgOwner || isAdmin;

  useEffect(() => {
    c2api.listUsers().then((u) => setMemberCount(u.length)).catch(() => setMemberCount(null));
    getCurrentSubscription().then(setSub);
    c2api.getOrg()
      .then((org) => { setOrgName(org.name); setSavedName(org.name); })
      .catch(() => {})
      .finally(() => setOrgLoading(false));
  }, []);

  async function handleSave() {
    setSaving(true);
    setSaveError(null);
    try {
      const res = await c2api.updateOrg(orgName.trim());
      setSavedName(res.name);
      setOrgName(res.name);
    } catch (err) {
      setSaveError(err instanceof Error ? err.message : "Could not save.");
    } finally {
      setSaving(false);
    }
  }

  const plan = sub ? getPlan(sub.planId) : null;

  return (
    <div className="space-y-6 max-w-3xl">
      <Card>
        <CardHeader
          title="Organization profile"
          subtitle="Basic identity for this DRB account."
        />
        <div className="space-y-4">
          <div>
            <label className="text-xs text-gray-400 block mb-1">Organization name</label>
            <input
              value={orgName}
              disabled={orgLoading || !canEdit}
              onChange={(e) => setOrgName(e.target.value)}
              className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500 disabled:opacity-50"
            />
          </div>
          {saveError && <p className="text-red-400 text-xs">{saveError}</p>}
          <div className="flex items-center gap-3">
            <Button
              size="sm"
              disabled={orgLoading || !canEdit || saving || !orgName.trim() || orgName.trim() === savedName}
              onClick={handleSave}
              title={!canEdit ? "Only the organization owner can change this" : undefined}
            >
              {saving ? "Saving…" : "Save changes"}
            </Button>
          </div>
        </div>
      </Card>

      <Card>
        <CardHeader
          title="Overview"
          action={
            plan ? (
              <Badge tone={plan.id === "free" ? "neutral" : "brand"}>{plan.name} plan</Badge>
            ) : (
              <Skeleton className="h-5 w-16" />
            )
          }
        />
        <div className="grid grid-cols-2 sm:grid-cols-3 gap-6">
          <StatTile label="Nodes" value={nodes.length} />
          <StatTile label="Members" value={memberCount ?? "—"} />
          <StatTile
            label="Status"
            value={sub ? sub.status.replace("_", " ") : "—"}
          />
        </div>
        <div className="mt-5 pt-5 border-t border-gray-800 flex items-center gap-4 text-sm">
          <Link href="/settings/billing" className="text-indigo-400 hover:text-indigo-300 transition-colors">
            Manage plan & billing →
          </Link>
          <Link href="/settings/members" className="text-indigo-400 hover:text-indigo-300 transition-colors">
            Manage members →
          </Link>
        </div>
      </Card>

      <div className="bg-gray-900 border border-red-800/60 rounded-xl p-5">
        <CardHeader title="Danger zone" subtitle="Destructive organization-level actions." />
        <div className="flex flex-wrap gap-3">
          <Button variant="danger" size="sm" disabled title="Not available in this build — contact support">
            Delete organization
          </Button>
          <Button variant="secondary" size="sm" disabled title="Not available in this build — contact support">
            Transfer ownership
          </Button>
        </div>
      </div>
    </div>
  );
}