'use client';

import { useState } from 'react';
import { Save, Percent, FileText, ToggleLeft, ToggleRight } from 'lucide-react';

interface CommissionRule {
  id: string;
  name: string;
  percentage: number;
  description: string | null;
  isActive: boolean;
  createdAt: string;
}

interface CommissionRuleFormProps {
  rule?: CommissionRule | null;
  onSave: (data: { name: string; percentage: number; description?: string; isActive?: boolean }) => Promise<void>;
  onCancel?: () => void;
  isSaving?: boolean;
}

export function CommissionRuleForm({ rule, onSave, onCancel, isSaving }: CommissionRuleFormProps) {
  const [name, setName] = useState(rule?.name ?? '');
  const [percentage, setPercentage] = useState(rule ? Number(rule.percentage) * 100 : 5);
  const [description, setDescription] = useState(rule?.description ?? '');
  const [isActive, setIsActive] = useState(rule?.isActive ?? true);
  const [error, setError] = useState<string | null>(null);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError(null);

    if (!name.trim()) {
      setError('Rule name is required');
      return;
    }

    if (percentage <= 0 || percentage > 100) {
      setError('Percentage must be between 0 and 100');
      return;
    }

    try {
      await onSave({
        name: name.trim(),
        percentage,
        description: description.trim() || undefined,
        isActive,
      });
    } catch (err: any) {
      setError(err?.message ?? 'Failed to save rule');
    }
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div>
        <label className="mb-1 block text-xs font-medium text-slate-400">Rule Name</label>
        <div className="relative">
          <FileText className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-500" />
          <input
            type="text"
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder="e.g., Standard Referral Commission"
            className="w-full rounded-lg border border-white/10 bg-white/5 py-2 pl-10 pr-3 text-sm text-slate-200 placeholder-slate-600 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
          />
        </div>
      </div>

      <div>
        <label className="mb-1 block text-xs font-medium text-slate-400">Commission Percentage (%)</label>
        <div className="relative">
          <Percent className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-500" />
          <input
            type="number"
            value={percentage}
            onChange={(e) => setPercentage(Number(e.target.value))}
            min={0}
            max={100}
            step={0.01}
            className="w-full rounded-lg border border-white/10 bg-white/5 py-2 pl-10 pr-3 text-sm text-slate-200 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
          />
        </div>
        <p className="mt-1 text-xs text-slate-500">
          Enter as a percentage (e.g., 5 = 5% commission on trade value)
        </p>
      </div>

      <div>
        <label className="mb-1 block text-xs font-medium text-slate-400">Description (optional)</label>
        <textarea
          value={description}
          onChange={(e) => setDescription(e.target.value)}
          rows={2}
          placeholder="Brief description of this commission rule..."
          className="w-full rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm text-slate-200 placeholder-slate-600 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
        />
      </div>

      <div className="flex items-center justify-between">
        <label className="text-xs font-medium text-slate-400">Active</label>
        <button
          type="button"
          onClick={() => setIsActive(!isActive)}
          className={`flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs transition-colors ${
            isActive ? 'bg-emerald-500/10 text-emerald-400' : 'bg-slate-500/10 text-slate-400'
          }`}
        >
          {isActive ? <ToggleRight className="h-4 w-4" /> : <ToggleLeft className="h-4 w-4" />}
          {isActive ? 'Active' : 'Inactive'}
        </button>
      </div>

      {error && (
        <div className="rounded-lg bg-red-500/10 px-3 py-2 text-xs text-red-400">{error}</div>
      )}

      <div className="flex gap-2 pt-2">
        {onCancel && (
          <button
            type="button"
            onClick={onCancel}
            className="flex-1 rounded-lg border border-white/10 px-4 py-2 text-sm text-slate-400 hover:bg-white/5"
          >
            Cancel
          </button>
        )}
        <button
          type="submit"
          disabled={isSaving}
          className="flex flex-1 items-center justify-center gap-2 rounded-lg bg-blue-500 px-4 py-2 text-sm font-medium text-white hover:bg-blue-600 disabled:opacity-50"
        >
          <Save className="h-4 w-4" />
          {isSaving ? 'Saving...' : rule ? 'Update Rule' : 'Create Rule'}
        </button>
      </div>
    </form>
  );
}