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

export default function DiscountManager() {
  const [discounts, setDiscounts] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);

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

  const fetchDiscounts = async () => {
    setLoading(true);
    try {
      const result = await window.mcp.callTool('clover_list_discounts', {});
      setDiscounts(result.discounts || []);
    } catch (error) {
      console.error('Failed to fetch discounts:', error);
    } finally {
      setLoading(false);
    }
  };

  const createDiscount = async () => {
    const name = prompt('Discount name:');
    if (!name) return;

    const type = prompt('Type (amount/percentage):');
    if (type === 'amount') {
      const amount = prompt('Amount in cents:');
      if (amount) {
        await window.mcp.callTool('clover_create_discount', {
          name,
          amount: parseInt(amount),
        });
        fetchDiscounts();
      }
    } else if (type === 'percentage') {
      const percentage = prompt('Percentage (0-100):');
      if (percentage) {
        await window.mcp.callTool('clover_create_discount', {
          name,
          percentage: parseFloat(percentage),
        });
        fetchDiscounts();
      }
    }
  };

  const deleteDiscount = async (discountId: string) => {
    if (!confirm('Delete this discount?')) return;

    try {
      await window.mcp.callTool('clover_delete_discount', { discountId });
      fetchDiscounts();
    } catch (error) {
      alert('Failed to delete discount');
    }
  };

  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">Discount Manager</h1>
        <button
          onClick={createDiscount}
          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 Discount
        </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">
          {discounts.map((discount) => (
            <div key={discount.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">
                  <Tag className="w-8 h-8 text-green-600" />
                  <div>
                    <h3 className="text-lg font-semibold">{discount.name}</h3>
                    {discount.amount && (
                      <p className="text-xl font-bold text-green-600">
                        ${(discount.amount / 100).toFixed(2)} off
                      </p>
                    )}
                    {discount.percentage && (
                      <p className="text-xl font-bold text-green-600">
                        {discount.percentage}% off
                      </p>
                    )}
                  </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={() => deleteDiscount(discount.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>
  );
}
