'use client';

import React, { useState } from 'react';
import Link from 'next/link';
import type { SupportViewModel } from './supportViewModel';

interface QuickActionsProps {
  support: SupportViewModel;
}

export function SupportQuickActions({ support }: QuickActionsProps) {
  const brandColor = support.brandColor;
  const waHref = support.whatsappUrl || support.requestChargerWhatsappUrl || '#';
  const email = support.email;
  const mailHref = `mailto:${email}`;
  const refundHref = '/wallet/withdrawals';

  const [isRefundModalOpen, setIsRefundModalOpen] = useState(false);

  const refundShortText = `Withdrawals for ${support.displayName} balance are available upon request.`;

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 -mt-12 mb-16">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {/* Live Chat */}
        <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 p-8 text-center hover:shadow-xl transition-shadow duration-200">
          <div
            className="w-16 h-16 bg-brand-100 dark:bg-brand-900/30 rounded-2xl flex items-center justify-center mx-auto mb-6"
            style={brandColor ? { backgroundColor: brandColor + '22' } : undefined}
          >
            <svg
              className="w-8 h-8 text-brand-600 dark:text-brand-400"
              style={brandColor ? { color: brandColor } : undefined}
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
              />
            </svg>
          </div>
          <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-3">Live Chat</h3>
          <p className="text-gray-600 dark:text-gray-300 mb-6">
            Get instant help from our support team
          </p>
          <a
            href={waHref}
            target="_blank"
            rel="noopener noreferrer"
            className="bg-brand-600 hover:bg-brand-700 text-white px-6 py-3 rounded-xl font-medium transition-colors duration-200"
            style={brandColor ? { backgroundColor: brandColor } : undefined}
          >
            Start Chat
          </a>
        </div>

        {/* Email Support */}
        <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 p-8 text-center hover:shadow-xl transition-shadow duration-200">
          <div
            className="w-16 h-16 bg-brand-100 dark:bg-brand-900/30 rounded-2xl flex items-center justify-center mx-auto mb-6"
            style={brandColor ? { backgroundColor: brandColor + '22' } : undefined}
          >
            <svg
              className="w-8 h-8 text-brand-600 dark:text-brand-400"
              style={brandColor ? { color: brandColor } : undefined}
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
              />
            </svg>
          </div>
          <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-3">Email Support</h3>
          <p className="text-gray-600 dark:text-gray-300 mb-6">Send us a detailed message</p>
          <a
            href={mailHref}
            className="bg-brand-600 hover:bg-brand-700 text-white px-6 py-3 rounded-xl font-medium transition-colors duration-200"
            style={brandColor ? { backgroundColor: brandColor } : undefined}
          >
            Send Email
          </a>
        </div>

        {/* Refund Policy */}
        <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 p-8 text-center hover:shadow-xl transition-shadow duration-200">
          <div
            className="w-16 h-16 bg-brand-100 dark:bg-brand-900/30 rounded-2xl flex items-center justify-center mx-auto mb-6"
            style={brandColor ? { backgroundColor: brandColor + '22' } : undefined}
          >
            <svg
              className="w-8 h-8 text-brand-600 dark:text-brand-400"
              style={brandColor ? { color: brandColor } : undefined}
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M12 8V4m0 0L8 8m4-4l4 4M4 12h16m-8 8v-4m0 0l4 4m-4-4l-4 4"
              />
            </svg>
          </div>
          <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-3">Withdraw Policy</h3>
          <p className="text-gray-600 dark:text-gray-300 mb-6">{refundShortText}</p>
          <button
            onClick={() => setIsRefundModalOpen(true)}
            className="bg-brand-600 hover:bg-brand-700 text-white px-6 py-3 rounded-xl font-medium transition-colors duration-200"
            style={brandColor ? { backgroundColor: brandColor } : undefined}
          >
            Learn More
          </button>
        </div>
      </div>

      {/* Refund Modal */}
      {isRefundModalOpen && (
        <div className="fixed inset-0 flex items-center justify-center bg-black/50 z-50 px-4">
          <div className="bg-white dark:bg-gray-900 rounded-2xl shadow-2xl max-w-lg w-full p-6 relative">
            <button
              onClick={() => setIsRefundModalOpen(false)}
              className="absolute top-3 right-3 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
            >
              ✕
            </button>
            <h3 className="text-2xl font-semibold mb-4 text-gray-900 dark:text-white">
              Withdraw Policy
            </h3>

            <div className="text-gray-700 dark:text-gray-300 whitespace-pre-line leading-relaxed">
              <p>
                Funds credited to your {support.displayName} Front Application balance can be withdrawn
                upon request by visiting{' '}
                <Link
                  href={refundHref}
                  className="text-brand-600 hover:underline font-medium"
                  style={brandColor ? { color: brandColor } : undefined}
                >
                  this link
                </Link>
                . A withdraw administration fee of <span className="font-bold">Rp 10,000</span> will be deducted from each withdrawal
                transaction.
              </p>

              <p className="mt-4">
                Alternatively, you may choose to retain the balance for future use. Your balance
                will be retained indefinitely and can be utilized across multiple{' '}
                {support.displayName} charging locations, including but not limited to malls, office
                buildings, apartments, campuses, and other properties where {support.displayName}{' '}
                services are available.
              </p>
            </div>

            <div className="mt-6 text-right">
              <button
                onClick={() => setIsRefundModalOpen(false)}
                className="bg-brand-600 hover:bg-brand-700 text-white px-5 py-2 rounded-lg font-medium"
                style={brandColor ? { backgroundColor: brandColor } : undefined}
              >
                Close
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}