"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { c2api } from "@/lib/c2api";
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 [memberCount, setMemberCount] = useState<number | null>(null);
  const [sub, setSub] = useState<Subscription | null>(null);
  const [orgName, setOrgName] = useState("My Organization");

  useEffect(() => {
    c2api.listUsers().then((u) => setMemberCount(u.length)).catch(() => setMemberCount(null));
    getCurrentSubscription().then(setSub);
  }, []);

  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}
              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"
            />
          </div>
          <div className="flex items-center gap-3">
            <Button size="sm" disabled title="Organization profile isn't persisted server-side yet">
              Save changes
            </Button>
            <span className="text-xs text-gray-600 font-mono">
              Preview only — no backend endpoint stores this yet.
            </span>
          </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>
  );
}