import React from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Building2, MapPin, Briefcase, Phone, Mail, TrendingUp, Clock, Award, Users, Eye, Edit2, DollarSign } from "lucide-react";
import { Link } from "react-router-dom";
import { createPageUrl } from "@/utils";

export default function BusinessCard({ company, metrics, isListView = false, onView, onEdit }) {
  const { companyName, logo, sector, monthlySpend, totalStaff, location, serviceType, phone, email, technology, performance, gradeColor, clientGrade, isActive, lastOrderDate, rateCard, businessId } = company;

  if (isListView) {
    return (
      <Card className="border-slate-200 shadow-sm hover:shadow-md transition-all">
        <CardContent className="p-4">
          <div className="flex items-center gap-4">
            {/* Logo */}
            <div className="flex-shrink-0">
              {logo ? (
                <img src={logo} alt={companyName} className="w-16 h-16 rounded-lg object-cover border-2 border-slate-200" />
              ) : (
                <div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-blue-700 rounded-lg flex items-center justify-center">
                  <Building2 className="w-8 h-8 text-white" />
                </div>
              )}
            </div>

            {/* Company Info */}
            <div className="flex-1 min-w-0">
              <div className="flex items-center gap-2 mb-1">
                <h3 className="text-lg font-bold text-slate-900 truncate">{companyName}</h3>
                <div className={`px-3 py-1 ${gradeColor} rounded-lg font-bold text-white text-sm`}>
                  {clientGrade}
                </div>
                {isActive === false && (
                  <Badge className="bg-slate-300 text-slate-700 text-xs">Inactive</Badge>
                )}
              </div>
              <p className="text-sm text-slate-600 mb-2">{serviceType}</p>
              <div className="flex items-center gap-4 text-xs text-slate-500">
                <span className="flex items-center gap-1">
                  <MapPin className="w-3 h-3" />
                  {location}
                </span>
                <span>Monthly: ${(monthlySpend / 1000).toFixed(0)}k</span>
                <span>{totalStaff} Staff</span>
                {lastOrderDate && (
                  <span className="flex items-center gap-1">
                    <Clock className="w-3 h-3" />
                    Last: {new Date(lastOrderDate).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
                  </span>
                )}
              </div>
            </div>

            {/* All Performance Metrics */}
            <div className="flex items-center gap-4 flex-shrink-0">
              <div className="text-center">
                <p className="text-xs text-slate-500 mb-1">Cancellations</p>
                <p className="text-lg font-bold text-orange-700">{performance.cancelRate}%</p>
              </div>
              <div className="text-center">
                <p className="text-xs text-slate-500 mb-1">On-Time</p>
                <p className="text-lg font-bold text-blue-700">{performance.onTimeRate}%</p>
              </div>
              <div className="text-center">
                <p className="text-xs text-slate-500 mb-1">Rapid Orders</p>
                <p className="text-lg font-bold text-purple-700">{performance.rapidOrders}</p>
              </div>
              <div className="text-center min-w-[80px]">
                <p className="text-xs text-slate-500 mb-1">Main Position</p>
                <p className="text-sm font-bold text-green-700 truncate">{performance.mainPosition}</p>
              </div>
            </div>

            {/* Rate Card Badge */}
            {rateCard && (
              <div className="flex-shrink-0">
                <Link to={`${createPageUrl("EditBusiness")}?id=${businessId}&tab=services`}>
                  <Badge className="bg-emerald-100 text-emerald-700 border border-emerald-200 hover:bg-emerald-200 cursor-pointer px-3 py-1.5">
                    <DollarSign className="w-3 h-3 mr-1 inline" />
                    {rateCard}
                  </Badge>
                </Link>
              </div>
            )}

            {/* Actions */}
            <div className="flex items-center gap-2 flex-shrink-0">
              <Button variant="outline" size="sm" onClick={onView} className="border-blue-600 text-blue-600 hover:bg-blue-50">
                <Eye className="w-4 h-4 mr-1" />
                View
              </Button>
              <Button variant="outline" size="sm" onClick={onEdit} className="border-slate-300 hover:bg-slate-50">
                <Edit2 className="w-4 h-4 mr-1" />
                Edit
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>
    );
  }

  return (
    <Card className="border-slate-200 shadow-lg hover:shadow-xl transition-all overflow-hidden">
      {/* Header - Blue Gradient */}
      <div className="bg-gradient-to-br from-blue-600 to-blue-800 p-6 relative">
        <div className="flex items-start justify-between mb-4">
          <div className="flex items-center gap-4">
            {logo ? (
              <img src={logo} alt={companyName} className="w-16 h-16 rounded-xl object-cover border-2 border-white shadow-md bg-white p-1" />
            ) : (
              <div className="w-16 h-16 bg-white rounded-xl flex items-center justify-center shadow-md">
                <Building2 className="w-8 h-8 text-blue-600" />
              </div>
            )}
            <div>
              <h3 className="text-2xl font-bold text-white mb-1">{companyName}</h3>
              <Badge className="bg-white/20 text-white border-white/40 text-xs">
                # N/A
              </Badge>
            </div>
          </div>
          <div className={`px-4 py-2 ${gradeColor} rounded-xl font-bold text-2xl text-white shadow-lg`}>
            {clientGrade}
          </div>
        </div>
        <p className="text-blue-100 text-sm font-medium">{serviceType}</p>

        {/* Metrics Row */}
        <div className="grid grid-cols-3 gap-3 mt-4">
          <div className="bg-white/10 backdrop-blur-sm rounded-lg p-4">
            <p className="text-blue-200 text-xs font-medium mb-1">Monthly Sales</p>
            <p className="text-white text-2xl font-bold">${(monthlySpend / 1000).toFixed(0)}k</p>
          </div>
          <div className="bg-white/10 backdrop-blur-sm rounded-lg p-4">
            <p className="text-blue-200 text-xs font-medium mb-1">Total Staff</p>
            <p className="text-white text-2xl font-bold">{totalStaff}</p>
          </div>
          <div className="bg-white/10 backdrop-blur-sm rounded-lg p-4">
            <p className="text-blue-200 text-xs font-medium mb-1">Last Order</p>
            <p className="text-white text-lg font-bold">
              {lastOrderDate 
                ? new Date(lastOrderDate).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
                : 'None'}
            </p>
          </div>
        </div>
      </div>

      {/* Content */}
      <CardContent className="p-6 bg-slate-50">
        {/* Company Information */}
        <div className="mb-6">
          <h4 className="text-xs font-bold text-slate-500 uppercase tracking-wider mb-3">COMPANY INFORMATION</h4>
          <div className="space-y-3">
            <div className="flex items-start gap-3">
              <MapPin className="w-5 h-5 text-slate-400 mt-0.5 flex-shrink-0" />
              <div>
                <p className="font-semibold text-slate-900">{location}</p>
                <p className="text-sm text-slate-500">California</p>
              </div>
            </div>
            <div className="flex items-start gap-3">
              <Briefcase className="w-5 h-5 text-slate-400 mt-0.5 flex-shrink-0" />
              <div>
                <p className="font-semibold text-slate-900">{serviceType}</p>
                <p className="text-sm text-slate-500">Primary Service</p>
              </div>
            </div>
            <div className="flex items-start gap-3">
              <Phone className="w-5 h-5 text-slate-400 mt-0.5 flex-shrink-0" />
              <p className="text-slate-900">{phone}</p>
            </div>
            <div className="flex items-start gap-3">
              <Mail className="w-5 h-5 text-slate-400 mt-0.5 flex-shrink-0" />
              <p className="text-slate-900 break-all">{email}</p>
            </div>
          </div>
        </div>

        {/* Rate Card & Technology */}
        <div className="mb-6">
          <h4 className="text-xs font-bold text-slate-500 uppercase tracking-wider mb-3">RATE CARD & TECHNOLOGY</h4>
          <div className="flex flex-wrap gap-2">
            {rateCard ? (
              <Link to={`${createPageUrl("EditBusiness")}?id=${businessId}&tab=services`}>
                <Badge className="bg-emerald-50 text-emerald-700 border border-emerald-200 text-xs cursor-pointer hover:bg-emerald-100">
                  <DollarSign className="w-3 h-3 mr-1 inline" />
                  {rateCard}
                </Badge>
              </Link>
            ) : (
              <Badge className="bg-slate-100 text-slate-500 border border-slate-200 text-xs">
                No Rate Card
              </Badge>
            )}
            {technology?.isUsingKROW ? (
              <Badge className="bg-blue-50 text-blue-700 border border-blue-200 text-xs">
                Using KROW
              </Badge>
            ) : (
              <Badge className="bg-amber-50 text-amber-700 border border-amber-200 text-xs cursor-pointer hover:bg-amber-100">
                Invite to KROW
              </Badge>
            )}
          </div>
        </div>

        {/* Performance Metrics */}
        <div className="mb-4">
          <h4 className="text-xs font-bold text-slate-500 uppercase tracking-wider mb-3">PERFORMANCE METRICS</h4>
          <div className="grid grid-cols-2 gap-4">
            {/* Cancellation Rate */}
            <div className="bg-white rounded-lg p-4 border border-slate-200">
              <div className="flex items-center gap-2 mb-2">
                <TrendingUp className="w-4 h-4 text-orange-600" />
                <p className="text-xs font-semibold text-slate-600">Cancellations</p>
              </div>
              <p className="text-3xl font-bold text-orange-600 mb-2">{performance.cancelRate}%</p>
              <div className="w-full h-2 bg-orange-100 rounded-full overflow-hidden">
                <div className="h-full bg-orange-600 rounded-full transition-all" style={{ width: `${performance.cancelRate}%` }}></div>
              </div>
            </div>

            {/* On-Time Ordering */}
            <div className="bg-white rounded-lg p-4 border border-slate-200">
              <div className="flex items-center gap-2 mb-2">
                <Clock className="w-4 h-4 text-blue-600" />
                <p className="text-xs font-semibold text-slate-600">On-Time Order</p>
              </div>
              <p className="text-3xl font-bold text-blue-600 mb-2">{performance.onTimeRate}%</p>
              <div className="w-full h-2 bg-blue-100 rounded-full overflow-hidden">
                <div className="h-full bg-blue-600 rounded-full transition-all" style={{ width: `${performance.onTimeRate}%` }}></div>
              </div>
            </div>

            {/* Rapid Orders */}
            <div className="bg-white rounded-lg p-4 border border-slate-200">
              <div className="flex items-center gap-2 mb-2">
                <Award className="w-4 h-4 text-purple-600" />
                <p className="text-xs font-semibold text-slate-600">Rapid Orders</p>
              </div>
              <p className="text-3xl font-bold text-purple-600 mb-2">{performance.rapidOrders}</p>
              <p className="text-xs text-slate-500">Last 30 days</p>
            </div>

            {/* Main Position */}
            <div className="bg-white rounded-lg p-4 border border-slate-200">
              <div className="flex items-center gap-2 mb-2">
                <Users className="w-4 h-4 text-green-600" />
                <p className="text-xs font-semibold text-slate-600">Main Position</p>
              </div>
              <p className="text-lg font-bold text-green-600">{performance.mainPosition}</p>
              <p className="text-xs text-slate-500">Most requested</p>
            </div>
          </div>
        </div>

        {/* Footer */}
        <button 
          onClick={onView}
          className="w-full bg-blue-50 hover:bg-blue-100 rounded-lg p-3 text-center transition-colors cursor-pointer"
        >
          <p className="text-xs text-blue-700 font-medium">
            Click to view full profile and detailed analytics
          </p>
        </button>
      </CardContent>
    </Card>
  );
}