'use client';

import { useEffect, useState } from 'react';
import { BatteryCharging, ChevronDown, ChevronUp } from 'lucide-react';
import { Typography } from '@/components/atoms/typogrpahy';
import { TransactionDetail } from '../../types/transactionDetail.type';
import { formatBalanceCurrency } from '@/lib/transactionUtil';
import { CostBreakdown, Session } from '@/types/session/session';
import { parseSessionFromAPI } from '@/types/session/session';
import type { SuccessResponse, ErrorResponse } from '@/types/api/api_response';
import {
  formatBreakdownType,
  resolveBreakdownLabel,
} from '@/modules/sessionModule/detail/utils/costBreakdown';

interface ChargeDetailCardProps {
  transaction: TransactionDetail;
}

type BreakdownCardItem = {
  key: string;
  label: string;
  amount: number;
  unit?: string;
};

const buildBreakdownCards = (
  session: Session,
  transactionBreakdown?: CostBreakdown[]
): BreakdownCardItem[] => {
  const breakdown = transactionBreakdown?.length
    ? transactionBreakdown
    : session.cost?.breakdown || [];

  return breakdown.map((item, index) => {
    const normalizedType = item.type.toLowerCase();
    const unit = normalizedType.includes('energy')
      ? '/kWm'
      : normalizedType.includes('time') || normalizedType.includes('idle')
        ? '(Time Based)'
        : undefined;

    return {
      key: `${item.type}-${item.fee_name || item.rate_name || index}-${index}`,
      label: resolveBreakdownLabel(item, formatBreakdownType(item.type), {
        rateFees: session.fee_details?.rate_fees,
        breakdown,
        index,
      }),
      amount: item.total_cost,
      unit,
    };
  });
};

const EnergyCard = ({ label, value, unit }: { label: string; value: string; unit?: string }) => (
  <div className="rounded-lg shadow p-4 border border-slate-100 text-center dark:bg-gray-800 dark:border-gray-700">
    <p className="text-sm font-semibold text-gray-500 dark:text-gray-400">{label}</p>
    <p className="text-xl font-semibold text-brand-500 dark:text-brand-400 mt-2">{value}</p>
    {unit && <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">{unit}</p>}
  </div>
);

const formatDateTime = (dateString: string | null | undefined) => {
  if (!dateString) return '-';
  try {
    const d = new Date(dateString);
    return isNaN(d.getTime())
      ? '-'
      : d.toLocaleString('en-US', {
          day: '2-digit',
          month: 'short',
          year: 'numeric',
          hour: '2-digit',
          minute: '2-digit',
          hour12: false,
        });
  } catch {
    return '-';
  }
};

const ChargeDetailCard: React.FC<ChargeDetailCardProps> = ({ transaction }) => {
  const [session, setSession] = useState<Session | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [showCostBreakdown, setShowCostBreakdown] = useState(false);

  const sessionId = transaction.charge_detail?.session_id;

  useEffect(() => {
    if (!sessionId) {
      setLoading(false);
      return;
    }

    const fetchSession = async () => {
      try {
        setLoading(true);
        setError(null);
        const res = await fetch(`/api/sessions/${sessionId}`, {
          method: 'GET',
          headers: { 'Content-Type': 'application/json' },
          credentials: 'include',
          cache: 'no-store',
        });

        const json: SuccessResponse<Session> | ErrorResponse = await res.json().catch(
          () =>
            ({
              ok: false,
              error: 'INTERNAL_ERROR',
              message: 'Failed to fetch session',
            }) as ErrorResponse,
        );

        if (!res.ok || !(json as SuccessResponse<Session>)?.ok) {
          const err = json as ErrorResponse;
          setError(err?.message || 'Failed to load session details');
          return;
        }

        const okResp = json as SuccessResponse<Session>;
        setSession(parseSessionFromAPI(okResp.result));
      } catch (err) {
        setError(err instanceof Error ? err.message : 'Failed to load session');
      } finally {
        setLoading(false);
      }
    };

    fetchSession();
  }, [sessionId]);

  const energyKwh =
    session?.metrics?.energy_consumed != null
      ? (session.metrics.energy_consumed / 1000).toFixed(2)
      : null;
  const totalCost = transaction.amount ?? session?.cost?.amount ?? 0;
  const currency = transaction.currency || session?.cost?.currency || 'IDR';
  const breakdownCards = session
    ? buildBreakdownCards(session, transaction.charge_detail?.cost_breakdown)
    : [];

  return (
    <div className="space-y-6">
      {/* Header - Amount & Date */}
      <div className="bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-sm border border-gray-100 dark:border-gray-700 text-center">
        <div className="flex justify-center mb-4">
          <BatteryCharging className="w-20 h-16 text-red-500" />
        </div>

        <Typography variant="h2" className="font-bold text-gray-900 dark:text-white mb-2">
          {formatBalanceCurrency(totalCost, currency)}
        </Typography>
      </div>

      {/* Loading */}
      {loading && (
        <div className="bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-sm border border-gray-100 dark:border-gray-700">
          <div className="flex items-center justify-center py-8">
            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-red-500" />
          </div>
        </div>
      )}

      {/* Error */}
      {error && !loading && (
        <div className="bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-sm border border-gray-100 dark:border-gray-700">
          <Typography variant="b2" className="text-amber-600 dark:text-amber-400">
            {error}
          </Typography>
          <Typography variant="b2" className="mt-2 text-gray-500 dark:text-gray-400">
            Amount is shown above.
          </Typography>
        </div>
      )}

      {/* Session Details */}
      {session && !loading && !error && (
        <div className="bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-sm border border-gray-100 dark:border-gray-700">
          <h3 className="text-base font-semibold text-gray-900 dark:text-gray-100 mb-4">
            Charging Details
          </h3>

          <div className="space-y-4">
            {/* Location */}
            {session.location_name && (
              <div className="flex justify-between items-start gap-4">
                <Typography variant="b2" className="text-gray-600 dark:text-gray-400 shrink-0">
                  Location
                </Typography>
                <Typography
                  variant="b2"
                  className="font-medium text-gray-900 dark:text-gray-100 text-right"
                >
                  {session.location_name}
                </Typography>
              </div>
            )}

            {/* Chargepoint */}
            {session.chargepoint_name && (
              <div className="flex justify-between items-start gap-4">
                <Typography variant="b2" className="text-gray-600 dark:text-gray-400 shrink-0">
                  Chargepoint
                </Typography>
                <Typography
                  variant="b2"
                  className="font-medium text-gray-900 dark:text-gray-100 text-right"
                >
                  {session.chargepoint_name}
                </Typography>
              </div>
            )}

            {/* Charging Start */}
            {session.metrics?.charging_start && (
              <div className="flex justify-between items-center gap-4">
                <Typography variant="b2" className="text-gray-600 dark:text-gray-400 shrink-0">
                  Charging Start
                </Typography>
                <Typography variant="b2" className="font-medium text-gray-900 dark:text-gray-100">
                  {formatDateTime(session.metrics.charging_start)}
                </Typography>
              </div>
            )}

            {/* Charging Stop */}
            {session.metrics?.charging_stop && (
              <div className="flex justify-between items-center gap-4">
                <Typography variant="b2" className="text-gray-600 dark:text-gray-400 shrink-0">
                  Charging Stop
                </Typography>
                <Typography variant="b2" className="font-medium text-gray-900 dark:text-gray-100">
                  {formatDateTime(session.metrics.charging_stop)}
                </Typography>
              </div>
            )}

            {/* Energy Consumed */}
            {energyKwh != null && (
              <div className="flex justify-between items-center gap-4">
                <Typography variant="b2" className="text-gray-600 dark:text-gray-400 shrink-0">
                  Energy Consumed
                </Typography>
                <Typography variant="b2" className="font-medium text-gray-900 dark:text-gray-100">
                  {energyKwh} kWh
                </Typography>
              </div>
            )}

            {/* Total Cost */}
            <div className="flex justify-between items-center gap-4 pt-2 border-t border-gray-100 dark:border-gray-700">
              <Typography variant="b1" className="font-bold text-gray-900 dark:text-white shrink-0">
                Total Cost
              </Typography>
              <Typography variant="b1" className="font-bold text-gray-900 dark:text-white">
                {formatBalanceCurrency(totalCost, currency)}
              </Typography>
            </div>

            {/* Cost Breakdown - mirrors session breakdown items from the backend */}
            {breakdownCards.length > 0 && (
              <div className="pt-4 border-t border-gray-100 dark:border-gray-700">
                <button
                  type="button"
                  onClick={() => setShowCostBreakdown((prev) => !prev)}
                  className="flex w-full items-center justify-between py-2 text-left hover:bg-gray-50 dark:hover:bg-gray-700/50 rounded-lg transition-colors -mx-1 px-1"
                  aria-expanded={showCostBreakdown}
                >
                  <Typography variant="b2" className="font-medium text-gray-700 dark:text-gray-300">
                    Cost Breakdown
                  </Typography>
                  {showCostBreakdown ? (
                    <ChevronUp className="w-5 h-5 text-gray-500 dark:text-gray-400 shrink-0" />
                  ) : (
                    <ChevronDown className="w-5 h-5 text-gray-500 dark:text-gray-400 shrink-0" />
                  )}
                </button>
                {showCostBreakdown && (
                  <div className="mt-3 grid grid-cols-2 md:grid-cols-4 gap-4">
                    {breakdownCards.map((item) => (
                      <EnergyCard
                        key={item.key}
                        label={item.label}
                        value={formatBalanceCurrency(item.amount, currency)}
                        unit={item.unit}
                      />
                    ))}
                  </div>
                )}
              </div>
            )}
          </div>
        </div>
      )}

      {/* No session_id - show only transaction info */}
      {!sessionId && !loading && (
        <div className="bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-sm border border-gray-100 dark:border-gray-700">
          <Typography variant="b2" className="text-gray-500 dark:text-gray-400">
            Session details are not available for this transaction.
          </Typography>
        </div>
      )}
    </div>
  );
};

export default ChargeDetailCard;