"use client";

import { useRouter } from "next/navigation";
import { useState, useTransition } from "react";
import { Button } from "@/components/ui/Button";
import { Card, CardHeader, CardTitle, Field, Label } from "@/components/ui/Card";
import { Input } from "@/components/ui/Input";
import { reviewSecurityEvent } from "@/lib/actions/election-security";
import {
  inviteElectionObserver,
  revokeElectionObserver,
} from "@/lib/actions/election-distribute";
import { formatDate } from "@/lib/utils/format";
import type { ElectionSecurityEventRow } from "@/lib/queries/election-security-queries";

interface ObserverRow {
  id: string;
  userId: string;
  invitedAt: Date | string;
  name: string;
  email: string;
  role: string;
}

interface SecurityPanelProps {
  electionId: string;
  events: ElectionSecurityEventRow[];
  observers: ObserverRow[];
  readOnly?: boolean;
}

export function SecurityPanel({
  electionId,
  events,
  observers,
  readOnly,
}: SecurityPanelProps) {
  const router = useRouter();
  const [error, setError] = useState<string | null>(null);
  const [message, setMessage] = useState<string | null>(null);
  const [isPending, startTransition] = useTransition();
  const [observerEmail, setObserverEmail] = useState("");
  const [observerName, setObserverName] = useState("");

  function run(
    action: () => Promise<{ success: true } | { success: false; error: string }>,
    successMessage?: string
  ) {
    setError(null);
    setMessage(null);
    startTransition(async () => {
      const result = await action();
      if (!result.success) {
        setError(result.error);
        return;
      }
      if (successMessage) setMessage(successMessage);
      router.refresh();
    });
  }

  return (
    <div className="space-y-5">
      <Card className="overflow-hidden">
        <CardHeader className="border-b border-border">
          <CardTitle>Security events</CardTitle>
        </CardHeader>
        <div className="overflow-x-auto">
          <table className="w-full min-w-[640px] text-left text-[13px]">
            <thead className="bg-[#F8FAFC] text-[11px] uppercase tracking-wide text-muted">
              <tr>
                <th className="px-4 py-3 font-bold">When</th>
                <th className="px-4 py-3 font-bold">Type</th>
                <th className="px-4 py-3 font-bold">Status</th>
                <th className="px-4 py-3 font-bold">Detail</th>
                <th className="px-4 py-3 font-bold">Actions</th>
              </tr>
            </thead>
            <tbody>
              {events.length === 0 ? (
                <tr>
                  <td colSpan={5} className="px-4 py-8 text-center text-muted">
                    No security flags yet. Anomaly scans never block ballots.
                  </td>
                </tr>
              ) : (
                events.map((event) => (
                  <tr key={event.id} className="border-t border-border">
                    <td className="px-4 py-3">{formatDate(event.createdAt)}</td>
                    <td className="px-4 py-3 font-semibold">
                      {event.eventType.replace(/_/g, " ")}
                    </td>
                    <td className="px-4 py-3">{event.reviewStatus}</td>
                    <td className="px-4 py-3 text-muted">
                      {event.detail
                        ? JSON.stringify(event.detail).slice(0, 80)
                        : "—"}
                    </td>
                    <td className="px-4 py-3">
                      {!readOnly && event.reviewStatus === "open" && (
                        <div className="flex flex-wrap gap-1">
                          <Button
                            type="button"
                            size="sm"
                            variant="outline"
                            loading={isPending}
                            onClick={() =>
                              run(() =>
                                reviewSecurityEvent({
                                  eventId: event.id,
                                  reviewStatus: "dismissed",
                                })
                              )
                            }
                          >
                            Dismiss
                          </Button>
                          <Button
                            type="button"
                            size="sm"
                            variant="outline"
                            loading={isPending}
                            onClick={() =>
                              run(() =>
                                reviewSecurityEvent({
                                  eventId: event.id,
                                  reviewStatus: "confirmed_fraud",
                                })
                              )
                            }
                          >
                            Confirm fraud
                          </Button>
                        </div>
                      )}
                    </td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>
      </Card>

      <Card className="p-5">
        <CardHeader className="mb-3 px-0 py-0">
          <CardTitle>Election observers</CardTitle>
        </CardHeader>
        {!readOnly && (
          <div className="mb-4 grid gap-3 sm:grid-cols-3">
            <Field>
              <Label>Email</Label>
              <Input
                value={observerEmail}
                onChange={(e) => setObserverEmail(e.target.value)}
                placeholder="observer@example.com"
              />
            </Field>
            <Field>
              <Label>Name</Label>
              <Input
                value={observerName}
                onChange={(e) => setObserverName(e.target.value)}
                placeholder="Optional"
              />
            </Field>
            <div className="flex items-end">
              <Button
                type="button"
                loading={isPending}
                onClick={() => {
                  run(
                    () =>
                      inviteElectionObserver({
                        electionId,
                        email: observerEmail,
                        name: observerName || undefined,
                      }),
                    "Observer invited"
                  );
                  setObserverEmail("");
                  setObserverName("");
                }}
              >
                Invite observer
              </Button>
            </div>
          </div>
        )}
        <ul className="space-y-2">
          {observers.length === 0 ? (
            <li className="text-[13px] text-muted">No active observers.</li>
          ) : (
            observers.map((observer) => (
              <li
                key={observer.id}
                className="flex flex-wrap items-center justify-between gap-2 rounded-lg border border-border px-3 py-2 text-[13px]"
              >
                <div>
                  <p className="font-semibold">{observer.name}</p>
                  <p className="text-muted">{observer.email}</p>
                </div>
                {!readOnly && (
                  <Button
                    type="button"
                    size="sm"
                    variant="outline"
                    loading={isPending}
                    onClick={() =>
                      run(() =>
                        revokeElectionObserver({
                          electionId,
                          observerId: observer.id,
                        })
                      )
                    }
                  >
                    Revoke
                  </Button>
                )}
              </li>
            ))
          )}
        </ul>
      </Card>

      {error && (
        <p className="rounded-md bg-danger-bg px-3 py-2 text-[13px] text-danger">
          {error}
        </p>
      )}
      {message && (
        <p className="rounded-md bg-success-bg px-3 py-2 text-[13px] text-success">
          {message}
        </p>
      )}
    </div>
  );
}