import { useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card';
import { Calendar, Factory, TrendingUp, TrendingDown, Clock, Package, Wrench, Check } from 'lucide-react';
import { formatISK } from '@/utils/priceUtils';
import { IndJob } from '@/lib/types';
import { Input } from '@/components/ui/input';
import { useToast } from '@/components/ui/use-toast';

interface JobCardProps {
  job: IndJob;
  onEdit: (job: any) => void;
  onDelete: (jobId: string) => void;
  onUpdateProduced?: (jobId: string, produced: number) => void;
  isTracked?: boolean;
}

const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete, onUpdateProduced, isTracked = false }) => {
  const [isEditingProduced, setIsEditingProduced] = useState(false);
  const [producedValue, setProducedValue] = useState(job.produced?.toString() || '0');
  const [copyingBom, setCopyingBom] = useState(false);
  const [copyingConsumed, setCopyingConsumed] = useState(false);
  const { toast } = useToast();

  // Sort transactions by date descending
  const sortedExpenditures = [...job.expenditures].sort((a, b) => 
    new Date(b.date).getTime() - new Date(a.date).getTime()
  );
  const sortedIncome = [...job.income].sort((a, b) => 
    new Date(b.date).getTime() - new Date(a.date).getTime()
  );

  // Calculate totals for this job (including tracked jobs)
  const totalExpenditure = sortedExpenditures.reduce((sum, tx) => sum + tx.totalPrice, 0);
  const totalIncome = sortedIncome.reduce((sum, tx) => sum + tx.totalPrice, 0);
  const profit = totalIncome - totalExpenditure;
  const margin = totalIncome > 0 ? ((profit / totalIncome) * 100) : 0;

  const itemsSold = sortedIncome.reduce((sum, tx) => sum + tx.quantity, 0);
  const saleStartTime = job.saleStart ? new Date(job.saleStart).getTime() : null;
  const daysSinceStart = saleStartTime ? Math.max(1, Math.ceil((Date.now() - saleStartTime) / (1000 * 60 * 60 * 24))) : 0;
  const itemsPerDay = daysSinceStart > 0 ? itemsSold / daysSinceStart : 0;

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'Planned': return 'bg-gray-600';
      case 'Acquisition': return 'bg-yellow-600';
      case 'Running': return 'bg-blue-600';
      case 'Done': return 'bg-purple-600';
      case 'Selling': return 'bg-orange-600';
      case 'Closed': return 'bg-green-600';
      case 'Tracked': return 'bg-cyan-600';
      default: return 'bg-gray-600';
    }
  };

  const formatDateTime = (dateString: string | null | undefined) => {
    if (!dateString) return 'Not set';
    return new Date(dateString).toLocaleString('en-CA', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit'
    }).replace(',', '');
  };

  const handleProducedUpdate = () => {
    const newValue = parseInt(producedValue);
    if (!isNaN(newValue) && onUpdateProduced) {
      onUpdateProduced(job.id, newValue);
      setIsEditingProduced(false);
    } else {
      setProducedValue(job.produced?.toString() || '0');
      setIsEditingProduced(false);
    }
  };

  const handleProducedKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
      handleProducedUpdate();
    } else if (e.key === 'Escape') {
      setIsEditingProduced(false);
      setProducedValue(job.produced?.toString() || '0');
    }
  };

  const copyBillOfMaterials = async () => {
    if (!job.billOfMaterials?.length) return;
    
    const text = job.billOfMaterials
      .map(item => `${item.name}\t${item.quantity.toLocaleString()}`)
      .join('\n');
    
    try {
      await navigator.clipboard.writeText(text);
      setCopyingBom(true);
      toast({
        title: "Copied!",
        description: "Bill of materials copied to clipboard",
        duration: 2000,
      });
      setTimeout(() => setCopyingBom(false), 1000);
    } catch (err) {
      toast({
        title: "Error",
        description: "Failed to copy to clipboard",
        variant: "destructive",
        duration: 2000,
      });
    }
  };

  const copyConsumedMaterials = async () => {
    if (!job.consumedMaterials?.length) return;
    
    const text = job.consumedMaterials
      .map(item => `${item.name}\t${item.quantity.toLocaleString()}`)
      .join('\n');
    
    try {
      await navigator.clipboard.writeText(text);
      setCopyingConsumed(true);
      toast({
        title: "Copied!",
        description: "Consumed materials copied to clipboard",
        duration: 2000,
      });
      setTimeout(() => setCopyingConsumed(false), 1000);
    } catch (err) {
      toast({
        title: "Error",
        description: "Failed to copy to clipboard",
        variant: "destructive",
        duration: 2000,
      });
    }
  };

  return (
    <Card className={`bg-gray-900 border-gray-700 text-white ${job.status === 'Tracked' ? 'border-l-4 border-l-cyan-600' : ''}`}>
      <CardHeader>
        <div className="flex justify-between items-start">
          <div>
            <div className="flex items-center gap-2 mb-2">
              <CardTitle className="text-blue-400">{job.outputItem}</CardTitle>
              <Badge className={`${getStatusColor(job.status)} text-white`}>
                {job.status}
              </Badge>
              {job.billOfMaterials && job.billOfMaterials.length > 0 && (
                <HoverCard>
                  <HoverCardTrigger asChild>
                    <Button 
                      variant="ghost" 
                      size="sm" 
                      className="p-1 h-6 w-6 relative group"
                      onClick={(e) => {
                        e.preventDefault();
                        copyBillOfMaterials();
                      }}
                    >
                      {copyingBom ? (
                        <Check className="w-4 h-4 text-green-400 absolute transition-opacity" />
                      ) : (
                        <Package className="w-4 h-4 text-blue-400" />
                      )}
                      <span className="sr-only">Copy bill of materials</span>
                    </Button>
                  </HoverCardTrigger>
                  <HoverCardContent className="w-80 bg-gray-800 border-gray-600 text-white">
                    <div className="space-y-2">
                      <h4 className="text-sm font-semibold text-blue-400">Bill of Materials (click to copy)</h4>
                      <div className="text-xs space-y-1 max-h-48 overflow-y-auto">
                        {job.billOfMaterials.map((item, index) => (
                          <div key={index} className="flex justify-between">
                            <span>{item.name}</span>
                            <span className="text-gray-300">{item.quantity.toLocaleString()}</span>
                          </div>
                        ))}
                      </div>
                    </div>
                  </HoverCardContent>
                </HoverCard>
              )}
              {job.consumedMaterials && job.consumedMaterials.length > 0 && (
                <HoverCard>
                  <HoverCardTrigger asChild>
                    <Button 
                      variant="ghost" 
                      size="sm" 
                      className="p-1 h-6 w-6 relative group"
                      onClick={(e) => {
                        e.preventDefault();
                        copyConsumedMaterials();
                      }}
                    >
                      {copyingConsumed ? (
                        <Check className="w-4 h-4 text-green-400 absolute transition-opacity" />
                      ) : (
                        <Wrench className="w-4 h-4 text-yellow-400" />
                      )}
                      <span className="sr-only">Copy consumed materials</span>
                    </Button>
                  </HoverCardTrigger>
                  <HoverCardContent className="w-80 bg-gray-800 border-gray-600 text-white">
                    <div className="space-y-2">
                      <h4 className="text-sm font-semibold text-yellow-400">Consumed Materials (click to copy)</h4>
                      <div className="text-xs space-y-1 max-h-48 overflow-y-auto">
                        {job.consumedMaterials.map((item, index) => (
                          <div key={index} className="flex justify-between">
                            <span>{item.name}</span>
                            <span className="text-gray-300">{item.quantity.toLocaleString()}</span>
                          </div>
                        ))}
                      </div>
                    </div>
                  </HoverCardContent>
                </HoverCard>
              )}
            </div>
            <p className="text-gray-400">
              Quantity: {job.outputQuantity.toLocaleString()}
              <span className="ml-4">
                Produced: {
                  isEditingProduced && job.status !== 'Closed' ? (
                    <Input
                      type="number"
                      value={producedValue}
                      onChange={(e) => setProducedValue(e.target.value)}
                      onBlur={handleProducedUpdate}
                      onKeyDown={handleProducedKeyPress}
                      className="w-24 h-6 px-2 py-1 inline-block bg-gray-800 border-gray-600 text-white"
                      min="0"
                      autoFocus
                    />
                  ) : (
                    <span 
                      onClick={() => job.status !== 'Closed' && setIsEditingProduced(true)}
                      className={job.status !== 'Closed' ? "cursor-pointer hover:text-blue-400" : undefined}
                      title={job.status !== 'Closed' ? "Click to edit" : undefined}
                    >
                      {(job.produced || 0).toLocaleString()}
                    </span>
                  )
                }
              </span>
              <span className="ml-4">
                Sold: <span className="text-green-400">{itemsSold.toLocaleString()}</span>
              </span>
            </p>
          </div>
          <div className="flex gap-2">
            <Button
              variant="outline"
              size="sm"
              onClick={() => onEdit(job)}
              className="border-gray-600 hover:bg-gray-800"
            >
              Edit
            </Button>
            <Button
              variant="destructive"
              size="sm"
              onClick={() => onDelete(job.id)}
            >
              Delete
            </Button>
          </div>
        </div>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="grid grid-cols-1 gap-2">
          <div className="flex items-center gap-2 text-sm text-gray-400">
            <Calendar className="w-4 h-4" />
            Created: {formatDateTime(job.created)}
          </div>
          <div className="flex items-center gap-2 text-sm text-gray-400">
            <Clock className="w-4 h-4" />
            Start: {formatDateTime(job.jobStart)}
          </div>
          <div className="flex items-center gap-2 text-sm text-gray-400">
            <Factory className="w-4 h-4" />
            Job ID: {job.id}
          </div>
        </div>

        {job.saleStart && (
          <div className="space-y-2">
            <div className="text-sm text-gray-400">
              Sale Period: {formatDateTime(job.saleStart)} - {formatDateTime(job.saleEnd)}
            </div>
            {itemsPerDay > 0 && (
              <div className="text-sm text-gray-400">
                Items/Day: {itemsPerDay.toFixed(2)}
              </div>
            )}
          </div>
        )}

        <div className="grid grid-cols-3 gap-4 pt-4 border-t border-gray-700">
          <div className="text-center">
            <div className="flex items-center justify-center gap-1 text-red-400">
              <TrendingDown className="w-4 h-4" />
              <span className="text-sm">Expenditure</span>
            </div>
            <div className="font-semibold">{formatISK(totalExpenditure)}</div>
            {job.projectedCost > 0 && (
              <div className="text-xs text-gray-400">
                vs Projected: {formatISK(job.projectedCost)}
                <Badge 
                  variant={totalExpenditure <= job.projectedCost ? 'default' : 'destructive'} 
                  className="ml-1 text-xs"
                >
                  {((totalExpenditure / job.projectedCost) * 100).toFixed(1)}%
                </Badge>
              </div>
            )}
          </div>
          <div className="text-center">
            <div className="flex items-center justify-center gap-1 text-green-400">
              <TrendingUp className="w-4 h-4" />
              <span className="text-sm">Income</span>
            </div>
            <div className="font-semibold">{formatISK(totalIncome)}</div>
            {job.projectedRevenue > 0 && (
              <div className="text-xs text-gray-400">
                vs Projected: {formatISK(job.projectedRevenue)}
                <Badge 
                  variant={totalIncome >= job.projectedRevenue ? 'default' : 'destructive'} 
                  className="ml-1 text-xs"
                >
                  {((totalIncome / job.projectedRevenue) * 100).toFixed(1)}%
                </Badge>
              </div>
            )}
          </div>
          <div className="text-center">
            <div className="flex items-center justify-center gap-1 text-gray-400">
              <span className="text-sm">Profit</span>
            </div>
            <div className={`font-semibold ${profit >= 0 ? 'text-green-400' : 'text-red-400'}`}>
              {formatISK(profit)}
              <Badge variant={profit >= 0 ? 'default' : 'destructive'} className="ml-1 text-xs">
                {margin.toFixed(1)}%
              </Badge>
            </div>
            {job.projectedRevenue > 0 && job.projectedCost > 0 && (
              <div className="text-xs text-gray-400">
                vs Projected: {formatISK(job.projectedRevenue - job.projectedCost)}
                <Badge 
                  variant={profit >= (job.projectedRevenue - job.projectedCost) ? 'default' : 'destructive'} 
                  className="ml-1 text-xs"
                >
                  {((profit / (job.projectedRevenue - job.projectedCost)) * 100).toFixed(1)}%
                </Badge>
              </div>
            )}
          </div>
        </div>
      </CardContent>
    </Card>
  );
};

export default JobCard;