"use client";

import {useState} from "react";
import {useRouter} from "next/navigation";
import {Button} from "@/components/ui/button";
import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
import {Input} from "@/components/ui/input";
import {Label} from "@/components/ui/label";
import {Select} from "@/components/ui/select";
import {UserPlus} from "lucide-react";
import {inviteStaff} from "@/features/staff/server/actions";

export function InviteStaffForm({tenantSlug}: {tenantSlug: string}) {
  const router = useRouter();
  const [isPending, setIsPending] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [credentials, setCredentials] = useState<{email: string; password: string} | null>(null);

  async function handleSubmit(formData: FormData) {
    setError(null);
    setCredentials(null);
    setIsPending(true);
    formData.set("tenantSlug", tenantSlug);
    try {
      const result = await inviteStaff(formData);
      if (result.success && result.tempPassword) {
        const email = formData.get("email") as string;
        setCredentials({email, password: result.tempPassword});
        router.refresh();
      } else if (result.error) {
        setError(result.error);
      }
    } finally {
      setIsPending(false);
    }
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <UserPlus className="h-4 w-4" />
          Invite Staff Member
        </CardTitle>
      </CardHeader>
      <CardContent>
        <form action={handleSubmit} className="grid gap-4 sm:grid-cols-2">
          <div>
            <Label htmlFor="firstName">First Name *</Label>
            <Input id="firstName" name="firstName" className="mt-1" required />
          </div>
          <div>
            <Label htmlFor="lastName">Last Name</Label>
            <Input id="lastName" name="lastName" className="mt-1" />
          </div>
          <div>
            <Label htmlFor="email">Email *</Label>
            <Input id="email" name="email" type="email" className="mt-1" required />
          </div>
          <div>
            <Label htmlFor="role">Role *</Label>
            <Select id="role" name="role" className="mt-1" defaultValue="COMPANY_STAFF" required>
              <option value="COMPANY_STAFF">Staff</option>
              <option value="COMPANY_ADMIN">Admin</option>
            </Select>
          </div>
          <div className="sm:col-span-2 flex justify-end">
            <Button type="submit" disabled={isPending} className="gap-2">
              <UserPlus className="h-4 w-4" />
              {isPending ? "Inviting..." : "Invite Staff"}
            </Button>
          </div>
        </form>

        {credentials && (
          <div className="mt-4 rounded-xl border border-green-200 bg-green-50 p-4">
            <p className="font-semibold text-green-800 text-sm">Staff member created successfully!</p>
            <p className="text-sm text-green-700 mt-1">Share these credentials:</p>
            <div className="mt-2 space-y-1 text-sm font-mono bg-white rounded-lg border border-green-200 p-3">
              <p><span className="text-slate-500">Email:</span> {credentials.email}</p>
              <p><span className="text-slate-500">Password:</span> {credentials.password}</p>
            </div>
            <p className="mt-2 text-xs text-green-600">Ask them to change their password after first login.</p>
          </div>
        )}

        {error && <p className="mt-3 rounded-lg bg-red-50 border border-red-200 px-3 py-2 text-sm text-red-600">{error}</p>}
      </CardContent>
    </Card>
  );
}