"use client";

import Link from 'next/link';
import { useState } from "react";
import { BadgeIcon, TicketCheckIcon, AlertCircle, CheckCircle2, ExternalLink, Loader2 } from "lucide-react";
import { format } from "date-fns";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { NextLink } from "@/components/next-link";
import { type User, redeemEvent } from "@/lib/api/labs";
import { redeemExamWithCredits } from "@/lib/api/exams";
import { useLocaleFunction } from "@/hooks/use-localed";
import { renderRemarkInline } from "@/lib/remark-inline";

interface RedeemDialogProps {
  open: boolean;
  examId: number;
  examTitle: string;
  credits: number;
  user: User;
  onOpenChange: (open: boolean) => void;
  onRedeemSuccess: () => void;
}

// Calculate expiration date: current date + 365 days
const calculateExpirationDate = () => {
  const now = new Date();
  const expirationDate = new Date(now);
  expirationDate.setFullYear(now.getFullYear() + 1);
  return expirationDate;
};

export function RedeemDialog({
  open,
  examId,
  examTitle,
  credits,
  user,
  onOpenChange,
  onRedeemSuccess,
}: RedeemDialogProps) {
  const t = useLocaleFunction();
  const [voucherCode, setVoucherCode] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState(false);
  const [isLoading, setIsLoading] = useState(false);

  const hasEnoughCredits = user.credits >= credits;

  const handleCreditsRedeem = async () => {
    setIsLoading(true);
    setError(null);

    try {
      await redeemExamWithCredits(examId);
      setSuccess(true);
      onRedeemSuccess();
    } catch (error) {
      console.error('Error redeeming credits:', error);
      setError(error instanceof Error ? error.message : t('exam.redeem.failed'));
    } finally {
      setIsLoading(false);
    }
  };

  const handleVoucherRedeem = async () => {
    if (!voucherCode.trim()) {
      setError(t('exam.redeem.voucher_code_required'));
      return;
    }

    setIsLoading(true);
    setError(null);

    try {
      await redeemEvent({ event_voucher_code: voucherCode });
      setSuccess(true);
      onRedeemSuccess();
    } catch (error) {
      console.error('Error redeeming voucher:', error);
      setError(error instanceof Error ? error.message : t('exam.redeem.voucher_failed'));
    } finally {
      setIsLoading(false);
    }
  };

  const handleOpenChange = (newOpen: boolean) => {
    if (!newOpen) {
      setError(null);
      setVoucherCode('');
      setSuccess(false);
    }
    onOpenChange(newOpen);
  };

  return (
    <Dialog open={open} onOpenChange={handleOpenChange}>
      <DialogContent className="sm:max-w-lg">
        <DialogHeader>
          <DialogTitle>{t('exam.redeem.title')}</DialogTitle>
          <DialogDescription className="text-pretty [&_b]:text-foreground">
            {renderRemarkInline(t('exam.redeem.description', examTitle), true)}
          </DialogDescription>
        </DialogHeader>

        {success ? (
          <div className="flex flex-col items-center justify-center py-8">
            <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-green-100 dark:bg-green-900">
              <CheckCircle2 className="h-8 w-8 text-green-600 dark:text-green-400" />
            </div>
            <h3 className="mb-2 text-lg font-semibold">{t('exam.redeem.success')}</h3>
            <p className="text-center text-sm text-muted-foreground">
              {t('exam.redeem.success_description', format(calculateExpirationDate(), 'yyyy-MM-dd'))}
            </p>
            <div className="mt-6 flex items-center justify-center gap-4 w-full">
              <Button size="lg" variant="outline" onClick={() => onOpenChange(false)}>
                {t('exam.cancel')}
              </Button>
              <NextLink size="lg" href={`/exam/${examId}/confirm-info`} >
                {t('exam.start_exam')}
              </NextLink>
            </div>
          </div>
        ) : (
          <Tabs defaultValue="credits" className="w-full">
            <TabsList className="grid w-full grid-cols-2">
              <TabsTrigger value="credits" className="gap-2">
                <BadgeIcon className="h-4 w-4" />
                {t('exam.credits')}
              </TabsTrigger>
              <TabsTrigger value="voucher" className="gap-2">
                <TicketCheckIcon className="h-4 w-4" />
                {t('exam.redeem.voucher')}
              </TabsTrigger>
            </TabsList>

            <TabsContent value="credits" className="space-y-4 pt-4">
              <div className="rounded-lg border bg-muted/30 p-4">
                <div className="flex items-center justify-between">
                  <span className="text-sm text-muted-foreground">{t('exam.redeem.your_credits')}</span>
                  <span className="font-semibold">{user.credits} {t('exam.credits')}</span>
                </div>
                <div className="mt-2 flex items-center justify-between">
                  <span className="text-sm text-muted-foreground">{t('exam.redeem.exam_cost')}</span>
                  <span className="font-semibold text-primary">{credits} {t('exam.credits')}</span>
                </div>
                {hasEnoughCredits && (
                  <div className="mt-2 flex items-center justify-between border-t pt-2">
                    <span className="text-sm text-muted-foreground">{t('exam.redeem.remaining_credits')}</span>
                    <span className="font-semibold text-green-600 dark:text-green-400">
                      {user.credits - credits} {t('exam.credits')}
                    </span>
                  </div>
                )}
              </div>

              {!hasEnoughCredits && (
                <Alert variant="destructive">
                  <AlertDescription className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
                    <div className="flex items-center gap-2">
                      <AlertCircle className="h-4 w-4 flex-shrink-0" />
                      <div>
                        <span>{t('exam.redeem.insufficient_credits', credits - user.credits)}{' '}</span>
                        <Link href="/credits" className="inline-flex items-center gap-1 text-sm text-destructive p-0 font-medium underline underline-offset-2">
                          {t('exam.redeem.buy_credits')}
                          <ExternalLink className="h-3 w-3" />
                        </Link>
                      </div>
                    </div>
                  </AlertDescription>
                </Alert>
              )}

              {error && (
                <Alert variant="destructive" className="[&>svg]:top-3">
                  <AlertCircle className="h-4 w-4" />
                  <AlertDescription>{error}</AlertDescription>
                </Alert>
              )}

              <Button
                className="w-full"
                onClick={handleCreditsRedeem}
                disabled={!hasEnoughCredits || isLoading}
              >
                {isLoading ? (
                  <>
                    <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                    {t('exam.redeem_processing')}
                  </>
                ) : (
                  t('exam.redeem_for_credits', credits)
                )}
              </Button>
            </TabsContent>

            <TabsContent value="voucher" className="space-y-4 pt-4">
              <div className="flex flex-col gap-2">
                <Label htmlFor="voucher">{t('exam.redeem.voucher_code')}</Label>
                <Input
                  id="voucher"
                  placeholder={t('exam.redeem.voucher_code_placeholder')}
                  value={voucherCode}
                  onChange={(e) => {
                    setVoucherCode(e.target.value);
                    setError(null);
                  }}
                  className="uppercase"
                  disabled={isLoading}
                />
                <p className="text-xs text-muted-foreground">
                  {t('exam.redeem.voucher_code_description')}
                </p>
              </div>

              {error && (
                <Alert variant="destructive" className="[&>svg]:top-3">
                  <AlertCircle className="h-4 w-4" />
                  <AlertDescription>{error}</AlertDescription>
                </Alert>
              )}

              <Button
                className="w-full"
                onClick={handleVoucherRedeem}
                disabled={!voucherCode.trim() || isLoading}
              >
                {isLoading ? (
                  <>
                    <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                    {t('exam.redeem.voucher_validating')}
                  </>
                ) : (
                  t('exam.redeem.apply_voucher')
                )}
              </Button>
            </TabsContent>
          </Tabs>
        )}
      </DialogContent>
    </Dialog>
  );
}