'use client';

import { useState } from 'react';
import { Calculator } from 'lucide-react';
import { businessRulesService } from '@/services/business-rules.service';
import { rewardsService } from '@/services/rewards.service';
import { getErrorMessage } from '@/lib/errors';
import { Banner, Field, NumberInput, TextInput, useToasts } from './_shared';

export default function SimulatorTab({ sysConfig }: any) {
  const [userId, setUserId] = useState('');
  const [amount, setAmount] = useState('');
  const [result, setResult] = useState<any>(null);
  const [rewardSimAmount, setRewardSimAmount] = useState('');
  const [rewardSimRuleId, setRewardSimRuleId] = useState('');
  const [rewardResult, setRewardResult] = useState<any>(null);
  const [loading, setLoading] = useState(false);
  const { error, setError, Banners } = useToasts();

  const simulate = async () => {
    if (!amount) { setError('Amount is required'); return; }
    setLoading(true);
    try { setResult(await businessRulesService.simulatePurchase({ userId: userId || undefined, amount: parseFloat(amount) })); }
    catch (e: any) { setError(getErrorMessage(e)); }
    finally { setLoading(false); }
  };

  const simulateReward = async () => {
    if (!rewardSimAmount) { setError('Amount is required'); return; }
    setLoading(true);
    try { setRewardResult(await rewardsService.simulateReward(rewardSimAmount, rewardSimRuleId || undefined)); }
    catch (e: any) { setError(getErrorMessage(e)); }
    finally { setLoading(false); }
  };

  return (
    <div className="space-y-6">
      <Banners />
      <div className="rounded-xl border border-white/10 bg-slate-900/50 p-6">
        <h2 className="text-lg font-semibold text-white">Purchase Rule Simulator</h2>
        <p className="text-sm text-slate-400">Preview how every active rule (tier, commission, limit) applies to a hypothetical purchase.</p>
        <div className="mt-4 grid grid-cols-1 gap-4 md:grid-cols-3">
          <Field label="User ID" hint="Optional"><TextInput value={userId} onChange={(e) => setUserId(e.target.value)} placeholder="leave empty to skip user-specific rules" /></Field>
          <Field label={`Purchase Amount (${sysConfig.currency})`} required><NumberInput step="0.01" min="0" value={amount} onChange={(e) => setAmount(e.target.value)} /></Field>
          <div className="flex items-end">
            <button onClick={simulate} disabled={loading} className="inline-flex w-full items-center justify-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-700 disabled:opacity-50"><Calculator className="h-4 w-4" />{loading ? 'Running...' : 'Simulate'}</button>
          </div>
        </div>
        {result && <pre className="mt-4 overflow-x-auto rounded-lg border border-white/10 bg-slate-950 p-4 text-xs text-slate-300">{JSON.stringify(result, null, 2)}</pre>}
      </div>

      <div className="rounded-xl border border-white/10 bg-slate-900/50 p-6">
        <h2 className="text-lg font-semibold text-white">Reward Rule Simulator</h2>
        <p className="text-sm text-slate-400">Preview how a Reward Rule would pay out for a given amount.</p>
        <div className="mt-4 grid grid-cols-1 gap-4 md:grid-cols-3">
          <Field label="Rule ID" hint="Optional"><TextInput value={rewardSimRuleId} onChange={(e) => setRewardSimRuleId(e.target.value)} placeholder="leave empty to simulate all" /></Field>
          <Field label={`Amount (${sysConfig.currency})`} required><NumberInput step="0.01" min="0" value={rewardSimAmount} onChange={(e) => setRewardSimAmount(e.target.value)} /></Field>
          <div className="flex items-end">
            <button onClick={simulateReward} disabled={loading} className="inline-flex w-full items-center justify-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-700 disabled:opacity-50"><Calculator className="h-4 w-4" />{loading ? 'Running...' : 'Simulate'}</button>
          </div>
        </div>
        {rewardResult && <pre className="mt-4 overflow-x-auto rounded-lg border border-white/10 bg-slate-950 p-4 text-xs text-slate-300">{JSON.stringify(rewardResult, null, 2)}</pre>}
      </div>
    </div>
  );
}