'use client'

import { useState } from 'react'
import { useAccount, useWriteContract, useWaitForTransactionReceipt } from 'wagmi'
import { parseEther } from 'viem'

export function StakeForm() {
  const { address } = useAccount()
  const [amount, setAmount] = useState('')
  const [activeTab, setActiveTab] = useState<'stake' | 'withdraw'>('stake')

  const { writeContract, data: hash, isPending } = useWriteContract()
  const { isLoading: isConfirming, isSuccess } = useWaitForTransactionReceipt({ hash })

  const handleAction = () => {
    if (!amount || !address) return
    // TODO: Replace with your deployed contract address and generated ABI
    // if (activeTab === 'stake') {
    //   writeContract({
    //     address: STAKING_ADDRESS,
    //     abi: stakingAbi,
    //     functionName: 'stake',
    //     args: [parseEther(amount)],
    //   })
    // } else {
    //   writeContract({
    //     address: STAKING_ADDRESS,
    //     abi: stakingAbi,
    //     functionName: 'withdraw',
    //     args: [parseEther(amount)],
    //   })
    // }
  }

  return (
    <div className="rounded-lg border bg-card p-6">
      <div className="flex gap-2 mb-4">
        <button
          onClick={() => setActiveTab('stake')}
          className={`flex-1 rounded-md px-3 py-2 text-sm font-medium transition-colors ${
            activeTab === 'stake'
              ? 'bg-primary text-primary-foreground'
              : 'bg-secondary text-secondary-foreground hover:bg-secondary/80'
          }`}
        >
          Stake
        </button>
        <button
          onClick={() => setActiveTab('withdraw')}
          className={`flex-1 rounded-md px-3 py-2 text-sm font-medium transition-colors ${
            activeTab === 'withdraw'
              ? 'bg-primary text-primary-foreground'
              : 'bg-secondary text-secondary-foreground hover:bg-secondary/80'
          }`}
        >
          Withdraw
        </button>
      </div>

      <div className="space-y-4">
        <div>
          <label className="text-sm font-medium mb-1.5 block">
            Amount ({{{stakingTokenSymbol}}})
          </label>
          <input
            type="text"
            value={amount}
            onChange={(e) => setAmount(e.target.value)}
            placeholder="0.0"
            className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
          />
        </div>
        <button
          onClick={handleAction}
          disabled={isPending || isConfirming || !amount}
          className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 w-full bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
        >
          {isPending
            ? 'Confirming...'
            : isConfirming
              ? 'Processing...'
              : activeTab === 'stake'
                ? 'Stake Tokens'
                : 'Withdraw Tokens'}
        </button>
        {isSuccess && (
          <p className="text-sm text-green-600">
            {activeTab === 'stake' ? 'Staked' : 'Withdrawn'} successfully!
          </p>
        )}
      </div>
    </div>
  )
}