import React from 'react';

const TablerIcon = ({ name = '', className = '' }) => <i className={`tabler-${name} ${className}`} />;

const PaymentMethodAnalytics = () => {
  // Default data structure for demonstration
  const defaultData = {
    "organization_id": "4ecf5cfb-9ac1-4fbd-94e4-9f149f07460a",
    "outlet_id": "d5b38fc4-8df7-4d54-99e2-b8825977f5ca",
    "date_from": "2025-07-05T00:00:00+07:00",
    "date_to": "2025-08-05T23:59:59.999999999+07:00",
    "group_by": "day",
    "summary": {
      "total_amount": 212000,
      "total_orders": 6,
      "total_payments": 6,
      "average_order_value": 35333.333333333336
    },
    "data": [
      {
        "payment_method_id": "4b1c0d21-c98a-4fc0-a2f9-8d90a0c9d905",
        "payment_method_name": "CASH",
        "payment_method_type": "cash",
        "total_amount": 212000,
        "order_count": 6,
        "payment_count": 6,
        "percentage": 100
      }
    ]
  };

  const analyticsData = defaultData;
  const { summary, data: paymentMethods } = analyticsData;

  // Format currency
  const formatCurrency = (amount: any) => {
    return new Intl.NumberFormat('id-ID', {
      style: 'currency',
      currency: 'IDR',
      minimumFractionDigits: 0,
      maximumFractionDigits: 0
    }).format(amount);
  };

  // Format date
  const formatDate = (dateString: any) => {
    return new Date(dateString).toLocaleDateString('id-ID', {
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    });
  };

  // Get icon for payment method
  const getPaymentMethodIcon = (type: any) => {
    switch (type.toLowerCase()) {
      case 'cash':
        return <TablerIcon name="cash" className="w-5 h-5" />;
      case 'card':
      case 'credit_card':
      case 'debit_card':
        return <TablerIcon name="credit-card" className="w-5 h-5" />;
      default:
        return <TablerIcon name="coins" className="w-5 h-5" />;
    }
  };

  // Get color classes for payment method type
  const getPaymentMethodColors = (type: any) => {
    switch (type.toLowerCase()) {
      case 'cash':
        return {
          chip: 'bg-green-100 text-green-800 border-green-200',
          progress: 'bg-green-500'
        };
      case 'card':
      case 'credit_card':
      case 'debit_card':
        return {
          chip: 'bg-blue-100 text-blue-800 border-blue-200',
          progress: 'bg-blue-500'
        };
      default:
        return {
          chip: 'bg-gray-100 text-gray-800 border-gray-200',
          progress: 'bg-gray-500'
        };
    }
  };

  // Progress Bar Component
  const ProgressBar = ({ value, className, color }: any) => {
    return (
      <div className={`w-full bg-gray-200 rounded-full h-2 ${className}`}>
        <div 
          className={`h-2 rounded-full transition-all duration-300 ${color}`}
          style={{ width: `${Math.min(value, 100)}%` }}
        ></div>
      </div>
    );
  };

  // Chip Component
  const Chip = ({ label, colorClasses }: any) => {
    return (
      <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border ${colorClasses}`}>
        {label}
      </span>
    );
  };

  return (
    <div className="mx-auto space-y-6 bg-gray-50 min-h-screen">
      {/* Header */}
      <div className="flex items-center gap-3 mb-6">
        <div className="p-2 bg-blue-600 rounded-lg">
          <TablerIcon name="trending-up" className="w-6 h-6 text-white" />
        </div>
        <div>
          <h1 className="text-3xl font-bold text-gray-900">
            Payment Analytics
          </h1>
          <div className="flex items-center gap-2 mt-1">
            <TablerIcon name="calendar" className="w-4 h-4 text-gray-500" />
            <p className="text-sm text-gray-600">
              {formatDate(analyticsData.date_from)} - {formatDate(analyticsData.date_to)}
            </p>
          </div>
        </div>
      </div>

      {/* Summary Cards */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-md transition-shadow">
          <div className="p-6 bg-gradient-to-br from-blue-50 to-blue-100">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-blue-600 mb-1">
                  Total Revenue
                </p>
                <p className="text-2xl font-bold text-blue-900">
                  {formatCurrency(summary.total_amount)}
                </p>
              </div>
              <div className="p-3 bg-blue-600 rounded-full">
                <TablerIcon name="receipt" className="w-6 h-6 text-white" />
              </div>
            </div>
          </div>
        </div>

        <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-md transition-shadow">
          <div className="p-6 bg-gradient-to-br from-green-50 to-green-100">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-green-600 mb-1">
                  Total Orders
                </p>
                <p className="text-2xl font-bold text-green-900">
                  {summary.total_orders.toLocaleString()}
                </p>
              </div>
              <div className="p-3 bg-green-600 rounded-full">
                <TablerIcon name="cash" className="w-6 h-6 text-white" />
              </div>
            </div>
          </div>
        </div>

        <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-md transition-shadow">
          <div className="p-6 bg-gradient-to-br from-purple-50 to-purple-100">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-purple-600 mb-1">
                  Total Payments
                </p>
                <p className="text-2xl font-bold text-purple-900">
                  {summary.total_payments.toLocaleString()}
                </p>
              </div>
              <div className="p-3 bg-purple-600 rounded-full">
                <TablerIcon name="credit-card" className="w-6 h-6 text-white" />
              </div>
            </div>
          </div>
        </div>

        <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-md transition-shadow">
          <div className="p-6 bg-gradient-to-br from-orange-50 to-orange-100">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-orange-600 mb-1">
                  Avg Order Value
                </p>
                <p className="text-2xl font-bold text-orange-900">
                  {formatCurrency(summary.average_order_value)}
                </p>
              </div>
              <div className="p-3 bg-orange-600 rounded-full">
                <TablerIcon name="trending-up" className="w-6 h-6 text-white" />
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Payment Methods Breakdown */}
      <div className="bg-white rounded-xl shadow-sm border border-gray-100">
        <div className="p-6">
          <div className="flex items-center gap-2 mb-6">
            <TablerIcon name="credit-card" className="w-6 h-6 text-blue-600" />
            <h2 className="text-xl font-bold text-gray-900">
              Payment Methods Breakdown
            </h2>
          </div>

          <div className="overflow-x-auto">
            <table className="w-full">
              <thead>
                <tr className="bg-gray-50 border-b border-gray-200">
                  <th className="text-left p-4 font-semibold text-gray-900">Payment Method</th>
                  <th className="text-left p-4 font-semibold text-gray-900">Type</th>
                  <th className="text-right p-4 font-semibold text-gray-900">Amount</th>
                  <th className="text-right p-4 font-semibold text-gray-900">Orders</th>
                  <th className="text-right p-4 font-semibold text-gray-900">Payments</th>
                  <th className="text-right p-4 font-semibold text-gray-900">Percentage</th>
                  <th className="text-left p-4 font-semibold text-gray-900">Usage</th>
                </tr>
              </thead>
              <tbody>
                {paymentMethods.map((method, index) => {
                  const colors = getPaymentMethodColors(method.payment_method_type);
                  return (
                    <tr key={method.payment_method_id || index} className="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                      <td className="p-4">
                        <div className="flex items-center gap-3">
                          {getPaymentMethodIcon(method.payment_method_type)}
                          <span className="font-medium text-gray-900">
                            {method.payment_method_name}
                          </span>
                        </div>
                      </td>
                      <td className="p-4">
                        <Chip 
                          label={method.payment_method_type.toUpperCase()} 
                          colorClasses={colors.chip}
                        />
                      </td>
                      <td className="p-4 text-right font-semibold text-gray-900">
                        {formatCurrency(method.total_amount)}
                      </td>
                      <td className="p-4 text-right text-gray-700">
                        {method.order_count.toLocaleString()}
                      </td>
                      <td className="p-4 text-right text-gray-700">
                        {method.payment_count.toLocaleString()}
                      </td>
                      <td className="p-4 text-right">
                        <span className="font-bold text-blue-600">
                          {method.percentage.toFixed(1)}%
                        </span>
                      </td>
                      <td className="p-4">
                        <div className="flex items-center gap-2">
                          <ProgressBar 
                            value={method.percentage} 
                            className="flex-1" 
                            color={colors.progress}
                          />
                          <span className="text-xs text-gray-500 min-w-fit">
                            {method.percentage.toFixed(1)}%
                          </span>
                        </div>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>

          {paymentMethods.length === 0 && (
            <div className="text-center py-12">
              <TablerIcon name="credit-card" className="w-12 h-12 text-gray-300 mx-auto mb-4" />
              <p className="text-gray-500">
                No payment method data available for the selected period.
              </p>
            </div>
          )}
        </div>
      </div>

      {/* Additional Stats */}
      <div className="bg-white rounded-xl shadow-sm border border-gray-100">
        <div className="p-6">
          <h3 className="text-lg font-bold text-gray-900 mb-4">
            Key Insights
          </h3>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-3">
              <div className="flex items-center justify-between p-4 bg-blue-50 rounded-lg border border-blue-100">
                <div className="flex items-center gap-3">
                  <TablerIcon name="cash" className="w-5 h-5 text-blue-600" />
                  <span className="text-sm font-medium text-blue-900">
                    Most Used Payment Method
                  </span>
                </div>
                <span className="font-bold text-blue-900">
                  {paymentMethods.length > 0 ? paymentMethods[0].payment_method_name : 'N/A'}
                </span>
              </div>
              <div className="flex items-center justify-between p-4 bg-green-50 rounded-lg border border-green-100">
                <div className="flex items-center gap-3">
                  <TablerIcon name="trending-up" className="w-5 h-5 text-green-600" />
                  <span className="text-sm font-medium text-green-900">
                    Revenue per Payment
                  </span>
                </div>
                <span className="font-bold text-green-900">
                  {formatCurrency(summary.total_payments > 0 ? summary.total_amount / summary.total_payments : 0)}
                </span>
              </div>
            </div>
            <div className="space-y-3">
              <div className="flex items-center justify-between p-4 bg-purple-50 rounded-lg border border-purple-100">
                <div className="flex items-center gap-3">
                  <TablerIcon name="receipt" className="w-5 h-5 text-purple-600" />
                  <span className="text-sm font-medium text-purple-900">
                    Payment Success Rate
                  </span>
                </div>
                <span className="font-bold text-purple-900">
                  {((summary.total_payments / summary.total_orders) * 100).toFixed(1)}%
                </span>
              </div>
              <div className="flex items-center justify-between p-4 bg-orange-50 rounded-lg border border-orange-100">
                <div className="flex items-center gap-3">
                  <TablerIcon name="coins" className="w-5 h-5 text-orange-600" />
                  <span className="text-sm font-medium text-orange-900">
                    Payment Methods Used
                  </span>
                </div>
                <span className="font-bold text-orange-900">
                  {paymentMethods.length}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default PaymentMethodAnalytics;
