"use client"

import { useState } from "react"
import { useTranslations } from "next-intl"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
    DialogDescription,
} from "@/components/ui/dialog"
import { cn } from "@/lib/cn"
import { WalletCards } from "lucide-react"

export default function DepositsPage() {
    const t = useTranslations()
    const [amount, setAmount] = useState<string>("0")
    const [isSaved, setIsSaved] = useState(false)
    const [isModalOpen, setIsModalOpen] = useState(false)

    // Handle initial save action
    const handleSave = () => {
        if (amount) {
            setIsSaved(true)
        }
    }

    // Reset flow if amount changes (optional user experience choice)
    const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setAmount(e.target.value)
        setIsSaved(false)
    }

    return (
        <div className="space-y-4">
            {/* Main Card */}
            <div className="bg-white rounded-xl p-6 shadow-sm min-h-[400px]">
                <div className="space-y-6">
                    {/* Header */}
                    <div>
                        <h1 className="text-2xl font-bold text-teal-500">
                            {t("deposits_page.title")}
                        </h1>
                    </div>

                    {/* Amount Input Section */}
                    <div className="space-y-2">
                        <label className="text-teal-500 text-sm font-medium block text-start">
                            {t("deposits_page.amount_label")} <span className="text-red-500">*</span>
                        </label>
                        <Input
                            type="number"
                            value={amount}
                            onChange={handleAmountChange}
                            className="bg-transparent border-gray-100 text-start text-teal-500 font-medium"
                        />
                    </div>

                    {/* Save Button (Gradient) */}
                    <div className="flex justify-end">
                        <Button
                            onClick={handleSave}
                            className={cn(
                                "w-40 h-10 text-white font-medium rounded-md border-0",
                                "bg-gradient-to-l from-violet-600 to-amber-300 hover:opacity-90 transition-opacity"
                            )}
                        >
                            {t("deposits_page.save_info")}
                        </Button>
                    </div>

                    {/* Payment Methods Section (Appears after save) */}
                    {isSaved && (
                        <div className="space-y-4 pt-4 animate-in fade-in slide-in-from-top-4 duration-300">
                            <div className="flex justify-between items-center">
                                <h2 className="text-xl font-bold text-teal-500">
                                    {t("deposits_page.select_payment_method")}
                                </h2>
                            </div>

                            <div className="flex flex-wrap gap-4 justify-end">
                                {/* PayPal Button */}
                                <Button
                                    variant="outline"
                                    className="h-10 px-6 min-w-[140px] bg-white border-gray-200 text-blue-900 font-bold hover:bg-gray-50 flex items-center gap-2"
                                >
                                    <span className="italic font-extrabold text-[#003087]">Pay</span>
                                    <span className="italic font-extrabold text-[#009cde]">Pal</span>
                                </Button>

                                {/* Bank Payment Button (Gradient) */}
                                <Button
                                    onClick={() => setIsModalOpen(true)}
                                    className={cn(
                                        "h-10 px-6 min-w-[140px] text-white font-medium rounded-md border-0",
                                        "bg-gradient-to-l from-violet-600 to-amber-300 hover:opacity-90 transition-opacity"
                                    )}
                                >
                                    {t("deposits_page.pay_bank")}
                                </Button>
                            </div>
                        </div>
                    )}
                </div>
            </div>

            {/* Bank Transfer Modal */}
            <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
                <DialogContent className="sm:max-w-xl p-0 max-h-[90vh] overflow-y-auto">
                    <DialogHeader className="p-4 border-b">
                        <DialogTitle className="text-start text-xl text-teal-500 font-bold">
                            {t("deposits_page.pay_bank")}
                        </DialogTitle>
                    </DialogHeader>

                    <div className="p-6 space-y-6">
                        {/* Form Grid */}
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                            {/* Row 1 */}
                            <div className="space-y-2">
                                <label className="text-sm text-gray-400 block text-start">
                                    {t("deposits_page.bank_name")}
                                </label>
                                <Input
                                    placeholder={t("deposits_page.bank_name_placeholder")}
                                    className="text-start"
                                />
                            </div>
                            <div className="space-y-2">
                                <label className="text-sm text-gray-400 block text-start">
                                    {t("deposits_page.branch_name")}
                                </label>
                                <Input
                                    placeholder={t("deposits_page.branch_name_placeholder")}
                                    className="text-start"
                                />
                            </div>

                            {/* Row 2 */}
                            <div className="space-y-2">
                                <label className="text-sm text-gray-400 block text-start">
                                    {t("deposits_page.account_holder")}
                                </label>
                                <Input
                                    placeholder={t("deposits_page.account_holder_placeholder")}
                                    className="text-start"
                                />
                            </div>
                            <div className="space-y-2">
                                <label className="text-sm text-gray-400 block text-start">
                                    {t("deposits_page.account_number")}
                                </label>
                                <Input
                                    placeholder={t("deposits_page.account_number_placeholder")}
                                    className="text-start"
                                />
                            </div>

                            {/* Row 3 */}
                            <div className="space-y-2 md:col-span-2 grid md:grid-cols-2 gap-4">
                                <div className="space-y-2">
                                    <label className="text-sm text-gray-400 block text-start">
                                        {t("deposits_page.account_type")}
                                    </label>
                                    <div className="relative">
                                        <select className="w-full h-10 px-3 py-2 text-sm border rounded-md appearance-none bg-transparent text-start text-teal-500 outline-none focus:ring-2 focus:ring-teal-500/20">
                                            <option value="savings">{t("deposits_page.account_type_savings")}</option>
                                            <option value="current">{t("deposits_page.account_type_current")}</option>
                                        </select>
                                        <div className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-teal-500">
                                            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M2.5 4.5L6 8L9.5 4.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                                            </svg>
                                        </div>
                                    </div>
                                </div>
                                
                                <div className="space-y-2">
                                    <label className="text-sm text-gray-400 block text-start">
                                        {t("deposits_page.payment_proof")}
                                    </label>
                                    <div className="flex rounded-md border border-input bg-transparent shadow-sm">
                                         <label className="flex-none px-4 py-2 border-r bg-gray-50 text-sm text-gray-600 cursor-pointer hover:bg-gray-100 rounded-l-md">
                                            {t("deposits_page.choose_file")}
                                            <input type="file" className="hidden" />
                                        </label>
                                        <span className="flex-1 px-3 py-2 text-sm text-gray-400 text-center truncate">
                                            {t("deposits_page.no_file_chosen")}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {/* Bank Info Table */}
                        <div className="space-y-4">
                            <h3 className="text-teal-500 font-bold text-start text-lg">
                                {t("deposits_page.bank_info_title")}
                            </h3>
                            <div className="border rounded-lg overflow-hidden">
                                <div className="grid grid-cols-2 border-b last:border-0">
                                    <div className="p-3 text-start text-sm text-gray-500 border-e">{t("deposits_page.bank_info_name")}</div>
                                    <div className="p-3 text-start text-sm text-gray-700 font-medium">Dhaka_Bank</div>
                                </div>
                                <div className="grid grid-cols-2 border-b last:border-0">
                                    <div className="p-3 text-start text-sm text-gray-500 border-e">{t("deposits_page.bank_info_branch")}</div>
                                    <div className="p-3 text-start text-sm text-gray-700 font-medium">Dhaka</div>
                                </div>
                                <div className="grid grid-cols-2 border-b last:border-0">
                                    <div className="p-3 text-start text-sm text-gray-500 border-e">{t("deposits_page.bank_info_type")}</div>
                                    <div className="p-3 text-start text-sm text-gray-700 font-medium">{t("deposits_page.account_type_savings")}</div>
                                </div>
                                <div className="grid grid-cols-2 border-b last:border-0">
                                    <div className="p-3 text-start text-sm text-gray-500 border-e">{t("deposits_page.bank_info_number")}</div>
                                    <div className="p-3 text-start text-sm text-gray-700 font-medium font-mono">64687964</div>
                                </div>
                                <div className="grid grid-cols-2 border-b last:border-0">
                                    <div className="p-3 text-start text-sm text-gray-500 border-e">{t("deposits_page.bank_info_holder")}</div>
                                    <div className="p-3 text-start text-sm text-gray-700 font-medium">INFIX LMS</div>
                                </div>
                            </div>
                        </div>

                        {/* Footer Buttons */}
                        <div className="flex gap-4 pt-2">
                             <Button
                                className={cn(
                                    "flex-1 h-12 text-white font-bold rounded-md border-0 text-lg",
                                    "bg-gradient-to-l from-violet-600 to-amber-300 hover:opacity-90 transition-opacity"
                                )}
                            >
                                {t("deposits_page.save_info")}
                            </Button>
                        </div>
                    </div>
                </DialogContent>
            </Dialog>
        </div>
    )
}