"use client"

import { useCallback, useMemo, useState } from "react"
import { useRouter } from "next/navigation"
import { useTranslations } from "next-intl"
import { toast } from "sonner"
import {
  AlertCircle,
  ArrowLeft,
  Check,
  ChevronsUpDown,
  Info,
  Leaf,
  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 { 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"

// 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 [quota, setQuota] = useState<QuotaStatus | null>(null)
  const [selectedBatch, setSelectedBatch] = useState<AvailableBatch | null>(
    null
  )
  const [amount, setAmount] = useState("")
  const [memberSearch, setMemberSearch] = useState("")
  const [showMemberList, setShowMemberList] = useState(false)

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

  // Filter active members for the combobox
  const activeMembers = useMemo(
    () => mockMembers.filter((m) => m.status === "ACTIVE"),
    []
  )

  const filteredMembers = useMemo(() => {
    if (!memberSearch) return activeMembers
    const search = memberSearch.toLowerCase()
    return activeMembers.filter(
      (m) =>
        `${m.firstName} ${m.lastName}`.toLowerCase().includes(search) ||
        m.memberNumber.toLowerCase().includes(search)
    )
  }, [memberSearch, activeMembers])

  // 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
      }

      // Load quota
      const q = getMockQuota(member.id)
      setQuota(q)
      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 = () => {
    // Mock: log + toast + redirect
    console.log("Distribution recorded:", {
      memberId: selectedMember?.id,
      memberName: `${selectedMember?.firstName} ${selectedMember?.lastName}`,
      batchId: selectedBatch?.id,
      strainName: selectedBatch?.strainName,
      amountGrams: amountNum,
      recordedBy: "Maria Schulz",
      recordedAt: new Date().toISOString(),
      status: "COMPLETED",
    })
    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>
                      <CommandEmpty>Kein Mitglied gefunden.</CommandEmpty>
                      <CommandGroup>
                        {filteredMembers.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={() => {
                    const q = getMockQuota(selectedMember.id)
                    setQuota(q)
                    setStep(1)
                  }}
                >
                  Weiter
                </Button>
              )}
          </CardContent>
        </Card>
      )}

      {/* Step 2: Quota Check */}
      {step === 1 && quota && (
        <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">
            <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>
            )}

            <div className="flex gap-3">
              <Button variant="outline" onClick={() => setStep(0)}>
                Zurück
              </Button>
              <Button className="flex-1" onClick={() => setStep(2)}>
                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>
              <div className="grid gap-2">
                {mockAvailableBatches.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}>
                <Check className="h-4 w-4" />
                {t("confirm")}
              </Button>
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  )
}