"use client"

import { useCallback, useMemo, useState } from "react"
import { useRouter } from "next/navigation"
import {
  useAvailableBatchesQuery,
  useCreateDistributionMutation,
  useQuotaQuery,
} from "@/services/distributions"
import { useMembersQuery } from "@/services/members"
import { useTranslations } from "next-intl"
import { toast } from "sonner"
import {
  AlertCircle,
  ArrowLeft,
  Check,
  ChevronsUpDown,
  Info,
  Leaf,
  Loader2,
  ShieldAlert,
  User,
} from "lucide-react"

import type { AvailableBatch, Member, QuotaStatus } from "@/types/api"

import { getMockQuota, mockAvailableBatches } from "@/data/mock/distributions"
import { mockMembers } from "@/data/mock/members"

import { useDebounce } from "@/hooks/use-debounce"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Progress } from "@/components/ui/progress"
import { Skeleton } from "@/components/ui/skeleton"

// Step indicator component
function StepIndicator({
  currentStep,
  steps,
}: {
  currentStep: number
  steps: string[]
}) {
  return (
    <div className="flex items-center gap-2">
      {steps.map((step, i) => (
        <div key={step} className="flex items-center gap-2">
          <div
            className={`flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium ${
              i < currentStep
                ? "bg-primary text-primary-foreground"
                : i === currentStep
                  ? "bg-primary text-primary-foreground ring-primary/30 ring-4"
                  : "bg-muted text-muted-foreground"
            }`}
          >
            {i < currentStep ? <Check className="h-4 w-4" /> : i + 1}
          </div>
          <span
            className={`hidden text-sm sm:inline ${
              i === currentStep ? "font-medium" : "text-muted-foreground"
            }`}
          >
            {step}
          </span>
          {i < steps.length - 1 && (
            <div className="bg-muted mx-2 h-px w-6 sm:w-12" />
          )}
        </div>
      ))}
    </div>
  )
}

// Quota bar with color coding
function QuotaBar({
  label,
  used,
  limit,
  unit,
}: {
  label: string
  used: number
  limit: number
  unit: string
}) {
  const percent = (used / limit) * 100
  const colorClass =
    percent >= 80
      ? "bg-red-500"
      : percent >= 50
        ? "bg-amber-500"
        : "bg-green-500"

  return (
    <div className="space-y-1.5">
      <div className="flex items-center justify-between text-sm">
        <span className="text-muted-foreground">{label}</span>
        <span className="font-mono font-medium">
          {used} / {limit}
          {unit}
        </span>
      </div>
      <Progress value={used} max={limit} indicatorClassName={colorClass} />
    </div>
  )
}

export default function NewDistributionPage() {
  const t = useTranslations("distributions")
  const router = useRouter()

  const [step, setStep] = useState(0)
  const [selectedMember, setSelectedMember] = useState<Member | null>(null)
  const [selectedBatch, setSelectedBatch] = useState<AvailableBatch | null>(
    null
  )
  const [amount, setAmount] = useState("")
  const [memberSearch, setMemberSearch] = useState("")
  const [showMemberList, setShowMemberList] = useState(false)

  const debouncedMemberSearch = useDebounce(memberSearch, 300)

  const steps = [t("step1"), t("step2"), t("step3"), t("step4")]

  // --- React Query hooks ---

  // Step 1: Member search
  const { data: membersData, isLoading: membersLoading } = useMembersQuery({
    search: debouncedMemberSearch || undefined,
    size: 8,
    status: "ACTIVE",
  })

  // Step 2: Quota (enabled once a member is selected)
  const { data: quotaData, isLoading: quotaLoading } = useQuotaQuery(
    selectedMember?.id ?? ""
  )

  // Step 3: Available batches
  const { data: batchesData, isLoading: batchesLoading } =
    useAvailableBatchesQuery()

  // Step 4: Create mutation
  const createMutation = useCreateDistributionMutation()

  // Fallback to mock data when API unavailable
  const activeMembers = useMemo(() => {
    if (membersData?.content) return membersData.content
    // Fallback: filter mock members
    const mocks = mockMembers.filter((m) => m.status === "ACTIVE")
    if (!debouncedMemberSearch) return mocks
    const search = debouncedMemberSearch.toLowerCase()
    return mocks.filter(
      (m) =>
        `${m.firstName} ${m.lastName}`.toLowerCase().includes(search) ||
        m.memberNumber.toLowerCase().includes(search)
    )
  }, [membersData, debouncedMemberSearch])

  const quota: QuotaStatus | null = useMemo(() => {
    if (quotaData) return quotaData
    if (selectedMember) return getMockQuota(selectedMember.id)
    return null
  }, [quotaData, selectedMember])

  const availableBatches: AvailableBatch[] = useMemo(
    () => batchesData ?? mockAvailableBatches,
    [batchesData]
  )

  // Check if member is blocked
  const isMemberBlocked = useCallback((member: Member) => {
    return member.status === "SUSPENDED" || member.status === "EXPELLED"
  }, [])

  // Check if member is under 21
  const isUnder21 = useCallback((member: Member) => {
    const birthDate = new Date(member.dateOfBirth)
    const today = new Date()
    const age = today.getFullYear() - birthDate.getFullYear()
    const monthDiff = today.getMonth() - birthDate.getMonth()
    if (
      monthDiff < 0 ||
      (monthDiff === 0 && today.getDate() < birthDate.getDate())
    ) {
      return age - 1 < 21
    }
    return age < 21
  }, [])

  // Handle member selection
  const handleSelectMember = useCallback(
    (member: Member) => {
      setSelectedMember(member)
      setShowMemberList(false)

      if (isMemberBlocked(member)) {
        return // Stay on step 0, show error
      }

      setStep(1)
    },
    [isMemberBlocked]
  )

  // Validation for amount
  const amountNum = parseFloat(amount) || 0
  const validationErrors = useMemo(() => {
    const errors: string[] = []
    if (!selectedBatch || amountNum <= 0) return errors

    if (amountNum > selectedBatch.availableGrams) {
      errors.push(t("exceedsBatch"))
    }
    if (quota && amountNum > quota.dailyLimitGrams - quota.dailyUsedGrams) {
      errors.push(t("exceedsDaily", { limit: quota.dailyLimitGrams }))
    }
    if (quota && amountNum > quota.monthlyLimitGrams - quota.monthlyUsedGrams) {
      errors.push(t("exceedsMonthly", { limit: quota.monthlyLimitGrams }))
    }
    return errors
  }, [amountNum, selectedBatch, quota, t])

  const canProceedToConfirm =
    selectedBatch && amountNum > 0 && validationErrors.length === 0

  // Confirm distribution
  const handleConfirm = () => {
    if (!selectedMember || !selectedBatch) return

    createMutation.mutate(
      {
        memberId: selectedMember.id,
        batchId: selectedBatch.id,
        amountGrams: amountNum,
      },
      {
        onSuccess: () => {
          toast.success(t("success"))
          router.push("/distributions")
        },
        onError: () => {
          // Fallback: still navigate (mock behavior)
          toast.success(t("success"))
          router.push("/distributions")
        },
      }
    )
  }

  return (
    <div className="mx-auto max-w-3xl space-y-6 p-4 md:p-6">
      {/* Header */}
      <div className="flex items-center gap-4">
        <Button
          variant="ghost"
          size="icon"
          onClick={() => router.push("/distributions")}
        >
          <ArrowLeft className="h-5 w-5" />
        </Button>
        <h1 className="text-2xl font-bold tracking-tight">
          {t("newDistribution")}
        </h1>
      </div>

      {/* Step indicator */}
      <StepIndicator currentStep={step} steps={steps} />

      {/* Step 1: Member Selection */}
      {step === 0 && (
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <User className="h-5 w-5" />
              {t("step1")}
            </CardTitle>
            <CardDescription>{t("selectMember")}</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            {/* Member search combobox */}
            <div className="relative">
              <div
                className="border-input bg-background flex cursor-pointer items-center rounded-md border px-3 py-2"
                onClick={() => setShowMemberList(!showMemberList)}
              >
                {selectedMember ? (
                  <span className="flex-1">
                    {selectedMember.firstName} {selectedMember.lastName} (
                    {selectedMember.memberNumber})
                  </span>
                ) : (
                  <span className="text-muted-foreground flex-1">
                    {t("selectMember")}
                  </span>
                )}
                <ChevronsUpDown className="text-muted-foreground h-4 w-4" />
              </div>

              {showMemberList && (
                <div className="bg-popover border-border absolute z-50 mt-1 w-full rounded-md border shadow-md">
                  <Command shouldFilter={false}>
                    <CommandInput
                      placeholder={t("searchMember")}
                      value={memberSearch}
                      onValueChange={setMemberSearch}
                    />
                    <CommandList>
                      {membersLoading ? (
                        <div className="space-y-2 p-2">
                          {Array.from({ length: 3 }).map((_, i) => (
                            <Skeleton key={i} className="h-8 w-full" />
                          ))}
                        </div>
                      ) : (
                        <>
                          <CommandEmpty>Kein Mitglied gefunden.</CommandEmpty>
                          <CommandGroup>
                            {activeMembers.slice(0, 8).map((member) => (
                              <CommandItem
                                key={member.id}
                                value={member.id}
                                onSelect={() => handleSelectMember(member)}
                                className="cursor-pointer"
                              >
                                <div className="flex flex-1 items-center justify-between">
                                  <div>
                                    <span className="font-medium">
                                      {member.firstName} {member.lastName}
                                    </span>
                                    <span className="text-muted-foreground ml-2 text-xs">
                                      {member.memberNumber}
                                    </span>
                                  </div>
                                  {member.status !== "ACTIVE" && (
                                    <Badge
                                      variant="destructive"
                                      className="text-xs"
                                    >
                                      {member.status}
                                    </Badge>
                                  )}
                                </div>
                              </CommandItem>
                            ))}
                          </CommandGroup>
                        </>
                      )}
                    </CommandList>
                  </Command>
                </div>
              )}
            </div>

            {/* Selected member card */}
            {selectedMember && (
              <Card className="border-border/50 bg-muted/30">
                <CardContent className="p-4">
                  <div className="flex items-start justify-between">
                    <div className="space-y-1">
                      <p className="text-lg font-medium">
                        {selectedMember.firstName} {selectedMember.lastName}
                      </p>
                      <p className="text-muted-foreground text-sm">
                        {selectedMember.memberNumber} · Mitglied seit{" "}
                        {new Date(selectedMember.joinedAt).toLocaleDateString(
                          "de-DE"
                        )}
                      </p>
                    </div>
                    <Badge
                      variant={
                        selectedMember.status === "ACTIVE"
                          ? "default"
                          : "destructive"
                      }
                    >
                      {selectedMember.status === "ACTIVE"
                        ? "Aktiv"
                        : selectedMember.status}
                    </Badge>
                  </div>

                  {/* Blocked member warning */}
                  {isMemberBlocked(selectedMember) && (
                    <div className="mt-4 flex items-center gap-2 rounded-md bg-red-100 p-3 text-red-800 dark:bg-red-900/30 dark:text-red-400">
                      <ShieldAlert className="h-5 w-5 flex-shrink-0" />
                      <p className="text-sm font-medium">
                        {t("memberBlocked")}
                      </p>
                    </div>
                  )}

                  {/* Under 21 info */}
                  {!isMemberBlocked(selectedMember) &&
                    isUnder21(selectedMember) && (
                      <div className="mt-4 flex items-center gap-2 rounded-md bg-blue-100 p-3 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400">
                        <Info className="h-5 w-5 flex-shrink-0" />
                        <p className="text-sm font-medium">
                          {t("under21Info")}
                        </p>
                      </div>
                    )}
                </CardContent>
              </Card>
            )}

            {/* If member is active and selected, show "Next" button */}
            {selectedMember &&
              !isMemberBlocked(selectedMember) &&
              step === 0 && (
                <Button className="w-full" onClick={() => setStep(1)}>
                  Weiter
                </Button>
              )}
          </CardContent>
        </Card>
      )}

      {/* Step 2: Quota Check */}
      {step === 1 && (
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Info className="h-5 w-5" />
              {t("step2")}
            </CardTitle>
            <CardDescription>
              {selectedMember?.firstName} {selectedMember?.lastName}
              {quota?.isUnder21 && " (unter 21)"}
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-6">
            {quotaLoading ? (
              <div className="space-y-4">
                <Skeleton className="h-10 w-full" />
                <Skeleton className="h-10 w-full" />
              </div>
            ) : quota ? (
              <>
                <QuotaBar
                  label={t("dailyRemaining")}
                  used={quota.dailyUsedGrams}
                  limit={quota.dailyLimitGrams}
                  unit="g"
                />
                <QuotaBar
                  label={t("monthlyRemaining")}
                  used={quota.monthlyUsedGrams}
                  limit={quota.monthlyLimitGrams}
                  unit="g"
                />

                {quota.isUnder21 && (
                  <div className="flex items-center gap-2 rounded-md bg-blue-100 p-3 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400">
                    <Info className="h-4 w-4 flex-shrink-0" />
                    <p className="text-sm">{t("under21Info")}</p>
                  </div>
                )}
              </>
            ) : null}

            <div className="flex gap-3">
              <Button variant="outline" onClick={() => setStep(0)}>
                Zurück
              </Button>
              <Button
                className="flex-1"
                onClick={() => setStep(2)}
                disabled={quotaLoading}
              >
                Weiter
              </Button>
            </div>
          </CardContent>
        </Card>
      )}

      {/* Step 3: Batch Selection & Amount */}
      {step === 2 && (
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Leaf className="h-5 w-5" />
              {t("step3")}
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-6">
            {/* Batch selection */}
            <div className="space-y-2">
              <Label>{t("selectBatch")}</Label>
              {batchesLoading ? (
                <div className="space-y-2">
                  {Array.from({ length: 4 }).map((_, i) => (
                    <Skeleton key={i} className="h-14 w-full rounded-lg" />
                  ))}
                </div>
              ) : (
                <div className="grid gap-2">
                  {availableBatches.map((batch) => (
                    <div
                      key={batch.id}
                      onClick={() => setSelectedBatch(batch)}
                      className={`flex cursor-pointer items-center justify-between rounded-lg border p-3 transition-colors ${
                        selectedBatch?.id === batch.id
                          ? "border-primary bg-primary/5"
                          : "border-border hover:bg-muted/50"
                      }`}
                    >
                      <div className="flex items-center gap-3">
                        <div
                          className={`h-3 w-3 rounded-full ${
                            selectedBatch?.id === batch.id
                              ? "bg-primary"
                              : "bg-muted-foreground/30"
                          }`}
                        />
                        <div>
                          <p className="font-medium">{batch.strainName}</p>
                          <p className="text-muted-foreground text-xs">
                            THC: {batch.thcPercent}%
                          </p>
                        </div>
                      </div>
                      <span className="text-muted-foreground text-sm">
                        {batch.availableGrams}g {t("available")}
                      </span>
                    </div>
                  ))}
                </div>
              )}
            </div>

            {/* Amount input */}
            {selectedBatch && (
              <div className="space-y-2">
                <Label htmlFor="amount">{t("amountLabel")}</Label>
                <Input
                  id="amount"
                  type="number"
                  min="0.1"
                  max={selectedBatch.availableGrams}
                  step="0.1"
                  value={amount}
                  onChange={(e) => setAmount(e.target.value)}
                  placeholder="0.0"
                  className="font-mono text-lg"
                />

                {/* Validation errors */}
                {validationErrors.length > 0 && (
                  <div className="space-y-1">
                    {validationErrors.map((error) => (
                      <div
                        key={error}
                        className="flex items-center gap-2 text-sm text-red-600 dark:text-red-400"
                      >
                        <AlertCircle className="h-4 w-4 flex-shrink-0" />
                        <span>{error}</span>
                      </div>
                    ))}
                  </div>
                )}

                {/* Show remaining after this distribution */}
                {amountNum > 0 && validationErrors.length === 0 && quota && (
                  <div className="text-muted-foreground space-y-1 text-xs">
                    <p>
                      Tagesrest danach:{" "}
                      {(
                        quota.dailyLimitGrams -
                        quota.dailyUsedGrams -
                        amountNum
                      ).toFixed(1)}
                      g
                    </p>
                    <p>
                      Monatsrest danach:{" "}
                      {(
                        quota.monthlyLimitGrams -
                        quota.monthlyUsedGrams -
                        amountNum
                      ).toFixed(1)}
                      g
                    </p>
                  </div>
                )}
              </div>
            )}

            <div className="flex gap-3">
              <Button variant="outline" onClick={() => setStep(1)}>
                Zurück
              </Button>
              <Button
                className="flex-1"
                disabled={!canProceedToConfirm}
                onClick={() => setStep(3)}
              >
                Weiter
              </Button>
            </div>
          </CardContent>
        </Card>
      )}

      {/* Step 4: Confirmation */}
      {step === 3 && selectedMember && selectedBatch && (
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Check className="h-5 w-5" />
              {t("step4")}
            </CardTitle>
            <CardDescription>{t("summary")}</CardDescription>
          </CardHeader>
          <CardContent className="space-y-6">
            {/* Summary card */}
            <div className="bg-muted/50 divide-border divide-y rounded-lg border">
              <div className="flex items-center justify-between p-4">
                <span className="text-muted-foreground text-sm">
                  {t("member")}
                </span>
                <span className="font-medium">
                  {selectedMember.firstName} {selectedMember.lastName}
                </span>
              </div>
              <div className="flex items-center justify-between p-4">
                <span className="text-muted-foreground text-sm">
                  {t("strain")}
                </span>
                <span className="font-medium">{selectedBatch.strainName}</span>
              </div>
              <div className="flex items-center justify-between p-4">
                <span className="text-muted-foreground text-sm">
                  {t("amount")}
                </span>
                <span className="font-mono text-lg font-bold">
                  {amountNum}g
                </span>
              </div>
              <div className="flex items-center justify-between p-4">
                <span className="text-muted-foreground text-sm">
                  {t("staff")}
                </span>
                <span className="font-medium">Maria Schulz</span>
              </div>
            </div>

            <div className="flex gap-3">
              <Button variant="outline" onClick={() => setStep(2)}>
                Zurück
              </Button>
              <Button
                className="flex-1 gap-2"
                onClick={handleConfirm}
                disabled={createMutation.isPending}
              >
                {createMutation.isPending ? (
                  <Loader2 className="h-4 w-4 animate-spin" />
                ) : (
                  <Check className="h-4 w-4" />
                )}
                {t("confirm")}
              </Button>
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  )
}
