'use client';

import React from 'react';
import { Users, TrendingUp, TrendingDown, DollarSign, Clock, XCircle, AlertCircle, Zap } from 'lucide-react';

interface PlanStats {
  planId: string;
  planName: string;
  price: number;
  currency: string;
  totalSubscribers: number;
  activeSubscribers: number;
  pendingSubscribers?: number;
  canceledSubscribers: number;
  pastDueSubscribers: number;
  trialingSubscribers: number;
  monthlyRevenue: number;
  potentialMonthlyRevenue?: number;
  annualRevenue: number;
  potentialAnnualRevenue?: number;
  totalRevenue: number;
  potentialTotalRevenue?: number;
  averageSubscriptionDuration: number;
  churnRate: number;
  growthRate: number;
  newSubscriptionsThisMonth: number;
  newSubscriptionsLastMonth: number;
}

interface SubscriptionStatsProps {
  planStats: PlanStats;
}

export function SubscriptionStats({ planStats }: SubscriptionStatsProps) {
  const getPlanColor = (planName: string) => {
    switch (planName) {
      case 'ODDECH':
        return {
          bg: 'bg-green-50',
          border: 'border-green-200',
          text: 'text-green-700',
          accent: 'bg-green-500',
        };
      case 'CZUŁOŚĆ':
        return {
          bg: 'bg-orange-50',
          border: 'border-orange-200',
          text: 'text-orange-700',
          accent: 'bg-orange-500',
        };
      case 'WOLNOŚĆ':
        return {
          bg: 'bg-purple-50',
          border: 'border-purple-200',
          text: 'text-purple-700',
          accent: 'bg-purple-500',
        };
      default:
        return {
          bg: 'bg-gray-50',
          border: 'border-gray-200',
          text: 'text-gray-700',
          accent: 'bg-gray-500',
        };
    }
  };

  const colors = getPlanColor(planStats.planName);

  return (
    <div className={`bg-white rounded-xl shadow-sm border-2 ${colors.border} overflow-hidden`}>
      {/* Header */}
      <div className={`${colors.bg} px-6 py-4 border-b ${colors.border}`}>
        <div className="flex items-center justify-between">
          <div>
            <h2 className="text-xl font-bold text-gray-900">{planStats.planName}</h2>
            <p className="text-sm text-gray-600 mt-1">
              {planStats.price === 0 ? 'Plan darmowy' : `${planStats.price} ${planStats.currency}/miesiąc`}
            </p>
          </div>
          <div className={`w-12 h-12 ${colors.accent} rounded-lg flex items-center justify-center`}>
            <DollarSign className="w-6 h-6 text-white" />
          </div>
        </div>
      </div>

      {/* Content */}
      <div className="p-6">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
          {/* Total Subscribers */}
          <div className="bg-gray-50 rounded-lg p-4">
            <div className="flex items-center justify-between mb-2">
              <p className="text-sm font-medium text-gray-600">Wszyscy subskrybenci</p>
              <Users className="w-5 h-5 text-gray-400" />
            </div>
            <p className="text-2xl font-bold text-gray-900">{planStats.totalSubscribers}</p>
          </div>

          {/* Active Subscribers */}
          <div className="bg-green-50 rounded-lg p-4">
            <div className="flex items-center justify-between mb-2">
              <p className="text-sm font-medium text-green-700">Aktywne</p>
              <Zap className="w-5 h-5 text-green-500" />
            </div>
            <p className="text-2xl font-bold text-green-700">{planStats.activeSubscribers}</p>
          </div>

          {/* Canceled Subscribers */}
          <div className="bg-red-50 rounded-lg p-4">
            <div className="flex items-center justify-between mb-2">
              <p className="text-sm font-medium text-red-700">Anulowane</p>
              <XCircle className="w-5 h-5 text-red-500" />
            </div>
            <p className="text-2xl font-bold text-red-700">{planStats.canceledSubscribers}</p>
          </div>

          {/* Past Due */}
          {planStats.pastDueSubscribers > 0 && (
            <div className="bg-yellow-50 rounded-lg p-4">
              <div className="flex items-center justify-between mb-2">
                <p className="text-sm font-medium text-yellow-700">Zaległe</p>
                <AlertCircle className="w-5 h-5 text-yellow-500" />
              </div>
              <p className="text-2xl font-bold text-yellow-700">{planStats.pastDueSubscribers}</p>
            </div>
          )}

          {/* Trialing */}
          {planStats.trialingSubscribers > 0 && (
            <div className="bg-blue-50 rounded-lg p-4">
              <div className="flex items-center justify-between mb-2">
                <p className="text-sm font-medium text-blue-700">W okresie próbnym</p>
                <Clock className="w-5 h-5 text-blue-500" />
              </div>
              <p className="text-2xl font-bold text-blue-700">{planStats.trialingSubscribers}</p>
            </div>
          )}

          {/* Pending */}
          {planStats.pendingSubscribers && planStats.pendingSubscribers > 0 && (
            <div className="bg-yellow-50 rounded-lg p-4">
              <div className="flex items-center justify-between mb-2">
                <p className="text-sm font-medium text-yellow-700">Oczekuje na płatność</p>
                <AlertCircle className="w-5 h-5 text-yellow-500" />
              </div>
              <p className="text-2xl font-bold text-yellow-700">{planStats.pendingSubscribers}</p>
            </div>
          )}
        </div>

        {/* Revenue Section */}
        {planStats.price > 0 && (
          <div className="space-y-4 mb-6">
            {/* Actual Revenue */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div className="bg-gradient-to-br from-purple-50 to-purple-100 rounded-lg p-4">
                <p className="text-sm font-medium text-purple-700 mb-2">Miesięczny przychód</p>
                <p className="text-2xl font-bold text-purple-900">
                  {planStats.monthlyRevenue.toFixed(2)} {planStats.currency}
                </p>
                {planStats.potentialMonthlyRevenue && planStats.potentialMonthlyRevenue > planStats.monthlyRevenue && (
                  <p className="text-xs text-purple-600 mt-1">
                    Potencjalnie: {planStats.potentialMonthlyRevenue.toFixed(2)} {planStats.currency}
                  </p>
                )}
              </div>
              <div className="bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg p-4">
                <p className="text-sm font-medium text-blue-700 mb-2">Roczny przychód</p>
                <p className="text-2xl font-bold text-blue-900">
                  {planStats.annualRevenue.toFixed(2)} {planStats.currency}
                </p>
                {planStats.potentialAnnualRevenue && planStats.potentialAnnualRevenue > planStats.annualRevenue && (
                  <p className="text-xs text-blue-600 mt-1">
                    Potencjalnie: {planStats.potentialAnnualRevenue.toFixed(2)} {planStats.currency}
                  </p>
                )}
              </div>
              <div className="bg-gradient-to-br from-green-50 to-green-100 rounded-lg p-4">
                <p className="text-sm font-medium text-green-700 mb-2">Całkowity przychód</p>
                <p className="text-2xl font-bold text-green-900">
                  {planStats.totalRevenue.toFixed(2)} {planStats.currency}
                </p>
                {planStats.potentialTotalRevenue && planStats.potentialTotalRevenue > planStats.totalRevenue && (
                  <p className="text-xs text-green-600 mt-1">
                    Potencjalnie: {planStats.potentialTotalRevenue.toFixed(2)} {planStats.currency}
                  </p>
                )}
              </div>
            </div>
            
            {/* Pending Revenue Info */}
            {planStats.pendingSubscribers && planStats.pendingSubscribers > 0 && (
              <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
                <p className="text-sm text-yellow-800">
                  <strong>{planStats.pendingSubscribers}</strong> subskrypcji oczekuje na płatność. 
                  Po potwierdzeniu płatności przychód wzrośnie o{' '}
                  <strong>{(planStats.pendingSubscribers * planStats.price).toFixed(2)} {planStats.currency}/miesiąc</strong>.
                </p>
              </div>
            )}
          </div>
        )}

        {/* Statistics Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          {/* Growth Rate */}
          <div className="border border-gray-200 rounded-lg p-4">
            <div className="flex items-center justify-between mb-2">
              <p className="text-sm font-medium text-gray-600">Wzrost</p>
              {planStats.growthRate >= 0 ? (
                <TrendingUp className="w-5 h-5 text-green-500" />
              ) : (
                <TrendingDown className="w-5 h-5 text-red-500" />
              )}
            </div>
            <p className={`text-xl font-bold ${planStats.growthRate >= 0 ? 'text-green-600' : 'text-red-600'}`}>
              {planStats.growthRate >= 0 ? '+' : ''}{planStats.growthRate.toFixed(1)}%
            </p>
            <p className="text-xs text-gray-500 mt-1">
              {planStats.newSubscriptionsThisMonth} nowych w tym miesiącu
            </p>
          </div>

          {/* Churn Rate */}
          {planStats.price > 0 && (
            <div className="border border-gray-200 rounded-lg p-4">
              <div className="flex items-center justify-between mb-2">
                <p className="text-sm font-medium text-gray-600">Wskaźnik rezygnacji</p>
                <TrendingDown className="w-5 h-5 text-orange-500" />
              </div>
              <p className="text-xl font-bold text-orange-600">
                {planStats.churnRate.toFixed(1)}%
              </p>
              <p className="text-xs text-gray-500 mt-1">
                {planStats.canceledSubscribers} anulowanych
              </p>
            </div>
          )}

          {/* Average Duration */}
          {planStats.price > 0 && planStats.averageSubscriptionDuration > 0 && (
            <div className="border border-gray-200 rounded-lg p-4">
              <div className="flex items-center justify-between mb-2">
                <p className="text-sm font-medium text-gray-600">Średni czas trwania</p>
                <Clock className="w-5 h-5 text-blue-500" />
              </div>
              <p className="text-xl font-bold text-blue-600">
                {planStats.averageSubscriptionDuration} dni
              </p>
              <p className="text-xs text-gray-500 mt-1">
                Średnia długość subskrypcji
              </p>
            </div>
          )}

          {/* New vs Last Month */}
          <div className="border border-gray-200 rounded-lg p-4">
            <div className="flex items-center justify-between mb-2">
              <p className="text-sm font-medium text-gray-600">Nowe subskrypcje</p>
              <Users className="w-5 h-5 text-gray-400" />
            </div>
            <div className="flex items-baseline gap-2">
              <p className="text-xl font-bold text-gray-900">
                {planStats.newSubscriptionsThisMonth}
              </p>
              <span className="text-sm text-gray-500">
                / {planStats.newSubscriptionsLastMonth} (poprzedni miesiąc)
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}