"use client";
import React, { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { QrReader } from 'react-qr-reader';
import axios from 'axios';
import Breadcrumb from '@/ui/breadcrumb';
import { useLanguage } from '@/store/language-context';
import { useTranslation } from 'react-i18next';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Separator } from '@/components/ui/separator';
import { QrCode, FileText, Download, User, Mail, Clock, CheckCircle } from 'lucide-react';
import { useToast } from '@/hooks/use-toast';

export default function CertificateVerification() {
    const { URL } = useLanguage();
    const { t } = useTranslation();
    const { toast } = useToast();
    const [serialNumber, setSerialNumber] = useState('');
    const [showScanner, setShowScanner] = useState(false);
    const [inputMethod, setInputMethod] = useState('manual');
    const [shouldFetch, setShouldFetch] = useState(false);

    const { data: certificate, error, isLoading, isError } = useQuery({
        queryKey: ['certificate', serialNumber],
        queryFn: async () => {
            if (!serialNumber.trim()) return null;

            const response = await axios.get(
                `${URL}/certificate_verification?serial_number=${serialNumber.trim()}`
            );

            if (response.data.status === 200 && response.data.data.data.length > 0) {
                toast({
                    title: t('custom.done'),
                    description: t('custom.done-desc'),
                    variant: "success",
                });
                return response.data.data.data[0];
            } else {
                toast({
                    variant: "destructive",
                    title: t('verification.err'),
                    description: error?.message || t('custom.err'),
                });
                throw new Error(response.data.message || t('verification.no-result'));
            }
        },
        enabled: shouldFetch && !!serialNumber.trim(),
        retry: false,
        refetchOnWindowFocus: false,
    });

    const handleScan = (result, error) => {
        if (result) {
            setShowScanner(false);
            setSerialNumber(result.text);
            setShouldFetch(true);
            toast({
                title: t('verification.qr-scanned'),
                description: t('verification.processing-code'),
                variant: "success",
            });
        }
        if (error) {
            console.error('QR Scan Error:', error);
            toast({
                title: t('verification.scan-error'),
                description: t('verification.scan-error-desc'),
                variant: "destructive",
            });
        }
    };

    const handleManualSubmit = () => {
        if (serialNumber.trim()) {
            setShouldFetch(true);
        } else {
            toast({
                title: t('verification.empty-input'),
                description: t('verification.enter-serial-number'),
                variant: "destructive",
            });
        }
    };

    const handleInputChange = (event) => {
        setSerialNumber(event.target.value);
        setShouldFetch(false);
    };

    const toggleScanner = () => {
        setShowScanner(!showScanner);
    };

    const resetForm = () => {
        setSerialNumber('');
        setShouldFetch(false);
        setShowScanner(false);
        toast({
            title: t('verification.cleared'),
            description: t('verification.form-reset'),
            variant: "success",
        });
    };

    return (
        <>
            <Breadcrumb pages={[t('routes.certificate-verification')]} />
            <div className="layout mx-auto px-4 py-6">
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mt-4">

                    {/* Input Section */}
                    <Card className="w-full">
                        <CardHeader className="text-center">
                            <CardTitle className="flex items-center justify-center gap-2">
                                <FileText className="h-5 w-5" />
                                {t('verification.by')}
                            </CardTitle>
                        </CardHeader>
                        <CardContent className="space-y-6">

                            {/* Input Method Selection */}
                            <div className="space-y-3">
                                <RadioGroup
                                    value={inputMethod}
                                    onValueChange={setInputMethod}
                                    className="flex flex-col space-y-2"
                                >
                                    <div className="flex items-center gap-2 rtl:flex-row-reverse">
                                        <RadioGroupItem value="manual" id="manual" />
                                        <Label htmlFor="manual" className="flex items-center gap-2 cursor-pointer rtl:flex-row-reverse">
                                            <FileText className="h-4 w-4" />
                                            {t('verification.code')}
                                            <strong>{t('verification.serial')}</strong>
                                        </Label>
                                    </div>
                                    <div className="flex items-center gap-2 rtl:flex-row-reverse">
                                        <RadioGroupItem value="qr" id="qr" />
                                        <Label htmlFor="qr" className="flex items-center gap-2 cursor-pointer">
                                            <QrCode className="h-4 w-4" />
                                            QR Code Scanner
                                        </Label>
                                    </div>
                                </RadioGroup>
                            </div>

                            <Separator />

                            {/* Manual Input */}
                            {inputMethod === 'manual' && (
                                <div className="space-y-4">
                                    <div className="space-y-2">
                                        <Label htmlFor="serial-input">
                                            {t('verification.enter-code')}
                                        </Label>
                                        <Input
                                            id="serial-input"
                                            type="text"
                                            placeholder={t('verification.code-holder')}
                                            value={serialNumber}
                                            onChange={handleInputChange}
                                            className="w-full focus:ring-secondary-tw text-common-text"
                                        />
                                        <p className="text-sm text-gray-400">
                                            {t('verification.certificate-code')}
                                        </p>
                                    </div>
                                    <div className="flex gap-2">
                                        <Button
                                            variant='outline'
                                            onClick={handleManualSubmit}
                                            disabled={!serialNumber.trim() || isLoading}
                                            className="flex-1 bg-secondary-tw text-white"
                                        >
                                            {isLoading ? (
                                                <>
                                                    <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
                                                    {t('verification.checking')}
                                                </>
                                            ) : (
                                                t('custom.confirm')
                                            )}
                                        </Button>
                                        {serialNumber && (
                                            <Button
                                                variant="outline"
                                                onClick={resetForm}
                                            >
                                                {t('verification.clear')}
                                            </Button>
                                        )}
                                    </div>
                                </div>
                            )}

                            {/* QR Scanner */}
                            {inputMethod === 'qr' && (
                                <div className="space-y-4">
                                    <Button
                                        onClick={toggleScanner}
                                        variant={showScanner ? "destructive" : "default"}
                                        className="w-full"
                                    >
                                        <QrCode className="h-4 w-4 mr-2" />
                                        {showScanner ? t('verification.close') : t('verification.see')}
                                    </Button>

                                    {showScanner && (
                                        <Card className="p-4">
                                            <QrReader
                                                onResult={handleScan}
                                                className='w-full'
                                                constraints={{
                                                    facingMode: 'environment'
                                                }}
                                            />
                                        </Card>
                                    )}
                                </div>
                            )}

                        </CardContent>
                    </Card>

                    {/* Results Section */}
                    <Card className="w-full">
                        <CardHeader>
                            <CardTitle className="flex items-center justify-center gap-2">
                                <CheckCircle className="h-5 w-5" />
                                {t('verification.results')}
                            </CardTitle>
                        </CardHeader>
                        <CardContent>
                            {isLoading && (
                                <div className="flex flex-col items-center justify-center py-8 space-y-4">
                                    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
                                    <p className="text-gray-400">{t('custom.checking')}</p>
                                </div>
                            )}

                            {certificate && !isLoading && (
                                <div className="space-y-4">
                                    <div className="flex items-center gap-2 mb-4">
                                        <Badge variant="default" className="bg-green-100 text-green-800">
                                            <CheckCircle className="h-3 w-3 mr-1" />
                                            {t('custom.done')}
                                        </Badge>
                                    </div>

                                    <div className="space-y-4">
                                        <h3 className="font-semibold text-lg">
                                            {t('verfication.details')}
                                        </h3>
                                        <div className="space-y-3">
                                            {
                                                certificate?.user_name_ar &&
                                                <div className="flex items-start gap-3 p-3 bg-muted/50 rounded-lg">
                                                    <User className="h-5 w-5 text-gray-400 mt-0.5" />
                                                    <div>
                                                        <p className="font-medium">{t('contact.name')}</p>
                                                        <p className="text-gray-400">
                                                            {certificate.user_name_ar}
                                                        </p>
                                                    </div>
                                                </div>
                                            }
                                            {
                                                certificate?.email &&
                                                <div className="flex items-start gap-3 p-3 bg-muted/50 rounded-lg">
                                                    <Mail className="h-5 w-5 text-gray-400 mt-0.5" />
                                                    <div>
                                                        <p className="font-medium">{t('contact.email')}</p>
                                                        <p className="text-gray-400">
                                                            {certificate?.email}
                                                        </p>
                                                    </div>
                                                </div>
                                            }
                                            {
                                                certificate?.count_hours &&
                                                <div className="flex items-start gap-3 p-3 bg-muted/50 rounded-lg">
                                                    <Clock className="h-5 w-5 text-gray-400 mt-0.5" />
                                                    <div>
                                                        <p className="font-medium">{t('verifixation.hours')}</p>
                                                        <p className="text-gray-400">
                                                            {certificate?.count_hours}
                                                        </p>
                                                    </div>
                                                </div>
                                            }
                                        </div>


                                        {certificate?.link && (
                                            <Button
                                                asChild
                                                className="w-full mt-4"
                                                variant="outline"
                                            >
                                                <a
                                                    href={certificate.link}
                                                    target="_blank"
                                                    rel="noopener noreferrer"
                                                    className="flex items-center gap-2"
                                                >
                                                    <Download className="h-4 w-4" />
                                                    {t('verification.download-certificate')}
                                                </a>
                                            </Button>
                                        )}
                                    </div>
                                </div>
                            )}

                            {!certificate && !isLoading && !isError && (
                                <div className="flex flex-col items-center justify-center py-8 text-center space-y-2">
                                    <FileText className="h-12 w-12 text-gray-400" />
                                    <p className="text-gray-400">
                                        {t('verification.no-certificate-selected')}
                                    </p>
                                </div>
                            )}
                        </CardContent>
                    </Card>

                </div>
            </div>
        </>
    );
};