import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { toast } from 'sonner'
import { PageShell } from '@/layouts/PageShell'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Button } from '@/components/ui/button'

export function LoyaltyPage() {
  const { t } = useTranslation()
  const [earn, setEarn] = useState('1')
  const [referral, setReferral] = useState('50')
  const [minRedeem, setMinRedeem] = useState('100')

  return (
    <PageShell title={t('loyalty.title')} subtitle={t('loyalty.subtitle')}>
      <Card className="max-w-xl">
        <CardHeader>
          <CardTitle>No-code loyalty config</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-1">
            <Label>Earn rate (points per ETB)</Label>
            <Input value={earn} onChange={(e) => setEarn(e.target.value)} />
          </div>
          <div className="space-y-1">
            <Label>Referral bonus (points)</Label>
            <Input value={referral} onChange={(e) => setReferral(e.target.value)} />
          </div>
          <div className="space-y-1">
            <Label>Minimum redemption</Label>
            <Input value={minRedeem} onChange={(e) => setMinRedeem(e.target.value)} />
          </div>
          <p className="text-xs text-muted-foreground">Tiers: Bronze / Silver / Gold — thresholds editable in full config.</p>
          <Button onClick={() => toast.success('Loyalty rules saved (mock)')}>{t('common.save')}</Button>
        </CardContent>
      </Card>
    </PageShell>
  )
}