polaris-task-force/src/components/frontend/banking/CreateAccountDialog.tsx

"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { PlusIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { createBankAccount } from "@/app/(frontend)/logistics/banking/actions";

interface CreateAccountDialogProps {
  isManager: boolean;
  factions: { id: number; name: string }[];
}

type AccountType = "treasury" | "faction" | "personal";

export function CreateAccountDialog({ isManager, factions }: CreateAccountDialogProps) {
  const router = useRouter();
  const [open, setOpen] = useState(false);
  const [name, setName] = useState("");
  const [accountType, setAccountType] = useState<AccountType>("personal");
  const [ownerFactionId, setOwnerFactionId] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function handleSubmit() {
    if (!name.trim()) {
      setError("Account name is required.");
      return;
    }
    if (accountType === "faction" && !ownerFactionId) {
      setError("Select an owner faction.");
      return;
    }
    setLoading(true);
    setError(null);
    const res = await createBankAccount({
      name: name.trim(),
      accountType,
      ownerFactionId: accountType === "faction" ? Number(ownerFactionId) : undefined,
    });
    if (res.success) {
      setOpen(false);
      setName("");
      setAccountType("personal");
      setOwnerFactionId("");
      router.refresh();
    } else {
      setError(res.error ?? "Failed to create account.");
      setLoading(false);
    }
  }

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button size="sm">
          <PlusIcon className="size-4" />
          New Account
        </Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Create Account</DialogTitle>
          <DialogDescription>
            Create a new bank account for the unit, a faction, or yourself.
          </DialogDescription>
        </DialogHeader>
        <div className="flex flex-col gap-4">
          <div className="flex flex-col gap-1.5">
            <Label>Account name</Label>
            <Input
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder="e.g., Unit Treasury"
            />
          </div>
          <div className="flex flex-col gap-1.5">
            <Label>Account type</Label>
            <Select
              value={accountType}
              onValueChange={(v) => setAccountType(v as AccountType)}
            >
              <SelectTrigger>
                <SelectValue placeholder="Select type" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="treasury">Treasury</SelectItem>
                {isManager && <SelectItem value="faction">Faction</SelectItem>}
                <SelectItem value="personal">Personal</SelectItem>
              </SelectContent>
            </Select>
          </div>
          {accountType === "faction" && (
            <div className="flex flex-col gap-1.5">
              <Label>Owner faction</Label>
              <Select value={ownerFactionId} onValueChange={setOwnerFactionId}>
                <SelectTrigger>
                  <SelectValue placeholder="Select faction" />
                </SelectTrigger>
                <SelectContent>
                  {factions.map((f) => (
                    <SelectItem key={f.id} value={String(f.id)}>
                      {f.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          )}
          {accountType === "personal" && !isManager && (
            <p className="text-xs text-muted-foreground">
              This will create a personal account for you.
            </p>
          )}
          {error && <p className="text-sm text-red-400">{error}</p>}
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={() => setOpen(false)}>
            Cancel
          </Button>
          <Button onClick={handleSubmit} disabled={loading}>
            {loading ? "Creating..." : "Create"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}