'use client';

import { useState, useEffect } from 'react';
import { CommissionRule } from '@/types/commission.types';
import { CommissionRulesTable } from '@/components/commission/CommissionRulesTable';
import { CommissionRuleForm } from '@/components/commission/CommissionRuleForm';
import { CommissionManualCreditForm } from '@/components/commission/CommissionManualCreditForm';
import { CommissionReversalForm } from '@/components/commission/CommissionReversalForm';
import { getCommissionRules, createCommissionRule, updateCommissionRule } from '@/services/commission/commission.service';

export default function AdminCommissionSettingsPage() {
  const [rules, setRules] = useState<CommissionRule[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [editingRule, setEditingRule] = useState<CommissionRule | null>(null);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [activeTab, setActiveTab] = useState<string>('rules');
  const [successMessage, setSuccessMessage] = useState<string | null>(null);

  const fetchRules = async () => {
    try {
      setIsLoading(true);
      const data = await getCommissionRules();
      setRules(data);
      setError(null);
    } catch (err) {
      setError('Failed to fetch commission rules.');
      console.error(err);
    } finally {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    fetchRules();
  }, []);

  const handleSubmitRule = async (ruleData: Partial<CommissionRule>) => {
    try {
      setIsSubmitting(true);
      if (editingRule) {
        await updateCommissionRule(editingRule.id, ruleData);
        setSuccessMessage('Rule updated successfully.');
      } else {
        await createCommissionRule(ruleData);
        setSuccessMessage('Rule created successfully.');
      }
      setEditingRule(null);
      await fetchRules();
    } catch (err: any) {
      setError(err?.response?.data?.message || 'Failed to save rule.');
      console.error(err);
    } finally {
      setIsSubmitting(false);
      setTimeout(() => setSuccessMessage(null), 3000);
    }
  };

  const handleEditRule = (rule: CommissionRule) => {
    setEditingRule(rule);
  };

  const tabItems = ['rules', 'manual-credit', 'reversal'];
  const tabLabels: Record<string, string> = {
    rules: 'Commission Rules',
    'manual-credit': 'Manual Credit',
    reversal: 'Reversal',
  };

  const renderActiveTab = () => {
    switch (activeTab) {
      case 'rules':
        return (
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <div className="bg-white rounded-lg shadow p-6">
              <h2 className="text-lg font-semibold text-gray-900 mb-4">{editingRule ? 'Edit Rule' : 'Create New Rule'}</h2>
              <CommissionRuleForm rule={editingRule || undefined} onSubmit={handleSubmitRule} isSubmitting={isSubmitting} />
              {editingRule && (
                <button onClick={() => setEditingRule(null)} className="mt-2 text-sm text-gray-500 hover:text-gray-700">Cancel editing</button>
              )}
            </div>
            <div className="bg-white rounded-lg shadow p-6">
              <h2 className="text-lg font-semibold text-gray-900 mb-4">Current Rules</h2>
              {isLoading ? (
                <div className="text-center py-4 text-sm text-gray-500">Loading rules...</div>
              ) : (
                <CommissionRulesTable rules={rules} onEdit={handleEditRule} />
              )}
            </div>
          </div>
        );
      case 'manual-credit':
        return (
          <div className="max-w-xl">
            <CommissionManualCreditForm
              onSuccess={(commission: any) => {
                setSuccessMessage(`Successfully credited ${commission.amount} to user ${commission.userId}`);
                setTimeout(() => setSuccessMessage(null), 3000);
              }}
              onError={(err: string) => setError(err)}
            />
          </div>
        );
      case 'reversal':
        return (
          <div className="max-w-xl">
            <CommissionReversalForm
              onSuccess={(commission: any) => {
                setSuccessMessage(`Successfully reversed commission ${commission.id}`);
                setTimeout(() => setSuccessMessage(null), 3000);
              }}
              onError={(err: string) => setError(err)}
            />
          </div>
        );
      default:
        return null;
    }
  };

  return (
    <div className="container mx-auto p-4 space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-gray-900">Commission Settings</h1>
        <p className="mt-1 text-sm text-gray-500">Manage commission rules, manual credits, and reversals.</p>
      </div>
      {successMessage && (
        <div className="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-md text-sm">{successMessage}</div>
      )}
      {error && (
        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md text-sm">{error}</div>
      )}
      <div className="border-b border-gray-200">
        <nav className="flex space-x-4">
          {tabItems.map((tab) => (
            <button
              key={tab}
              onClick={() => setActiveTab(tab)}
              className={`pb-2 px-1 text-sm font-medium border-b-2 ${activeTab === tab ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}`}
            >
              {tabLabels[tab]}
            </button>
          ))}
        </nav>
      </div>
      {renderActiveTab()}
    </div>
  );
}