import { useState, useEffect } from 'react';
import { createClient } from '@supabase/supabase-js';
import { formatCurrency } from '../../lib/event-management';

const supabase = createClient(
  import.meta.env.PUBLIC_SUPABASE_URL,
  import.meta.env.PUBLIC_SUPABASE_ANON_KEY
);

interface DiscountCode {
  id: string;
  code: string;
  discount_type: 'percentage' | 'fixed';
  discount_value: number;
  minimum_purchase: number;
  max_uses: number;
  uses_count: number;
  expires_at: string;
  is_active: boolean;
  created_at: string;
  applicable_ticket_types: string[];
}

interface DiscountTabProps {
  eventId: string;
}

export default function DiscountTab({ eventId }: DiscountTabProps) {
  const [discountCodes, setDiscountCodes] = useState<DiscountCode[]>([]);
  const [ticketTypes, setTicketTypes] = useState<Record<string, unknown>[]>([]);
  const [showModal, setShowModal] = useState(false);
  const [editingCode, setEditingCode] = useState<DiscountCode | null>(null);
  const [formData, setFormData] = useState({
    code: '',
    discount_type: 'percentage' as 'percentage' | 'fixed',
    discount_value: 10,
    minimum_purchase: 0,
    max_uses: 100,
    expires_at: '',
    applicable_ticket_types: [] as string[]
  });
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);

  useEffect(() => {
    loadData();
  }, [eventId]);

  const loadData = async () => {
    setLoading(true);
    try {
      const [discountData, ticketTypesData] = await Promise.all([
        supabase
          .from('discount_codes')
          .select('*')
          .eq('event_id', eventId)
          .order('created_at', { ascending: false }),
        supabase
          .from('ticket_types')
          .select('id, name')
          .eq('event_id', eventId)
          .eq('is_active', true)
      ]);

      if (discountData.error) throw discountData.error;
      if (ticketTypesData.error) throw ticketTypesData.error;

      setDiscountCodes(discountData.data || []);
      setTicketTypes(ticketTypesData.data || []);
    } catch (_error) {
      // Handle error silently
    } finally {
      setLoading(false);
    }
  };

  const generateCode = () => {
    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
    let result = '';
    for (let i = 0; i < 8; i++) {
      result += chars.charAt(Math.floor(Math.random() * chars.length));
    }
    return result;
  };

  const handleCreateCode = () => {
    setEditingCode(null);
    setFormData({
      code: generateCode(),
      discount_type: 'percentage',
      discount_value: 10,
      minimum_purchase: 0,
      max_uses: 100,
      expires_at: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
      applicable_ticket_types: []
    });
    setShowModal(true);
  };

  const handleEditCode = (code: DiscountCode) => {
    setEditingCode(code);
    setFormData({
      code: code.code,
      discount_type: code.discount_type,
      discount_value: code.discount_value,
      minimum_purchase: code.minimum_purchase,
      max_uses: code.max_uses,
      expires_at: code.expires_at.split('T')[0],
      applicable_ticket_types: code.applicable_ticket_types || []
    });
    setShowModal(true);
  };

  const handleSaveCode = async () => {
    setSaving(true);
    try {
      const codeData = {
        ...formData,
        event_id: eventId,
        expires_at: new Date(formData.expires_at).toISOString(),
        minimum_purchase: formData.minimum_purchase * 100 // Convert to cents
      };

      if (editingCode) {
        const { error } = await supabase
          .from('discount_codes')
          .update(codeData)
          .eq('id', editingCode.id);

        if (error) throw error;
      } else {
        const { error } = await supabase
          .from('discount_codes')
          .insert({
            ...codeData,
            is_active: true,
            uses_count: 0
          });

        if (error) throw error;
      }

      setShowModal(false);
      loadData();
    } catch (_error) {
      // Handle error silently
    } finally {
      setSaving(false);
    }
  };

  const handleDeleteCode = async (code: DiscountCode) => {
    if (confirm(`Are you sure you want to delete the discount code "${code.code}"?`)) {
      try {
        const { error } = await supabase
          .from('discount_codes')
          .delete()
          .eq('id', code.id);

        if (error) throw error;
        loadData();
      } catch (error) {

      }
    }
  };

  const handleToggleCode = async (code: DiscountCode) => {
    try {
      const { error } = await supabase
        .from('discount_codes')
        .update({ is_active: !code.is_active })
        .eq('id', code.id);

      if (error) throw error;
      loadData();
    } catch (_error) {
      // Handle error silently
    }
  };

  const formatDiscount = (type: string, value: number) => {
    return type === 'percentage' ? `${value}%` : formatCurrency(value * 100);
  };

  const isExpired = (expiresAt: string) => {
    return new Date(expiresAt) < new Date();
  };

  const getApplicableTicketNames = (ticketTypeIds: string[]) => {
    if (!ticketTypeIds || ticketTypeIds.length === 0) return 'All ticket types';
    return ticketTypes
      .filter(type => ticketTypeIds.includes(type.id))
      .map(type => type.name)
      .join(', ');
  };

  const handleTicketTypeChange = (ticketTypeId: string, checked: boolean) => {
    if (checked) {
      setFormData(prev => ({
        ...prev,
        applicable_ticket_types: [...prev.applicable_ticket_types, ticketTypeId]
      }));
    } else {
      setFormData(prev => ({
        ...prev,
        applicable_ticket_types: prev.applicable_ticket_types.filter(id => id !== ticketTypeId)
      }));
    }
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center py-12">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-white"></div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h2 className="text-2xl font-light text-white">Discount Codes</h2>
        <button
          onClick={handleCreateCode}
          className="flex items-center gap-2 px-4 py-2 rounded-lg font-medium transition-all duration-200"
          style={{
            background: 'var(--glass-text-accent)',
            color: 'white'
          }}
        >
          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
          </svg>
          Create Discount Code
        </button>
      </div>

      {discountCodes.length === 0 ? (
        <div className="text-center py-12">
          <svg className="w-12 h-12 text-white/40 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 14l6-6m-5.5.5h.01m4.99 5h.01M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16l4-2 4 2 4-2 4 2z" />
          </svg>
          <p className="text-white/60 mb-4">No discount codes created yet</p>
          <button
            onClick={handleCreateCode}
            className="px-6 py-3 rounded-lg font-medium transition-all duration-200"
            style={{
              background: 'var(--glass-text-accent)',
              color: 'white'
            }}
          >
            Create Your First Discount Code
          </button>
        </div>
      ) : (
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {discountCodes.map((code) => (
            <div key={code.id} className="bg-white/5 border border-white/20 rounded-xl p-6 hover:bg-white/10 transition-all duration-200">
              <div className="flex justify-between items-start mb-4">
                <div className="flex-1">
                  <div className="flex items-center gap-3 mb-2">
                    <div className="text-2xl font-bold text-white font-mono">{code.code}</div>
                    <div className="flex items-center gap-2">
                      <span className={`px-2 py-1 text-xs rounded-full ${
                        code.is_active 
                          ? 'bg-green-500/20 text-green-300 border border-green-500/30' 
                          : 'bg-red-500/20 text-red-300 border border-red-500/30'
                      }`}>
                        {code.is_active ? 'Active' : 'Inactive'}
                      </span>
                      {isExpired(code.expires_at) && (
                        <span className="px-2 py-1 text-xs bg-red-500/20 text-red-300 border border-red-500/30 rounded-full">
                          Expired
                        </span>
                      )}
                    </div>
                  </div>
                  <div className="text-3xl font-bold text-orange-400 mb-2">
                    {formatDiscount(code.discount_type, code.discount_value)} OFF
                  </div>
                  {code.minimum_purchase > 0 && (
                    <div className="text-sm text-white/60 mb-2">
                      Minimum purchase: {formatCurrency(code.minimum_purchase)}
                    </div>
                  )}
                  <div className="text-sm text-white/60">
                    Applies to: {getApplicableTicketNames(code.applicable_ticket_types)}
                  </div>
                </div>
                <div className="flex items-center gap-2">
                  <button
                    onClick={() => handleEditCode(code)}
                    className="p-2 text-white/60 hover:text-white transition-colors"
                    title="Edit"
                  >
                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                    </svg>
                  </button>
                  <button
                    onClick={() => handleToggleCode(code)}
                    className="p-2 text-white/60 hover:text-white transition-colors"
                    title={code.is_active ? 'Deactivate' : 'Activate'}
                  >
                    {code.is_active ? (
                      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.142 4.142M9.878 9.878l4.242 4.242M9.878 9.878L3 3m6.878 6.878L21 21" />
                      </svg>
                    ) : (
                      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                      </svg>
                    )}
                  </button>
                  <button
                    onClick={() => handleDeleteCode(code)}
                    className="p-2 text-white/60 hover:text-red-400 transition-colors"
                    title="Delete"
                  >
                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                    </svg>
                  </button>
                </div>
              </div>

              <div className="space-y-3">
                <div className="grid grid-cols-2 gap-4 text-sm">
                  <div>
                    <div className="text-white/60">Uses</div>
                    <div className="text-white font-semibold">
                      {code.uses_count} / {code.max_uses}
                    </div>
                  </div>
                  <div>
                    <div className="text-white/60">Expires</div>
                    <div className="text-white font-semibold">
                      {new Date(code.expires_at).toLocaleDateString()}
                    </div>
                  </div>
                </div>

                <div className="w-full bg-white/10 rounded-full h-2">
                  <div 
                    className="bg-gradient-to-r from-orange-500 to-red-500 h-2 rounded-full transition-all duration-300"
                    style={{ width: `${(code.uses_count / code.max_uses) * 100}%` }}
                  />
                </div>
                <div className="text-xs text-white/60">
                  {((code.uses_count / code.max_uses) * 100).toFixed(1)}% used
                </div>
              </div>
            </div>
          ))}
        </div>
      )}

      {/* Modal */}
      {showModal && (
        <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50">
          <div className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl shadow-2xl max-w-lg w-full max-h-[90vh] overflow-y-auto">
            <div className="p-6">
              <div className="flex justify-between items-center mb-6">
                <h3 className="text-2xl font-light text-white">
                  {editingCode ? 'Edit Discount Code' : 'Create Discount Code'}
                </h3>
                <button
                  onClick={() => setShowModal(false)}
                  className="text-white/60 hover:text-white transition-colors"
                >
                  <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                  </svg>
                </button>
              </div>

              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-white/80 mb-2">Code</label>
                  <div className="flex">
                    <input
                      type="text"
                      value={formData.code}
                      onChange={(e) => setFormData(prev => ({ ...prev, code: e.target.value.toUpperCase() }))}
                      className="flex-1 px-4 py-3 bg-white/10 border border-white/20 rounded-l-lg text-white placeholder-white/50 focus:ring-2 focus:ring-blue-500 focus:border-transparent font-mono"
                      placeholder="DISCOUNT10"
                    />
                    <button
                      onClick={() => setFormData(prev => ({ ...prev, code: generateCode() }))}
                      className="px-4 py-3 bg-white/20 hover:bg-white/30 text-white rounded-r-lg border border-l-0 border-white/20 transition-colors"
                      title="Generate Random Code"
                    >
                      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                      </svg>
                    </button>
                  </div>
                </div>

                <div>
                  <label className="block text-sm font-medium text-white/80 mb-2">Discount Type</label>
                  <select
                    value={formData.discount_type}
                    onChange={(e) => setFormData(prev => ({ ...prev, discount_type: e.target.value as 'percentage' | 'fixed' }))}
                    className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                  >
                    <option value="percentage">Percentage</option>
                    <option value="fixed">Fixed Amount</option>
                  </select>
                </div>

                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-white/80 mb-2">
                      Discount Value {formData.discount_type === 'percentage' ? '(%)' : '($)'}
                    </label>
                    <input
                      type="number"
                      value={formData.discount_value}
                      onChange={(e) => setFormData(prev => ({ ...prev, discount_value: parseFloat(e.target.value) || 0 }))}
                      className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                      min="0"
                      step={formData.discount_type === 'percentage' ? "1" : "0.01"}
                      max={formData.discount_type === 'percentage' ? "100" : undefined}
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-white/80 mb-2">Minimum Purchase ($)</label>
                    <input
                      type="number"
                      value={formData.minimum_purchase}
                      onChange={(e) => setFormData(prev => ({ ...prev, minimum_purchase: parseFloat(e.target.value) || 0 }))}
                      className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                      min="0"
                      step="0.01"
                    />
                  </div>
                </div>

                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-white/80 mb-2">Max Uses</label>
                    <input
                      type="number"
                      value={formData.max_uses}
                      onChange={(e) => setFormData(prev => ({ ...prev, max_uses: parseInt(e.target.value) || 0 }))}
                      className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                      min="1"
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-white/80 mb-2">Expires On</label>
                    <input
                      type="date"
                      value={formData.expires_at}
                      onChange={(e) => setFormData(prev => ({ ...prev, expires_at: e.target.value }))}
                      className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                    />
                  </div>
                </div>

                <div>
                  <label className="block text-sm font-medium text-white/80 mb-2">Applicable Ticket Types</label>
                  <div className="bg-white/5 border border-white/20 rounded-lg p-3 max-h-32 overflow-y-auto">
                    {ticketTypes.length === 0 ? (
                      <div className="text-white/60 text-sm">No ticket types available</div>
                    ) : (
                      <div className="space-y-2">
                        <label className="flex items-center">
                          <input
                            type="checkbox"
                            checked={formData.applicable_ticket_types.length === 0}
                            onChange={(e) => {
                              if (e.target.checked) {
                                setFormData(prev => ({ ...prev, applicable_ticket_types: [] }));
                              }
                            }}
                            className="w-4 h-4 text-blue-600 bg-white/10 border-white/20 rounded focus:ring-blue-500"
                          />
                          <span className="ml-2 text-white text-sm">All ticket types</span>
                        </label>
                        {ticketTypes.map((type) => (
                          <label key={type.id} className="flex items-center">
                            <input
                              type="checkbox"
                              checked={formData.applicable_ticket_types.includes(type.id)}
                              onChange={(e) => handleTicketTypeChange(type.id, e.target.checked)}
                              className="w-4 h-4 text-blue-600 bg-white/10 border-white/20 rounded focus:ring-blue-500"
                            />
                            <span className="ml-2 text-white text-sm">{type.name}</span>
                          </label>
                        ))}
                      </div>
                    )}
                  </div>
                </div>
              </div>

              <div className="flex justify-end space-x-3 mt-6">
                <button
                  onClick={() => setShowModal(false)}
                  className="px-6 py-3 text-white/80 hover:text-white transition-colors"
                >
                  Cancel
                </button>
                <button
                  onClick={handleSaveCode}
                  disabled={saving}
                  className="px-6 py-3 rounded-lg font-medium transition-all duration-200 disabled:opacity-50"
                  style={{
                    background: 'var(--glass-text-accent)',
                    color: 'white'
                  }}
                >
                  {saving ? 'Saving...' : editingCode ? 'Update' : 'Create'}
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}