"use client";

import { useMemo, useState } from "react";
import { usePenaltyTypesReference } from "@/hooks/usePenaltyTypesReference";
import type { PenaltyValueKindDTO } from "@/lib/types/PenaltyTypesReferenceDTO";
import { ProtestViewModel } from "../../lib/view-models/ProtestViewModel";
import { Modal } from "@/ui/Modal";
import { Button } from "@/ui/Button";
import { Card } from "@/ui/Card";
import { Box } from "@/ui/Box";
import { Text } from "@/ui/Text";
import { Stack } from "@/ui/Stack";
import { Heading } from "@/ui/Heading";
import { Icon } from "@/ui/Icon";
import { TextArea } from "@/ui/TextArea";
import { Input } from "@/ui/Input";
import {
  AlertCircle,
  Video,
  Clock,
  Grid3x3,
  TrendingDown,
  CheckCircle,
  XCircle,
  AlertTriangle,
  ShieldAlert,
  Ban,
  DollarSign,
  FileWarning,
  type LucideIcon,
} from "lucide-react";

type PenaltyType = string;

interface ReviewProtestModalProps {
  protest: ProtestViewModel | null;
  onClose: () => void;
  onAccept: (
    protestId: string,
    penaltyType: PenaltyType,
    penaltyValue: number,
    stewardNotes: string
  ) => Promise<void>;
  onReject: (protestId: string, stewardNotes: string) => Promise<void>;
}

export function ReviewProtestModal({
  protest,
  onClose,
  onAccept,
  onReject,
}: ReviewProtestModalProps) {
  const [decision, setDecision] = useState<"accept" | "reject" | null>(null);
  const [penaltyType, setPenaltyType] = useState<PenaltyType>("time_penalty");
  const [penaltyValue, setPenaltyValue] = useState<number>(5);
  const [stewardNotes, setStewardNotes] = useState("");
  const [submitting, setSubmitting] = useState(false);
  const [showConfirmation, setShowConfirmation] = useState(false);

  const { data: penaltyTypesReferenceResult, isLoading: penaltyTypesLoading } = usePenaltyTypesReference();

  const penaltyOptions = useMemo(() => {
    const refs = penaltyTypesReferenceResult?.isOk() ? penaltyTypesReferenceResult.unwrap().penaltyTypes : [];
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    return refs.map((ref: any) => ({
      type: ref.type as PenaltyType,
      name: getPenaltyName(ref.type),
      requiresValue: ref.requiresValue,
      valueLabel: getPenaltyValueLabel(ref.valueKind),
      defaultValue: getPenaltyDefaultValue(ref.type, ref.valueKind),
      Icon: getPenaltyIcon(ref.type),
      colorClass: getPenaltyColor(ref.type),
    }));
  }, [penaltyTypesReferenceResult]);

  const selectedPenalty = useMemo(() => {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    return penaltyOptions.find((p: any) => p.type === penaltyType);
  }, [penaltyOptions, penaltyType]);

  if (!protest) return null;

  const handleSubmit = async () => {
    if (!decision || !stewardNotes.trim()) return;

    setSubmitting(true);
    try {
      if (decision === "accept") {
        await onAccept(protest.id, penaltyType, penaltyValue, stewardNotes);
      } else {
        await onReject(protest.id, stewardNotes);
      }
      onClose();
    } catch (err) {
      alert(err instanceof Error ? err.message : "Failed to submit decision");
    } finally {
      setSubmitting(false);
      setShowConfirmation(false);
    }
  };

  function getPenaltyIcon(type: PenaltyType) {
    switch (type) {
      case "time_penalty":
        return Clock;
      case "grid_penalty":
        return Grid3x3;
      case "points_deduction":
        return TrendingDown;
      case "disqualification":
        return XCircle;
      case "warning":
        return AlertTriangle;
      case "license_points":
        return ShieldAlert;
      case "probation":
        return FileWarning;
      case "fine":
        return DollarSign;
      case "race_ban":
        return Ban;
      default:
        return AlertCircle;
    }
  }

  function getPenaltyName(type: PenaltyType) {
    switch (type) {
      case "time_penalty":
        return "Time Penalty";
      case "grid_penalty":
        return "Grid Penalty";
      case "points_deduction":
        return "Points Deduction";
      case "disqualification":
        return "Disqualification";
      case "warning":
        return "Warning";
      case "license_points":
        return "License Points";
      case "probation":
        return "Probation";
      case "fine":
        return "Fine";
      case "race_ban":
        return "Race Ban";
      default:
        return type.replaceAll("_", " ");
    }
  }

  function getPenaltyValueLabel(valueKind: PenaltyValueKindDTO): string {
    switch (valueKind) {
      case "seconds":
        return "seconds";
      case "grid_positions":
        return "grid positions";
      case "points":
        return "points";
      case "races":
        return "races";
      case "none":
        return "";
    }
  }

  function getPenaltyDefaultValue(type: PenaltyType, valueKind: PenaltyValueKindDTO): number {
    if (type === "license_points") return 2;
    if (type === "race_ban") return 1;
    switch (valueKind) {
      case "seconds":
        return 5;
      case "grid_positions":
        return 3;
      case "points":
        return 5;
      case "races":
        return 1;
      case "none":
        return 0;
    }
  }

  function getPenaltyColor(type: PenaltyType) {
    switch (type) {
      case "time_penalty":
        return "text-blue-400 bg-blue-500/10 border-blue-500/30";
      case "grid_penalty":
        return "text-purple-400 bg-purple-500/10 border-purple-500/30";
      case "points_deduction":
        return "text-red-400 bg-red-500/10 border-red-500/30";
      case "disqualification":
        return "text-red-500 bg-red-500/10 border-red-500/30";
      case "warning":
        return "text-yellow-400 bg-yellow-500/10 border-yellow-500/30";
      case "license_points":
        return "text-orange-400 bg-orange-500/10 border-orange-500/30";
      case "probation":
        return "text-amber-400 bg-amber-500/10 border-amber-500/30";
      case "fine":
        return "text-green-400 bg-green-500/10 border-green-500/30";
      case "race_ban":
        return "text-red-600 bg-red-600/10 border-red-600/30";
      default:
        return "text-warning-amber bg-warning-amber/10 border-warning-amber/30";
    }
  }

  if (showConfirmation) {
    return (
      <Modal title="Confirm Decision" isOpen={true} onOpenChange={() => setShowConfirmation(false)}>
        <Stack gap={6} p={6}>
          <Box textAlign="center">
            <Stack gap={4}>
              {decision === "accept" ? (
                <Box display="flex" justifyContent="center">
                  <Box h="16" w="16" rounded="full" bg="bg-orange-500/20" display="flex" alignItems="center" justifyContent="center">
                    <Icon icon={AlertCircle} size={8} color="text-orange-400" />
                  </Box>
                </Box>
              ) : (
                <Box display="flex" justifyContent="center">
                  <Box h="16" w="16" rounded="full" bg="bg-gray-500/20" display="flex" alignItems="center" justifyContent="center">
                    <Icon icon={XCircle} size={8} color="text-gray-400" />
                  </Box>
                </Box>
              )}
              <Box>
                <Heading level={3} fontSize="xl" weight="bold" color="text-white">Confirm Decision</Heading>
                <Text color="text-gray-400" mt={2} block>
                  {decision === "accept"
                    ? (selectedPenalty?.requiresValue
                        ? `Issue ${penaltyValue} ${selectedPenalty.valueLabel} penalty?`
                        : `Issue ${selectedPenalty?.name ?? penaltyType} penalty?`)
                    : "Reject this protest?"}
                </Text>
              </Box>
            </Stack>
          </Box>

          <Card p={4} bg="bg-gray-800/50">
            <Text size="sm" color="text-gray-300" block>{stewardNotes}</Text>
          </Card>

          <Box display="flex" gap={3}>
            <Button
              variant="secondary"
              fullWidth
              onClick={() => setShowConfirmation(false)}
              disabled={submitting}
            >
              Cancel
            </Button>
            <Button
              variant="primary"
              fullWidth
              onClick={handleSubmit}
              disabled={submitting}
            >
              {submitting ? "Submitting..." : "Confirm Decision"}
            </Button>
          </Box>
        </Stack>
      </Modal>
    );
  }

  return (
    <Modal title="Review Protest" isOpen={true} onOpenChange={onClose}>
      <Stack gap={6} p={6}>
        <Box display="flex" alignItems="start" gap={4}>
          <Box h="12" w="12" rounded="full" bg="bg-orange-500/20" display="flex" alignItems="center" justifyContent="center" flexShrink={0}>
            <Icon icon={AlertCircle} size={6} color="text-orange-400" />
          </Box>
          <Box flexGrow={1}>
            <Heading level={2} fontSize="2xl" weight="bold" color="text-white">Review Protest</Heading>
            <Text color="text-gray-400" mt={1} block>
              Protest #{protest.id.substring(0, 8)}
            </Text>
          </Box>
        </Box>

        <Stack gap={4}>
          <Card p={4} bg="bg-gray-800/50">
            <Stack gap={3}>
              <Box display="flex" alignItems="center" justifyContent="between">
                <Text size="sm" color="text-gray-400">Filed Date</Text>
                <Text size="sm" color="text-white" weight="medium">
                  {new Date(protest.filedAt || protest.submittedAt).toLocaleString()}
                </Text>
              </Box>
              <Box display="flex" alignItems="center" justifyContent="between">
                <Text size="sm" color="text-gray-400">Incident Lap</Text>
                <Text size="sm" color="text-white" weight="medium">
                  Lap {protest.incident?.lap || 'N/A'}
                </Text>
              </Box>
              <Box display="flex" alignItems="center" justifyContent="between">
                <Text size="sm" color="text-gray-400">Status</Text>
                <Box as="span" px={2} py={1} rounded="sm" bg="bg-orange-500/20">
                  <Text size="xs" weight="medium" color="text-orange-400">
                    {protest.status}
                  </Text>
                </Box>
              </Box>
            </Stack>
          </Card>

          <Box>
            <Text as="label" size="sm" weight="medium" color="text-gray-400" block mb={2}>
              Description
            </Text>
            <Card p={4} bg="bg-gray-800/50">
              <Text color="text-gray-300" block>{protest.incident?.description || protest.description}</Text>
            </Card>
          </Box>

          {protest.comment && (
            <Box>
              <Text as="label" size="sm" weight="medium" color="text-gray-400" block mb={2}>
                Additional Comment
              </Text>
              <Card p={4} bg="bg-gray-800/50">
                <Text color="text-gray-300" block>{protest.comment}</Text>
              </Card>
            </Box>
          )}

          {protest.proofVideoUrl && (
            <Box>
              <Text as="label" size="sm" weight="medium" color="text-gray-400" block mb={2}>
                Evidence
              </Text>
              <Card p={4} bg="bg-gray-800/50">
                <Box
                  as="a"
                  href={protest.proofVideoUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                  display="flex"
                  alignItems="center"
                  gap={2}
                  color="text-orange-400"
                  hoverTextColor="text-orange-300"
                  transition
                >
                  <Icon icon={Video} size={4} />
                  <Text size="sm">View video evidence</Text>
                </Box>
              </Card>
            </Box>
          )}
        </Stack>
        <Box borderTop borderColor="border-gray-800" pt={6}>
          <Stack gap={4}>
            <Heading level={3} fontSize="lg" weight="semibold" color="text-white">Stewarding Decision</Heading>

            <Box display="grid" gridCols={2} gap={3}>
              <Button
                variant={decision === "accept" ? "primary" : "secondary"}
                fullWidth
                onClick={() => setDecision("accept")}
              >
                <Stack direction="row" align="center" gap={2} center>
                  <Icon icon={CheckCircle} size={4} />
                  Accept Protest
                </Stack>
              </Button>
              <Button
                variant={decision === "reject" ? "primary" : "secondary"}
                fullWidth
                onClick={() => setDecision("reject")}
              >
                <Stack direction="row" align="center" gap={2} center>
                  <Icon icon={XCircle} size={4} />
                  Reject Protest
                </Stack>
              </Button>
            </Box>

            {decision === "accept" && (
              <Stack gap={4}>
                <Box>
                  <Text as="label" size="sm" weight="medium" color="text-gray-400" block mb={2}>
                    Penalty Type
                  </Text>

                  {penaltyTypesLoading ? (
                    <Text size="sm" color="text-gray-500">Loading penalty types…</Text>
                  ) : (
                    <Box display="grid" gridCols={3} gap={2}>
                      {penaltyOptions.map(({ type, name, Icon: PenaltyIcon, colorClass, defaultValue }: { type: string; name: string; Icon: LucideIcon; colorClass: string; defaultValue: number }) => {
                        const isSelected = penaltyType === type;
                        return (
                          <Box
                            key={type}
                            as="button"
                            onClick={() => {
                              setPenaltyType(type);
                              setPenaltyValue(defaultValue);
                            }}
                            p={3}
                            rounded="lg"
                            border
                            borderWidth={isSelected ? "2px" : "1px"}
                            transition
                            borderColor={isSelected ? undefined : "border-charcoal-outline"}
                            bg={isSelected ? undefined : "bg-iron-gray/50"}
                            hoverBorderColor={!isSelected ? "border-gray-600" : undefined}
                            // eslint-disable-next-line gridpilot-rules/component-classification
                            className={isSelected ? colorClass : ""}
                          >
                            <Icon icon={PenaltyIcon} size={5} mx="auto" mb={1} color={isSelected ? undefined : "text-gray-400"} />
                            <Text size="xs" weight="medium" color={isSelected ? undefined : "text-gray-400"} block textAlign="center">{name}</Text>
                          </Box>
                        );
                      })}
                    </Box>
                  )}
                </Box>

                {selectedPenalty?.requiresValue && (
                  <Box>
                    <Text as="label" size="sm" weight="medium" color="text-gray-400" block mb={2}>
                      Penalty Value ({selectedPenalty.valueLabel})
                    </Text>
                    <Input
                      type="number"
                      value={penaltyValue}
                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => setPenaltyValue(Number(e.target.value))}
                      min={1}
                    />
                  </Box>
                )}
              </Stack>
            )}

            <Box>
              <Text as="label" size="sm" weight="medium" color="text-gray-400" block mb={2}>
                Steward Notes *
              </Text>
              <TextArea
                value={stewardNotes}
                onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setStewardNotes(e.target.value)}
                placeholder="Explain your decision and reasoning..."
                rows={4}
              />
            </Box>
          </Stack>
        </Box>

        <Box display="flex" gap={3} pt={4} borderTop borderColor="border-gray-800">
          <Button
            variant="secondary"
            fullWidth
            onClick={onClose}
            disabled={submitting}
          >
            Cancel
          </Button>
          <Button
            variant="primary"
            fullWidth
            onClick={() => setShowConfirmation(true)}
            disabled={!decision || !stewardNotes.trim() || submitting}
          >
            Submit Decision
          </Button>
        </Box>
      </Stack>
    </Modal>
  );
}