import React, { useState, useEffect } from 'react';
import { FileText, Plus, Edit, Trash2 } from 'lucide-react';

export default function TaxManager() {
  const [taxRates, setTaxRates] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);

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

  const fetchTaxRates = async () => {
    setLoading(true);
    try {
      const result = await window.mcp.callTool('clover_list_tax_rates', {});
      setTaxRates(result.taxRates || []);
    } catch (error) {
      console.error('Failed to fetch tax rates:', error);
    } finally {
      setLoading(false);
    }
  };

  const createTaxRate = async () => {
    const name = prompt('Tax rate name:');
    const rate = prompt('Tax rate (e.g., 8.5 for 8.5%):');
    if (!name || !rate) return;

    try {
      await window.mcp.callTool('clover_create_tax_rate', {
        name,
        rate: parseFloat(rate),
      });
      fetchTaxRates();
    } catch (error) {
      alert('Failed to create tax rate');
    }
  };

  const deleteTaxRate = async (taxRateId: string) => {
    if (!confirm('Delete this tax rate?')) return;

    try {
      await window.mcp.callTool('clover_delete_tax_rate', { taxRateId });
      fetchTaxRates();
    } catch (error) {
      alert('Failed to delete tax rate');
    }
  };

  return (
    <div className="p-6 bg-gray-50 min-h-screen">
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-3xl font-bold text-gray-900">Tax Manager</h1>
        <button
          onClick={createTaxRate}
          className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center gap-2"
        >
          <Plus className="w-5 h-5" />
          New Tax Rate
        </button>
      </div>

      {loading ? (
        <div className="text-center py-12 text-gray-500">Loading...</div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {taxRates.map((taxRate) => (
            <div key={taxRate.id} className="bg-white rounded-lg shadow p-6">
              <div className="flex items-start justify-between mb-4">
                <div className="flex items-center gap-3">
                  <FileText className="w-8 h-8 text-blue-600" />
                  <div>
                    <h3 className="text-lg font-semibold">{taxRate.name}</h3>
                    <p className="text-2xl font-bold text-blue-600">
                      {taxRate.rate}%
                    </p>
                    {taxRate.isDefault && (
                      <span className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">
                        Default
                      </span>
                    )}
                  </div>
                </div>
              </div>

              <div className="flex gap-2">
                <button
                  onClick={() => alert('Edit coming soon')}
                  className="flex-1 px-3 py-2 bg-blue-100 text-blue-700 rounded hover:bg-blue-200 flex items-center justify-center gap-2"
                >
                  <Edit className="w-4 h-4" />
                  Edit
                </button>
                <button
                  onClick={() => deleteTaxRate(taxRate.id)}
                  className="px-3 py-2 bg-red-100 text-red-700 rounded hover:bg-red-200"
                >
                  <Trash2 className="w-4 h-4" />
                </button>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}
