'use client';

import React, { useEffect, useState } from 'react';
import { Building2, CreditCard, ShieldCheck, CheckCircle2, Calendar, Clock, Landmark, Settings, Loader2 } from 'lucide-react';
import { useGlobalContext } from '@/context/Provider';
import apis from '@/utils/apis';

interface BankDetailsCardProps {
  payoutCycle?: 'daily' | 'weekly' | 'monthly' | string;
  nextPayoutDate?: string;
  payoutSummary?: any;
}

export const BankDetailsCard: React.FC<BankDetailsCardProps> = ({
  payoutCycle,
  nextPayoutDate,
  payoutSummary
}) => {
  const { userInfo } = useGlobalContext();
  const [bankData, setBankData] = useState<any>(null);
  const [loading, setLoading] = useState<boolean>(true);

  const fetchBankDetails = async (id: string) => {
    try {
      setLoading(true);
      const res = await apis.Bank.getVendorBankDetails(id);
      if (res?.data) {
        setBankData(res.data);
      } else if (res) {
        setBankData(res);
      }
    } catch (error) {
      console.error('Error fetching bank details:', error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    const vendorId = userInfo?.restaurant_id?._id || userInfo?._id;
    if (vendorId) {
      fetchBankDetails(vendorId);
    } else {
      setLoading(false);
    }
  }, [userInfo?.restaurant_id?._id, userInfo?._id]);

  const rawBankName = bankData?.bank_name || bankData?.raw_details?.bank_name || '';
  const rawAccountNumber = bankData?.account_number || bankData?.raw_details?.account_number || '';
  const rawAccountHolderName = bankData?.account_holder_name || bankData?.raw_details?.name || '';
  const rawIfscCode = bankData?.ifsc_code || bankData?.raw_details?.ifsc || '';

  const formattedAccountNumber = rawAccountNumber
    ? rawAccountNumber.length >= 4 && !rawAccountNumber.includes('•')
      ? `•••• •••• ${rawAccountNumber.slice(-4)}`
      : rawAccountNumber
    : '';

  const hasAnyField = rawBankName || formattedAccountNumber || rawAccountHolderName || rawIfscCode;

  const activeScheduleLabel = payoutSummary?.schedule_card?.active_schedule || payoutSummary?.payout_schedule_label || `${payoutCycle} Payouts`;
  const activeCycleBadge = payoutSummary?.payout_frequency_type || payoutSummary?.summary_cards?.payout_frequency?.type || payoutCycle;
  const displayNextPayoutDate = payoutSummary?.schedule_card?.next_payout_date || payoutSummary?.next_payout_date || nextPayoutDate;
  const displayReleaseTime = payoutSummary?.schedule_card?.cycle_release_time || payoutSummary?.cycle_release_time;
  const displayApproval = payoutSummary?.schedule_card?.admin_approval || payoutSummary?.admin_approval;

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
      {/* Linked Bank Account Card */}
      <div className="md:col-span-2 bg-white rounded-xl border border-gray-100 p-6 shadow-sm flex flex-col justify-between">
        <div>
          <div className="border-b border-gray-100 pb-4 mb-4">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 rounded-xl bg-orange-50 text-[var(--orange-500)] flex items-center justify-center font-bold">
                <Landmark className="w-5 h-5" />
              </div>
              <div>
                <h3 className="font-bold text-gray-900 text-base">Linked Settlement Bank Account</h3>
                <p className="text-xs text-gray-500">Payouts released by admin are directly deposited here</p>
              </div>
            </div>
          </div>

          {loading ? (
            <div className="flex items-center justify-center p-8 text-gray-400 gap-2 text-xs">
              <Loader2 className="w-5 h-5 animate-spin" />
              Loading bank details...
            </div>
          ) : !hasAnyField ? (
            <div className="p-4 text-center text-xs text-gray-400 bg-gray-50 rounded-xl border border-gray-100">
              No bank details linked.
            </div>
          ) : (
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-xs">
              {rawBankName && (
                <div className="bg-gray-50 p-3.5 rounded-xl border border-gray-100 space-y-1">
                  <span className="text-gray-400 block text-[11px] font-medium">Bank Name</span>
                  <span className="font-bold text-gray-900 text-sm flex items-center gap-2">
                    <Building2 className="w-4 h-4 text-gray-500" />
                    {rawBankName}
                  </span>
                </div>
              )}

              {formattedAccountNumber && (
                <div className="bg-gray-50 p-3.5 rounded-xl border border-gray-100 space-y-1">
                  <span className="text-gray-400 block text-[11px] font-medium">Account Number</span>
                  <span className="font-bold text-gray-900 text-sm font-mono flex items-center gap-2">
                    <CreditCard className="w-4 h-4 text-gray-500" />
                    {formattedAccountNumber}
                  </span>
                </div>
              )}

              {rawAccountHolderName && (
                <div className="bg-gray-50 p-3.5 rounded-xl border border-gray-100 space-y-1">
                  <span className="text-gray-400 block text-[11px] font-medium">Account Holder Name</span>
                  <span className="font-bold text-gray-900 text-sm block truncate">
                    {rawAccountHolderName}
                  </span>
                </div>
              )}

              {rawIfscCode && (
                <div className="bg-gray-50 p-3.5 rounded-xl border border-gray-100 space-y-1">
                  <span className="text-gray-400 block text-[11px] font-medium">IFSC / Swift Code</span>
                  <span className="font-bold text-gray-900 text-sm font-mono block">
                    {rawIfscCode}
                  </span>
                </div>
              )}
            </div>
          )}
        </div>

        <div className="mt-5 pt-3 border-t border-gray-100 flex items-center gap-2 text-xs text-emerald-700 bg-emerald-50/50 p-2.5 rounded-lg border border-emerald-100">
          <ShieldCheck className="w-4 h-4 text-emerald-600 flex-shrink-0" />
          <span>Account verified for direct e-settlement deposits & admin reconciliation payouts.</span>
        </div>
      </div>

      {/* Admin Payout Schedule & Frequency Config Card */}
      <div className="bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 text-white rounded-xl p-6 shadow-sm flex flex-col justify-between">
        <div>
          <div className="flex items-center justify-between pb-3 border-b border-gray-800 mb-4">
            <span className="text-xs font-semibold text-gray-400 uppercase tracking-wider">
              {payoutSummary?.schedule_card?.title || 'Admin Payout Frequency'}
            </span>
            <span className="w-2.5 h-2.5 rounded-full bg-emerald-400 animate-pulse"></span>
          </div>

          <div className="space-y-4">
            <div>
              <span className="text-xs text-gray-400 block">Active Settlement Cycle</span>
              <div className="text-xl font-bold text-white capitalize mt-0.5 flex items-center gap-2">
                <span className="px-2.5 py-0.5 rounded-md text-xs font-extrabold uppercase tracking-wide bg-[var(--orange-500)] text-white">
                  {activeCycleBadge}
                </span>
                {activeScheduleLabel}
              </div>
            </div>

            <div className="bg-gray-800/80 p-3.5 rounded-xl border border-gray-700/60 text-xs space-y-2">
              <div className="flex items-center justify-between">
                <span className="text-gray-400">Next Payout Date:</span>
                <span className="font-bold text-white font-mono">{displayNextPayoutDate}</span>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-gray-400">Cycle Release Time:</span>
                <span className="font-medium text-gray-200">{displayReleaseTime}</span>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-gray-400">Admin Approval:</span>
                <span className="text-emerald-400 font-semibold flex items-center gap-1">
                  <CheckCircle2 className="w-3 h-3" /> {displayApproval}
                </span>
              </div>
            </div>
          </div>
        </div>

        <p className="text-[11px] text-gray-400 mt-4 leading-relaxed">
          * Admin configures the payout cycle (Daily, Weekly, or Monthly) for your vendor account. Settlement earnings are aggregated for each cycle.
        </p>
      </div>
    </div>
  );
};