"use client";

import { useState } from "react";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { PageHeader } from "@/components/shared/page-header";
import { DataTable, Column } from "@/components/shared/data-table";
import { ConfirmDialog } from "@/components/shared/confirm-dialog";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import { NativeSelect } from "@/components/ui/native-select";
import { Textarea } from "@/components/ui/textarea";
import { LoadingSpinner } from "@/components/ui/loading";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from "@/components/ui/dialog";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { invitationsApi, Invitation, locationsApi, Location } from "@/lib/api-client";
import { formatDate } from "@/lib/utils";
import {
  MoreHorizontal,
  Plus,
  Send,
  RefreshCw,
  X,
  Upload,
  Users,
} from "lucide-react";

const statusColors: Record<string, "default" | "success" | "warning" | "destructive" | "secondary"> = {
  pending: "warning",
  accepted: "success",
  expired: "secondary",
  cancelled: "destructive",
};

export default function InvitationsPage() {
  const queryClient = useQueryClient();
  const [page, setPage] = useState(1);
  const [createDialog, setCreateDialog] = useState(false);
  const [bulkDialog, setBulkDialog] = useState(false);
  const [cancelDialog, setCancelDialog] = useState<{ open: boolean; invitation: Invitation | null }>({
    open: false,
    invitation: null,
  });

  // Form state
  const [formData, setFormData] = useState({
    email: "",
    firstName: "",
    lastName: "",
    role: "employee",
    locationId: "",
  });
  const [bulkEmails, setBulkEmails] = useState("");

  const { data, isLoading } = useQuery({
    queryKey: ["invitations", page],
    queryFn: async () => {
      const response = await invitationsApi.getAll({ page, limit: 10 });
      return response.data;
    },
  });

  const { data: locations } = useQuery({
    queryKey: ["locations-list"],
    queryFn: async () => {
      const response = await locationsApi.getAll({ limit: 100 });
      return response.data.data;
    },
  });

  const createMutation = useMutation({
    mutationFn: () => invitationsApi.create(formData),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["invitations"] });
      setCreateDialog(false);
      setFormData({ email: "", firstName: "", lastName: "", role: "employee", locationId: "" });
    },
  });

  const bulkMutation = useMutation({
    mutationFn: () => {
      const lines = bulkEmails.split("\n").filter((line) => line.trim());
      const invitations = lines.map((line) => {
        const [email, firstName = "", lastName = ""] = line.split(",").map((s) => s.trim());
        return { email, firstName, lastName };
      });
      return invitationsApi.bulkInvite({ invitations });
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["invitations"] });
      setBulkDialog(false);
      setBulkEmails("");
    },
  });

  const resendMutation = useMutation({
    mutationFn: (id: string) => invitationsApi.resend(id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["invitations"] });
    },
  });

  const cancelMutation = useMutation({
    mutationFn: (id: string) => invitationsApi.cancel(id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["invitations"] });
      setCancelDialog({ open: false, invitation: null });
    },
  });

  const columns: Column<Invitation>[] = [
    {
      key: "recipient",
      header: "Recipient",
      cell: (inv) => (
        <div>
          <p className="font-medium">
            {inv.firstName} {inv.lastName}
          </p>
          <p className="text-xs text-muted-foreground">{inv.email}</p>
        </div>
      ),
    },
    {
      key: "role",
      header: "Role",
      cell: (inv) => (
        <Badge variant="outline">
          {inv.role.charAt(0).toUpperCase() + inv.role.slice(1)}
        </Badge>
      ),
    },
    {
      key: "status",
      header: "Status",
      cell: (inv) => (
        <Badge variant={statusColors[inv.status]}>
          {inv.status.charAt(0).toUpperCase() + inv.status.slice(1)}
        </Badge>
      ),
    },
    {
      key: "expiresAt",
      header: "Expires",
      cell: (inv) => (
        <span className="text-muted-foreground">
          {new Date(inv.expiresAt) < new Date() ? "Expired" : formatDate(inv.expiresAt)}
        </span>
      ),
    },
    {
      key: "createdAt",
      header: "Sent",
      cell: (inv) => (
        <span className="text-muted-foreground">{formatDate(inv.createdAt)}</span>
      ),
    },
    {
      key: "actions",
      header: "",
      className: "w-12",
      cell: (inv) => (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" size="icon">
              <MoreHorizontal className="h-4 w-4" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            {inv.status === "pending" && (
              <>
                <DropdownMenuItem onClick={() => resendMutation.mutate(inv.id)}>
                  <RefreshCw className="mr-2 h-4 w-4" />
                  Resend
                </DropdownMenuItem>
                <DropdownMenuItem
                  destructive
                  onClick={() => setCancelDialog({ open: true, invitation: inv })}
                >
                  <X className="mr-2 h-4 w-4" />
                  Cancel
                </DropdownMenuItem>
              </>
            )}
            {inv.status === "expired" && (
              <DropdownMenuItem onClick={() => resendMutation.mutate(inv.id)}>
                <RefreshCw className="mr-2 h-4 w-4" />
                Resend
              </DropdownMenuItem>
            )}
          </DropdownMenuContent>
        </DropdownMenu>
      ),
    },
  ];

  return (
    <div className="space-y-6">
      <PageHeader
        title="Invitations"
        description="Invite new users to join your platform"
      >
        <Button variant="outline" onClick={() => setBulkDialog(true)}>
          <Upload className="mr-2 h-4 w-4" />
          Bulk Invite
        </Button>
        <Button onClick={() => setCreateDialog(true)}>
          <Plus className="mr-2 h-4 w-4" />
          Send Invitation
        </Button>
      </PageHeader>

      <DataTable
        data={data?.data || []}
        columns={columns}
        isLoading={isLoading}
        pagination={
          data
            ? {
                page,
                totalPages: data.totalPages,
                onPageChange: setPage,
              }
            : undefined
        }
        emptyMessage="No invitations sent yet"
      />

      {/* Create Invitation Dialog */}
      <Dialog open={createDialog} onOpenChange={setCreateDialog}>
        <DialogContent onClose={() => setCreateDialog(false)}>
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <Send className="h-5 w-5" />
              Send Invitation
            </DialogTitle>
            <DialogDescription>
              Send an invitation email to a new user
            </DialogDescription>
          </DialogHeader>

          <form
            onSubmit={(e) => {
              e.preventDefault();
              createMutation.mutate();
            }}
            className="space-y-4"
          >
            <div className="grid gap-4 sm:grid-cols-2">
              <div>
                <label className="text-sm font-medium">First Name</label>
                <Input
                  value={formData.firstName}
                  onChange={(e) => setFormData({ ...formData, firstName: e.target.value })}
                  placeholder="John"
                  required
                />
              </div>
              <div>
                <label className="text-sm font-medium">Last Name</label>
                <Input
                  value={formData.lastName}
                  onChange={(e) => setFormData({ ...formData, lastName: e.target.value })}
                  placeholder="Doe"
                  required
                />
              </div>
            </div>
            <div>
              <label className="text-sm font-medium">Email</label>
              <Input
                type="email"
                value={formData.email}
                onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                placeholder="john@example.com"
                required
              />
            </div>
            <div className="grid gap-4 sm:grid-cols-2">
              <div>
                <label className="text-sm font-medium">Role</label>
                <NativeSelect
                  value={formData.role}
                  onChange={(e) => setFormData({ ...formData, role: e.target.value })}
                  options={[
                    { value: "employee", label: "Employee" },
                    { value: "manager", label: "Manager" },
                    { value: "admin", label: "Admin" },
                  ]}
                />
              </div>
              <div>
                <label className="text-sm font-medium">Location (Optional)</label>
                <NativeSelect
                  value={formData.locationId}
                  onChange={(e) => setFormData({ ...formData, locationId: e.target.value })}
                  options={[
                    { value: "", label: "Select location" },
                    ...(locations?.map((loc: Location) => ({ value: loc.id, label: loc.name })) || []),
                  ]}
                />
              </div>
            </div>

            <DialogFooter className="mt-6">
              <Button type="button" variant="outline" onClick={() => setCreateDialog(false)}>
                Cancel
              </Button>
              <Button type="submit" disabled={createMutation.isPending}>
                {createMutation.isPending ? (
                  <>
                    <LoadingSpinner size="sm" className="mr-2" />
                    Sending...
                  </>
                ) : (
                  <>
                    <Send className="mr-2 h-4 w-4" />
                    Send Invitation
                  </>
                )}
              </Button>
            </DialogFooter>
          </form>
        </DialogContent>
      </Dialog>

      {/* Bulk Invite Dialog */}
      <Dialog open={bulkDialog} onOpenChange={setBulkDialog}>
        <DialogContent onClose={() => setBulkDialog(false)}>
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <Users className="h-5 w-5" />
              Bulk Invite
            </DialogTitle>
            <DialogDescription>
              Enter multiple users to invite, one per line. Format: email, firstName, lastName
            </DialogDescription>
          </DialogHeader>

          <form
            onSubmit={(e) => {
              e.preventDefault();
              bulkMutation.mutate();
            }}
            className="space-y-4"
          >
            <div>
              <Textarea
                value={bulkEmails}
                onChange={(e) => setBulkEmails(e.target.value)}
                placeholder="john@example.com, John, Doe
jane@example.com, Jane, Smith
mike@example.com, Mike, Johnson"
                className="min-h-[200px] font-mono text-sm"
                required
              />
              <p className="text-xs text-muted-foreground mt-2">
                Format: email, firstName, lastName (one per line)
              </p>
            </div>

            <DialogFooter>
              <Button type="button" variant="outline" onClick={() => setBulkDialog(false)}>
                Cancel
              </Button>
              <Button type="submit" disabled={bulkMutation.isPending}>
                {bulkMutation.isPending ? (
                  <>
                    <LoadingSpinner size="sm" className="mr-2" />
                    Sending...
                  </>
                ) : (
                  <>
                    <Upload className="mr-2 h-4 w-4" />
                    Send Invitations
                  </>
                )}
              </Button>
            </DialogFooter>
          </form>
        </DialogContent>
      </Dialog>

      {/* Cancel Dialog */}
      <ConfirmDialog
        open={cancelDialog.open}
        onOpenChange={(open) => setCancelDialog({ open, invitation: null })}
        title="Cancel Invitation"
        description={`Are you sure you want to cancel the invitation for ${cancelDialog.invitation?.email}?`}
        confirmText="Cancel Invitation"
        variant="destructive"
        isLoading={cancelMutation.isPending}
        onConfirm={() => cancelDialog.invitation && cancelMutation.mutate(cancelDialog.invitation.id)}
      />
    </div>
  );
}