"use client";

import { useState } from "react";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { toast } from "sonner";
import {
  Building2, CreditCard, Map, Wifi, Users, ChevronRight,
} from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
import { Button } from "@/components/ui/Button";
import { Input } from "@/components/ui/Input";
import { Table, TableHead, TableBody, TableRow, Th, Td, EmptyState } from "@/components/ui/Table";
import { Badge } from "@/components/ui/Badge";
import { Modal } from "@/components/ui/Modal";
import { formatCurrency } from "@/lib/utils";
import api from "@/lib/api";

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

interface Tenant {
  id: string;
  name: string;
  slug: string;
  address?: string;
  phone?: string;
  email?: string;
  settings?: TenantBillingSettings | null;
}

interface TenantBillingSettings {
  billingDay?: number;
  lateFeeAmount?: number;
  lateFeeGraceDays?: number;
}

interface Plan {
  id: string;
  name: string;
  description?: string;
  type: string;
  speedDownMbps: number;
  speedUpMbps: number;
  monthlyPrice: number | string;
  isActive: boolean;
}

// ─── Sub-page: Tenant ─────────────────────────────────────────────────────────

function TenantSettings() {
  const [name, setName] = useState("");
  const [address, setAddress] = useState("");
  const [email, setEmail] = useState("");
  const [phone, setPhone] = useState("");
  const [loaded, setLoaded] = useState(false);

  const { isLoading } = useQuery<Tenant>({
    queryKey: ["tenant-me"],
    queryFn: async () => {
      const res = await api.get<Tenant>("/api/v1/tenants/me");
      return res.data;
    },
    select: (data) => {
      if (!loaded) {
        setName(data.name ?? "");
        setAddress(data.address ?? "");
        setEmail(data.email ?? "");
        setPhone(data.phone ?? "");
        setLoaded(true);
      }
      return data;
    },
  });

  const saveMutation = useMutation({
    mutationFn: async () => {
      await api.patch("/api/v1/tenants/me", { name, address, email, phone });
    },
    onSuccess: () => toast.success("Tenant settings saved"),
    onError: () => toast.error("Failed to save. Endpoint may not be available yet."),
  });

  if (isLoading) {
    return <div className="h-40 animate-pulse bg-gray-100 rounded-xl" />;
  }

  return (
    <Card>
      <CardHeader><CardTitle>Business Information</CardTitle></CardHeader>
      <CardContent>
        <form
          onSubmit={(e) => { e.preventDefault(); saveMutation.mutate(); }}
          className="space-y-4 max-w-lg"
        >
          <Input
            label="Business Name"
            value={name}
            onChange={(e) => setName(e.target.value)}
          />
          <Input
            label="Address"
            value={address}
            onChange={(e) => setAddress(e.target.value)}
          />
          <Input
            label="Contact Email"
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
          <Input
            label="Phone"
            value={phone}
            onChange={(e) => setPhone(e.target.value)}
          />
          {saveMutation.isError && (
            <p className="text-sm text-orange-600 bg-orange-50 rounded-lg px-3 py-2">
              Save endpoint not available yet — changes not persisted.
            </p>
          )}
          <Button type="submit" isLoading={saveMutation.isPending}>
            Save Changes
          </Button>
        </form>
      </CardContent>
    </Card>
  );
}

// ─── Sub-page: Billing Settings ───────────────────────────────────────────────

interface FullBillingSettings {
  billingDay?: number;
  gracePeriodDays?: number;
  lateFeeAmount?: string | number;
  lateFeePercent?: string | number;
  lateFeeGraceDays?: number;
  currency?: string;
}

function BillingSettings() {
  const [fields, setFields] = useState({ billingDay: "1", gracePeriodDays: "5", lateFeeAmount: "0", lateFeePercent: "0", lateFeeGraceDays: "0", currency: "PHP" });
  const [loaded, setLoaded] = useState(false);

  const { isLoading } = useQuery<FullBillingSettings>({
    queryKey: ["tenant-billing-settings"],
    queryFn: async () => {
      const res = await api.get<FullBillingSettings>("/api/v1/tenants/me/settings");
      return res.data ?? {};
    },
    select: (data) => {
      if (!loaded && data) {
        setFields({
          billingDay: String(data.billingDay ?? 1),
          gracePeriodDays: String(data.gracePeriodDays ?? 5),
          lateFeeAmount: String(data.lateFeeAmount ?? 0),
          lateFeePercent: String(data.lateFeePercent ?? 0),
          lateFeeGraceDays: String(data.lateFeeGraceDays ?? 0),
          currency: data.currency ?? "PHP",
        });
        setLoaded(true);
      }
      return data;
    },
  });

  const saveMutation = useMutation({
    mutationFn: async () => {
      await api.patch("/api/v1/tenants/me/settings", {
        billingDay: parseInt(fields.billingDay),
        gracePeriodDays: parseInt(fields.gracePeriodDays),
        lateFeeAmount: parseFloat(fields.lateFeeAmount),
        lateFeePercent: parseFloat(fields.lateFeePercent),
        lateFeeGraceDays: parseInt(fields.lateFeeGraceDays),
        currency: fields.currency,
      });
    },
    onSuccess: () => toast.success("Billing settings saved"),
    onError: () => toast.error("Failed to save billing settings"),
  });

  const set = (key: keyof typeof fields) => (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) =>
    setFields(f => ({ ...f, [key]: e.target.value }));

  if (isLoading) return <div className="h-40 animate-pulse bg-gray-100 rounded-xl" />;

  return (
    <Card>
      <CardHeader><CardTitle>Billing Configuration</CardTitle></CardHeader>
      <CardContent>
        <form onSubmit={(e) => { e.preventDefault(); saveMutation.mutate(); }} className="space-y-4 max-w-lg">
          <Input label="Billing Day (1–28)" type="number" min="1" max="28"
            value={fields.billingDay} onChange={set("billingDay")}
            hint="Day of month invoices are generated" />
          <Input label="Grace Period Days" type="number" min="0"
            value={fields.gracePeriodDays} onChange={set("gracePeriodDays")}
            hint="Days after billing day before account is flagged overdue" />
          <div className="grid grid-cols-2 gap-3">
            <Input label="Late Fee Amount (₱)" type="number" min="0" step="0.01"
              value={fields.lateFeeAmount} onChange={set("lateFeeAmount")} />
            <Input label="Late Fee % (0 = disabled)" type="number" min="0" max="100" step="0.01"
              value={fields.lateFeePercent} onChange={set("lateFeePercent")} />
          </div>
          <Input label="Late Fee Grace Days" type="number" min="0"
            value={fields.lateFeeGraceDays} onChange={set("lateFeeGraceDays")}
            hint="Days after due date before late fee applies" />
          <div className="flex flex-col gap-1.5">
            <label className="text-sm font-medium text-gray-700">Currency</label>
            <select className="border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
              value={fields.currency} onChange={set("currency")}>
              <option value="PHP">PHP — Philippine Peso</option>
              <option value="USD">USD — US Dollar</option>
            </select>
          </div>
          <Button type="submit" isLoading={saveMutation.isPending}>Save Billing Settings</Button>
        </form>
      </CardContent>
    </Card>
  );
}

// ─── Sub-page: Areas & Zones ──────────────────────────────────────────────────

interface Area {
  id: string;
  name: string;
  zones?: Zone[];
}

interface Zone {
  id: string;
  name: string;
  areaId: string;
}

function AreasSettings() {
  const [showAddArea, setShowAddArea] = useState(false);
  const [showAddZone, setShowAddZone] = useState(false);
  const [areaName, setAreaName] = useState("");
  const [zoneName, setZoneName] = useState("");
  const [zoneAreaId, setZoneAreaId] = useState("");

  const { data: areas, isLoading, refetch } = useQuery<Area[]>({
    queryKey: ["areas"],
    queryFn: async () => {
      try {
        const res = await api.get<Area[] | { data: Area[] }>("/api/v1/areas");
        const d = res.data;
        return Array.isArray(d) ? d : (d as { data: Area[] }).data ?? [];
      } catch {
        return [];
      }
    },
  });

  const addAreaMutation = useMutation({
    mutationFn: async () => {
      await api.post("/api/v1/areas", { name: areaName });
    },
    onSuccess: () => {
      toast.success("Area added");
      setAreaName("");
      setShowAddArea(false);
      refetch();
    },
    onError: () => toast.error("Failed to add area"),
  });

  const addZoneMutation = useMutation({
    mutationFn: async () => {
      await api.post("/api/v1/zones", { name: zoneName, areaId: zoneAreaId });
    },
    onSuccess: () => {
      toast.success("Zone added");
      setZoneName("");
      setZoneAreaId("");
      setShowAddZone(false);
      refetch();
    },
    onError: () => toast.error("Failed to add zone"),
  });

  const areaList = areas ?? [];

  return (
    <div className="space-y-4">
      <Card>
        <CardHeader>
          <CardTitle>Areas & Zones</CardTitle>
          <div className="flex gap-2">
            <Button size="sm" variant="outline" onClick={() => setShowAddArea(true)}>
              + Area
            </Button>
            <Button size="sm" variant="outline" onClick={() => setShowAddZone(true)}>
              + Zone
            </Button>
          </div>
        </CardHeader>
        <CardContent className="p-0">
          <Table>
            <TableHead>
              <TableRow>
                <Th>Area Name</Th>
                <Th>Zones</Th>
              </TableRow>
            </TableHead>
            <TableBody>
              {isLoading ? (
                Array.from({ length: 3 }).map((_, i) => (
                  <TableRow key={i}>
                    <Td><div className="h-4 w-32 animate-pulse bg-gray-100 rounded" /></Td>
                    <Td><div className="h-4 w-24 animate-pulse bg-gray-100 rounded" /></Td>
                  </TableRow>
                ))
              ) : areaList.length === 0 ? (
                <EmptyState message="No areas configured" />
              ) : (
                areaList.map((a) => (
                  <TableRow key={a.id}>
                    <Td className="font-medium">{a.name}</Td>
                    <Td className="text-sm text-gray-500">
                      {a.zones?.length
                        ? a.zones.map((z) => z.name).join(", ")
                        : <span className="text-gray-300">No zones</span>}
                    </Td>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </CardContent>
      </Card>

      {/* Add Area Modal */}
      <Modal isOpen={showAddArea} onClose={() => setShowAddArea(false)} title="Add Area">
        <form onSubmit={(e) => { e.preventDefault(); addAreaMutation.mutate(); }} className="space-y-4">
          <Input
            label="Area Name"
            value={areaName}
            onChange={(e) => setAreaName(e.target.value)}
            placeholder="e.g. North Sector"
          />
          <div className="flex justify-end gap-2">
            <Button type="button" variant="outline" size="sm" onClick={() => setShowAddArea(false)}>Cancel</Button>
            <Button type="submit" size="sm" isLoading={addAreaMutation.isPending} disabled={!areaName.trim()}>
              Add Area
            </Button>
          </div>
        </form>
      </Modal>

      {/* Add Zone Modal */}
      <Modal isOpen={showAddZone} onClose={() => setShowAddZone(false)} title="Add Zone">
        <form onSubmit={(e) => { e.preventDefault(); addZoneMutation.mutate(); }} className="space-y-4">
          <div className="flex flex-col gap-1.5">
            <label className="text-sm font-medium text-gray-700">Area</label>
            <select
              className="block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
              value={zoneAreaId}
              onChange={(e) => setZoneAreaId(e.target.value)}
            >
              <option value="">Select area</option>
              {areaList.map((a) => (
                <option key={a.id} value={a.id}>{a.name}</option>
              ))}
            </select>
          </div>
          <Input
            label="Zone Name"
            value={zoneName}
            onChange={(e) => setZoneName(e.target.value)}
            placeholder="e.g. Zone 1"
          />
          <div className="flex justify-end gap-2">
            <Button type="button" variant="outline" size="sm" onClick={() => setShowAddZone(false)}>Cancel</Button>
            <Button
              type="submit"
              size="sm"
              isLoading={addZoneMutation.isPending}
              disabled={!zoneName.trim() || !zoneAreaId}
            >
              Add Zone
            </Button>
          </div>
        </form>
      </Modal>
    </div>
  );
}

// ─── Sub-page: Plans ──────────────────────────────────────────────────────────

function PlansSettings() {
  const [showAdd, setShowAdd] = useState(false);
  const [planName, setPlanName] = useState("");
  const [planType, setPlanType] = useState("POSTPAID");
  const [speedDown, setSpeedDown] = useState("");
  const [speedUp, setSpeedUp] = useState("");
  const [price, setPrice] = useState("");
  const [description, setDescription] = useState("");
  const [editPlan, setEditPlan] = useState<Plan | null>(null);
  const [editForm, setEditForm] = useState({ name: "", type: "POSTPAID", speedDown: "", speedUp: "", price: "", description: "" });

  const { data, isLoading, refetch } = useQuery<Plan[]>({
    queryKey: ["plans"],
    queryFn: async () => {
      try {
        const res = await api.get<Plan[] | { data: Plan[] }>("/api/v1/plans?includeInactive=true");
        const d = res.data;
        return Array.isArray(d) ? d : (d as { data: Plan[] }).data ?? [];
      } catch {
        return [];
      }
    },
  });

  const addPlanMutation = useMutation({
    mutationFn: async () => {
      await api.post("/api/v1/plans", {
        name: planName,
        type: planType,
        speedDownMbps: parseInt(speedDown),
        speedUpMbps: parseInt(speedUp),
        monthlyPrice: parseFloat(price),
        description: description || undefined,
      });
    },
    onSuccess: () => {
      toast.success("Plan created");
      resetAdd();
      setShowAdd(false);
      refetch();
    },
    onError: () => toast.error("Failed to create plan"),
  });

  const toggleActiveMutation = useMutation({
    mutationFn: async ({ id, isActive }: { id: string; isActive: boolean }) => {
      await api.patch(`/api/v1/plans/${id}`, { isActive: !isActive });
    },
    onSuccess: () => {
      toast.success("Plan updated");
      refetch();
    },
    onError: () => toast.error("Failed to update plan"),
  });

  const editPlanMutation = useMutation({
    mutationFn: async () => {
      if (!editPlan) return;
      await api.patch(`/api/v1/plans/${editPlan.id}`, {
        name: editForm.name,
        type: editForm.type,
        speedDownMbps: parseInt(editForm.speedDown),
        speedUpMbps: parseInt(editForm.speedUp),
        monthlyPrice: parseFloat(editForm.price),
        description: editForm.description || undefined,
      });
    },
    onSuccess: () => {
      toast.success("Plan updated");
      setEditPlan(null);
      refetch();
    },
    onError: () => toast.error("Failed to update plan"),
  });

  function openEdit(p: Plan) {
    setEditPlan(p);
    setEditForm({
      name: p.name,
      type: p.type,
      speedDown: String(p.speedDownMbps),
      speedUp: String(p.speedUpMbps),
      price: String(Number(p.monthlyPrice)),
      description: p.description ?? "",
    });
  }

  function resetAdd() {
    setPlanName(""); setPlanType("POSTPAID");
    setSpeedDown(""); setSpeedUp(""); setPrice(""); setDescription("");
  }

  const plans = data ?? [];

  return (
    <div className="space-y-4">
      <Card>
        <CardHeader>
          <CardTitle>Plans</CardTitle>
          <Button size="sm" onClick={() => setShowAdd(true)}>
            + Add Plan
          </Button>
        </CardHeader>
        <CardContent className="p-0">
          <Table>
            <TableHead>
              <TableRow>
                <Th>Name</Th>
                <Th>Type</Th>
                <Th>Speed</Th>
                <Th>Price</Th>
                <Th>Status</Th>
                <Th>Actions</Th>
              </TableRow>
            </TableHead>
            <TableBody>
              {isLoading ? (
                Array.from({ length: 3 }).map((_, i) => (
                  <TableRow key={i}>
                    {[1,2,3,4,5,6].map((j) => (
                      <Td key={j}><div className="h-4 w-20 animate-pulse bg-gray-100 rounded" /></Td>
                    ))}
                  </TableRow>
                ))
              ) : plans.length === 0 ? (
                <EmptyState message="No plans configured" />
              ) : (
                plans.map((p) => (
                  <TableRow key={p.id}>
                    <Td className="font-medium">{p.name}</Td>
                    <Td><Badge variant="muted">{p.type}</Badge></Td>
                    <Td className="text-sm">{p.speedDownMbps}/{p.speedUpMbps} Mbps</Td>
                    <Td className="font-semibold">{formatCurrency(Number(p.monthlyPrice))}</Td>
                    <Td>
                      <Badge variant={p.isActive ? "success" : "muted"}>
                        {p.isActive ? "Active" : "Inactive"}
                      </Badge>
                    </Td>
                    <Td>
                      <div className="flex items-center gap-1">
                        <Button
                          size="sm"
                          variant="ghost"
                          onClick={() => openEdit(p)}
                        >
                          Edit
                        </Button>
                        <Button
                          size="sm"
                          variant="ghost"
                          onClick={() => toggleActiveMutation.mutate({ id: p.id, isActive: p.isActive })}
                        >
                          {p.isActive ? "Archive" : "Restore"}
                        </Button>
                      </div>
                    </Td>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </CardContent>
      </Card>

      {/* Edit Plan Modal */}
      <Modal isOpen={!!editPlan} onClose={() => setEditPlan(null)} title="Edit Plan" className="max-w-lg">
        <form onSubmit={(e) => { e.preventDefault(); editPlanMutation.mutate(); }} className="space-y-4">
          <Input label="Plan Name" value={editForm.name} onChange={(e) => setEditForm(f => ({ ...f, name: e.target.value }))} />
          <div className="flex flex-col gap-1.5">
            <label className="text-sm font-medium text-gray-700">Type</label>
            <select
              className="block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
              value={editForm.type}
              onChange={(e) => setEditForm(f => ({ ...f, type: e.target.value }))}
            >
              <option value="POSTPAID">Postpaid</option>
              <option value="PREPAID">Prepaid</option>
            </select>
          </div>
          <div className="grid grid-cols-2 gap-3">
            <Input label="Download (Mbps)" type="number" min="1" value={editForm.speedDown} onChange={(e) => setEditForm(f => ({ ...f, speedDown: e.target.value }))} />
            <Input label="Upload (Mbps)" type="number" min="1" value={editForm.speedUp} onChange={(e) => setEditForm(f => ({ ...f, speedUp: e.target.value }))} />
          </div>
          <Input label="Monthly Price (₱)" type="number" min="0" step="0.01" value={editForm.price} onChange={(e) => setEditForm(f => ({ ...f, price: e.target.value }))} />
          <Input label="Description (optional)" value={editForm.description} onChange={(e) => setEditForm(f => ({ ...f, description: e.target.value }))} />
          <div className="flex justify-end gap-2 pt-1">
            <Button type="button" variant="outline" size="sm" onClick={() => setEditPlan(null)}>Cancel</Button>
            <Button type="submit" size="sm" isLoading={editPlanMutation.isPending}>Save Changes</Button>
          </div>
        </form>
      </Modal>

      {/* Add Plan Modal */}
      <Modal isOpen={showAdd} onClose={() => { setShowAdd(false); resetAdd(); }} title="Add Plan" className="max-w-lg">
        <form onSubmit={(e) => { e.preventDefault(); addPlanMutation.mutate(); }} className="space-y-4">
          <Input label="Plan Name" value={planName} onChange={(e) => setPlanName(e.target.value)} placeholder="e.g. Basic 10 Mbps" />

          <div className="flex flex-col gap-1.5">
            <label className="text-sm font-medium text-gray-700">Type</label>
            <select
              className="block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
              value={planType}
              onChange={(e) => setPlanType(e.target.value)}
            >
              <option value="POSTPAID">Postpaid</option>
              <option value="PREPAID">Prepaid</option>
            </select>
          </div>

          <div className="grid grid-cols-2 gap-3">
            <Input label="Download (Mbps)" type="number" min="1" value={speedDown} onChange={(e) => setSpeedDown(e.target.value)} />
            <Input label="Upload (Mbps)" type="number" min="1" value={speedUp} onChange={(e) => setSpeedUp(e.target.value)} />
          </div>

          <Input label="Monthly Price (₱)" type="number" min="0" step="0.01" value={price} onChange={(e) => setPrice(e.target.value)} />
          <Input label="Description (optional)" value={description} onChange={(e) => setDescription(e.target.value)} />

          <div className="flex justify-end gap-2 pt-1">
            <Button type="button" variant="outline" size="sm" onClick={() => { setShowAdd(false); resetAdd(); }}>Cancel</Button>
            <Button
              type="submit"
              size="sm"
              isLoading={addPlanMutation.isPending}
              disabled={!planName.trim() || !speedDown || !speedUp || !price}
            >
              Create Plan
            </Button>
          </div>
        </form>
      </Modal>
    </div>
  );
}

// ─── Sub-page: Users ──────────────────────────────────────────────────────────

interface UserItem {
  id: string; firstName: string; lastName: string; email: string;
  phone?: string; isActive: boolean;
  roleAssignments?: { role: string }[];
}

const ROLES = ["ADMIN", "STAFF", "COLLECTOR", "TECHNICIAN"];

function UsersSettings() {
  const qc = useQueryClient();
  const [showAdd, setShowAdd] = useState(false);
  const [form, setForm] = useState({ firstName: "", lastName: "", email: "", password: "", phone: "", role: "STAFF" });

  const { data, isLoading, refetch } = useQuery<UserItem[]>({
    queryKey: ["users-settings"],
    queryFn: async () => {
      const res = await api.get<UserItem[]>("/api/v1/users");
      return Array.isArray(res.data) ? res.data : [];
    },
  });

  const createUser = useMutation({
    mutationFn: async () => {
      await api.post("/api/v1/users", {
        firstName: form.firstName, lastName: form.lastName,
        email: form.email, password: form.password,
        phone: form.phone || undefined, role: form.role,
      });
    },
    onSuccess: () => {
      toast.success("User created!");
      setShowAdd(false);
      setForm({ firstName: "", lastName: "", email: "", password: "", phone: "", role: "STAFF" });
      refetch();
    },
    onError: (e: any) => toast.error(e.response?.data?.message ?? "Failed to create user"),
  });

  const toggleActive = useMutation({
    mutationFn: async ({ id, isActive }: { id: string; isActive: boolean }) => {
      await api.patch(`/api/v1/users/${id}`, { isActive: !isActive });
    },
    onSuccess: () => { toast.success("User updated"); refetch(); },
    onError: (e: any) => toast.error(e.response?.data?.message ?? "Failed"),
  });

  const users = data ?? [];

  return (
    <div className="space-y-4">
      <Card>
        <CardHeader>
          <CardTitle>Users ({users.length})</CardTitle>
          <Button size="sm" onClick={() => setShowAdd(true)}>+ Add User</Button>
        </CardHeader>
        <CardContent className="p-0">
          <Table>
            <TableHead>
              <TableRow><Th>Name</Th><Th>Email</Th><Th>Role</Th><Th>Status</Th><Th>Actions</Th></TableRow>
            </TableHead>
            <TableBody>
              {isLoading ? (
                Array.from({ length: 3 }).map((_, i) => (
                  <TableRow key={i}>{[1,2,3,4,5].map(j => <Td key={j}><div className="h-4 w-20 animate-pulse bg-gray-100 rounded" /></Td>)}</TableRow>
                ))
              ) : users.length === 0 ? (
                <EmptyState message="No users found" />
              ) : users.map(u => {
                const role = u.roleAssignments?.[0]?.role ?? "—";
                return (
                  <TableRow key={u.id}>
                    <Td className="font-medium">{u.firstName} {u.lastName}<div className="text-xs text-gray-400">{u.phone ?? ""}</div></Td>
                    <Td className="text-sm text-gray-600">{u.email}</Td>
                    <Td><Badge variant={role === "ADMIN" ? "danger" : role === "STAFF" ? "default" as any : "muted"}>{role}</Badge></Td>
                    <Td><Badge variant={u.isActive ? "success" : "muted"}>{u.isActive ? "Active" : "Inactive"}</Badge></Td>
                    <Td>
                      <Button size="sm" variant="ghost" onClick={() => toggleActive.mutate({ id: u.id, isActive: u.isActive })}>
                        {u.isActive ? "Deactivate" : "Activate"}
                      </Button>
                    </Td>
                  </TableRow>
                );
              })}
            </TableBody>
          </Table>
        </CardContent>
      </Card>

      <Modal isOpen={showAdd} onClose={() => setShowAdd(false)} title="Add New User">
        <div className="space-y-4">
          <div className="grid grid-cols-2 gap-3">
            <Input label="First Name *" value={form.firstName} onChange={e => setForm(f => ({ ...f, firstName: e.target.value }))} />
            <Input label="Last Name *" value={form.lastName} onChange={e => setForm(f => ({ ...f, lastName: e.target.value }))} />
          </div>
          <Input label="Email *" type="email" value={form.email} onChange={e => setForm(f => ({ ...f, email: e.target.value }))} />
          <Input label="Password *" type="password" value={form.password} onChange={e => setForm(f => ({ ...f, password: e.target.value }))} hint="Minimum 8 characters" />
          <Input label="Phone" value={form.phone} onChange={e => setForm(f => ({ ...f, phone: e.target.value }))} />
          <div className="flex flex-col gap-1.5">
            <label className="text-sm font-medium text-gray-700">Role *</label>
            <select className="border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
              value={form.role} onChange={e => setForm(f => ({ ...f, role: e.target.value }))}>
              {ROLES.map(r => <option key={r} value={r}>{r}</option>)}
            </select>
          </div>
          <div className="flex justify-end gap-2">
            <Button variant="outline" onClick={() => setShowAdd(false)}>Cancel</Button>
            <Button onClick={() => createUser.mutate()} isLoading={createUser.isPending}
              disabled={!form.firstName || !form.lastName || !form.email || form.password.length < 8}>
              Create User
            </Button>
          </div>
        </div>
      </Modal>
    </div>
  );
}

// ─── Main Page ─────────────────────────────────────────────────────────────────

const SUB_NAV = [
  { key: "tenant", label: "Tenant", icon: Building2 },
  { key: "billing", label: "Billing", icon: CreditCard },
  { key: "areas", label: "Areas & Zones", icon: Map },
  { key: "plans", label: "Plans", icon: Wifi },
  { key: "users", label: "Users", icon: Users },
] as const;

type SubPage = typeof SUB_NAV[number]["key"];

export default function SettingsPage() {
  const [active, setActive] = useState<SubPage>("tenant");

  return (
    <div className="space-y-4">
      <div>
        <h1 className="text-2xl font-bold text-gray-900">Settings</h1>
        <p className="text-sm text-gray-500">Manage your ISP configuration</p>
      </div>

      <div className="flex gap-6">
        {/* Left sub-nav */}
        <aside className="w-48 flex-shrink-0">
          <nav className="space-y-0.5">
            {SUB_NAV.map(({ key, label, icon: Icon }) => (
              <button
                key={key}
                onClick={() => setActive(key)}
                className={`w-full flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
                  active === key
                    ? "bg-blue-50 text-blue-700"
                    : "text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                }`}
              >
                <Icon className="h-4 w-4 flex-shrink-0" />
                <span className="flex-1 text-left">{label}</span>
                {active === key && <ChevronRight className="h-3 w-3 opacity-50" />}
              </button>
            ))}
          </nav>
        </aside>

        {/* Content */}
        <div className="flex-1 min-w-0">
          {active === "tenant" && <TenantSettings />}
          {active === "billing" && <BillingSettings />}
          {active === "areas" && <AreasSettings />}
          {active === "plans" && <PlansSettings />}
          {active === "users" && <UsersSettings />}
        </div>
      </div>
    </div>
  );
}