"use client"

import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Calendar, Clock, MapPin, Phone, User, CheckCircle, XCircle, Play, Star } from "lucide-react"
import type { PlumberJob } from "@/lib/plumber-jobs"
import { getJobStatusColor, getJobStatusText, getUrgencyColor, getUrgencyText } from "@/lib/plumber-jobs"

interface JobCardProps {
  job: PlumberJob
  onAccept?: (jobId: string) => void
  onReject?: (jobId: string) => void
  onStart?: (jobId: string) => void
  onComplete?: (jobId: string) => void
}

export default function JobCard({ job, onAccept, onReject, onStart, onComplete }: JobCardProps) {
  return (
    <Card className="border-[var(--border-color)] hover:shadow-md transition-shadow">
      <CardHeader className="pb-3">
        <div className="flex items-start justify-between">
          <div>
            <h3 className="font-semibold text-[var(--dark-color)] mb-1">{job.serviceName}</h3>
            <p className="text-sm text-[var(--parg-color)]">رقم المهمة: {job.id}</p>
          </div>
          <div className="flex items-center gap-2">
            <Badge className={getJobStatusColor(job.status)}>{getJobStatusText(job.status)}</Badge>
            <Badge variant="outline" className={getUrgencyColor(job.urgency)}>
              {getUrgencyText(job.urgency)}
            </Badge>
          </div>
        </div>
      </CardHeader>

      <CardContent className="space-y-4">
        {/* Customer Info */}
        <div className="flex items-center gap-2 text-sm">
          <User className="w-4 h-4 text-[var(--parg-color)]" />
          <span className="text-[var(--dark-color)]">{job.customerName}</span>
          <Phone className="w-4 h-4 text-[var(--parg-color)] mr-4" />
          <span className="text-[var(--dark-color)]">{job.customerPhone}</span>
        </div>

        {/* Schedule */}
        <div className="flex items-center gap-2 text-sm">
          <Calendar className="w-4 h-4 text-[var(--parg-color)]" />
          <span className="text-[var(--dark-color)]">{job.scheduledDate}</span>
          <Clock className="w-4 h-4 text-[var(--parg-color)] mr-4" />
          <span className="text-[var(--dark-color)]">{job.scheduledTime}</span>
        </div>

        {/* Location */}
        <div className="flex items-start gap-2 text-sm">
          <MapPin className="w-4 h-4 text-[var(--parg-color)] mt-0.5" />
          <span className="text-[var(--dark-color)]">{job.address}</span>
        </div>

        {/* Description */}
        <div className="bg-[var(--bg-color)] p-3 rounded-lg">
          <p className="text-sm text-[var(--dark-color)]">{job.description}</p>
        </div>

        {/* Price */}
        <div className="flex items-center justify-between">
          <span className="text-lg font-bold text-[var(--name-item)]">
            {job.actualPrice || job.estimatedPrice} جنيه
          </span>

          {job.customerRating && (
            <div className="flex items-center gap-1">
              <Star className="w-4 h-4 fill-[var(--main-color)] text-[var(--main-color)]" />
              <span className="text-sm font-medium text-[var(--dark-color)]">{job.customerRating}</span>
            </div>
          )}
        </div>

        {/* Action Buttons */}
        <div className="flex gap-2 pt-2">
          {job.status === "pending" && (
            <>
              <Button
                onClick={() => onAccept?.(job.id)}
                className="flex-1 bg-[var(--name-item)] hover:bg-[var(--name-item)]/90 text-white"
              >
                <CheckCircle className="w-4 h-4 ml-2" />
                قبول
              </Button>
              <Button
                onClick={() => onReject?.(job.id)}
                variant="outline"
                className="flex-1 border-[var(--dark-red)] text-[var(--dark-red)] hover:bg-red-50 bg-transparent"
              >
                <XCircle className="w-4 h-4 ml-2" />
                رفض
              </Button>
            </>
          )}

          {job.status === "accepted" && (
            <Button
              onClick={() => onStart?.(job.id)}
              className="w-full bg-[var(--main-color)] hover:bg-[var(--main-color)]/90 text-[var(--dark-color)]"
            >
              <Play className="w-4 h-4 ml-2" />
              بدء العمل
            </Button>
          )}

          {job.status === "in-progress" && (
            <Button onClick={() => onComplete?.(job.id)} className="w-full bg-green-600 hover:bg-green-700 text-white">
              <CheckCircle className="w-4 h-4 ml-2" />
              إنهاء المهمة
            </Button>
          )}

          {job.status === "completed" && job.customerReview && (
            <div className="w-full p-3 bg-green-50 border border-green-200 rounded-lg">
              <p className="text-sm text-green-800 font-medium mb-1">تقييم العميل:</p>
              <p className="text-sm text-green-700">"{job.customerReview}"</p>
            </div>
          )}
        </div>
      </CardContent>
    </Card>
  )
}