import { getCurrentUser } from "@/lib/auth"
import { getJobsByPlumberId, getPlumberEarnings } from "@/lib/plumber-jobs"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { DollarSign, TrendingUp, Calendar, CheckCircle, Star } from "lucide-react"

export default async function PlumberEarningsPage() {
  const user = await getCurrentUser()
  const jobs = user ? getJobsByPlumberId(user.id) : []
  const earnings = user ? getPlumberEarnings(user.id) : null

  const completedJobs = jobs.filter((job) => job.status === "completed")
  const thisMonthJobs = completedJobs.filter((job) => {
    const jobDate = new Date(job.completedAt || job.createdAt)
    const now = new Date()
    return jobDate.getMonth() === now.getMonth() && jobDate.getFullYear() === now.getFullYear()
  })

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold text-[var(--dark-color)]">تقرير الأرباح</h1>
        <p className="text-[var(--parg-color)]">تتبع أرباحك ومهامك المكتملة</p>
      </div>

      {/* Earnings Overview */}
      {earnings && (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          <Card className="border-[var(--border-color)]">
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-[var(--parg-color)] mb-1">الأرباح الإجمالية</p>
                  <p className="text-2xl font-bold text-[var(--dark-color)]">{earnings.totalEarnings} جنيه</p>
                </div>
                <div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
                  <DollarSign className="w-6 h-6 text-green-600" />
                </div>
              </div>
            </CardContent>
          </Card>

          <Card className="border-[var(--border-color)]">
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-[var(--parg-color)] mb-1">أرباح هذا الشهر</p>
                  <p className="text-2xl font-bold text-[var(--dark-color)]">{earnings.monthlyEarnings} جنيه</p>
                </div>
                <div className="w-12 h-12 bg-[var(--name-item)]/10 rounded-full flex items-center justify-center">
                  <TrendingUp className="w-6 h-6 text-[var(--name-item)]" />
                </div>
              </div>
            </CardContent>
          </Card>

          <Card className="border-[var(--border-color)]">
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-[var(--parg-color)] mb-1">المهام المكتملة</p>
                  <p className="text-2xl font-bold text-[var(--dark-color)]">{earnings.completedJobs}</p>
                </div>
                <div className="w-12 h-12 bg-[var(--main-color)]/10 rounded-full flex items-center justify-center">
                  <CheckCircle className="w-6 h-6 text-[var(--main-color)]" />
                </div>
              </div>
            </CardContent>
          </Card>

          <Card className="border-[var(--border-color)]">
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-[var(--parg-color)] mb-1">متوسط التقييم</p>
                  <p className="text-2xl font-bold text-[var(--dark-color)]">{earnings.averageRating.toFixed(1)}</p>
                  <p className="text-xs text-[var(--p-color)]">من {earnings.totalReviews} تقييم</p>
                </div>
                <div className="w-12 h-12 bg-[var(--main-color)]/10 rounded-full flex items-center justify-center">
                  <Star className="w-6 h-6 text-[var(--main-color)]" />
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      )}

      {/* Recent Completed Jobs */}
      <Card className="border-[var(--border-color)]">
        <CardHeader>
          <CardTitle className="text-[var(--dark-color)]">المهام المكتملة مؤخراً</CardTitle>
        </CardHeader>
        <CardContent>
          {completedJobs.length > 0 ? (
            <div className="space-y-4">
              {completedJobs.map((job) => (
                <div
                  key={job.id}
                  className="flex items-center justify-between p-4 border border-[var(--border-color)] rounded-lg"
                >
                  <div className="flex items-center gap-4">
                    <div className="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
                      <CheckCircle className="w-5 h-5 text-green-600" />
                    </div>

                    <div>
                      <h4 className="font-medium text-[var(--dark-color)]">{job.serviceName}</h4>
                      <p className="text-sm text-[var(--parg-color)]">العميل: {job.customerName}</p>
                      <div className="flex items-center gap-2 mt-1">
                        <Calendar className="w-3 h-3 text-[var(--p-color)]" />
                        <span className="text-xs text-[var(--p-color)]">
                          {new Date(job.completedAt || job.createdAt).toLocaleDateString("ar-EG")}
                        </span>
                      </div>
                    </div>
                  </div>

                  <div className="text-left">
                    <p className="text-lg font-bold text-green-600">{job.actualPrice || job.estimatedPrice} جنيه</p>
                    {job.customerRating && (
                      <div className="flex items-center gap-1 mt-1">
                        <Star className="w-3 h-3 fill-[var(--main-color)] text-[var(--main-color)]" />
                        <span className="text-sm text-[var(--dark-color)]">{job.customerRating}</span>
                      </div>
                    )}
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <div className="text-center py-8">
              <CheckCircle className="w-12 h-12 mx-auto text-[var(--parg-color)] mb-4" />
              <p className="text-[var(--parg-color)]">لا توجد مهام مكتملة بعد</p>
            </div>
          )}
        </CardContent>
      </Card>

      {/* Monthly Summary */}
      <Card className="border-[var(--border-color)]">
        <CardHeader>
          <CardTitle className="text-[var(--dark-color)]">ملخص هذا الشهر</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="text-center p-4 bg-[var(--bg-color)] rounded-lg">
              <p className="text-2xl font-bold text-[var(--name-item)] mb-1">{thisMonthJobs.length}</p>
              <p className="text-sm text-[var(--parg-color)]">مهام مكتملة</p>
            </div>

            <div className="text-center p-4 bg-[var(--bg-color)] rounded-lg">
              <p className="text-2xl font-bold text-green-600 mb-1">
                {thisMonthJobs.reduce((sum, job) => sum + (job.actualPrice || job.estimatedPrice), 0)} جنيه
              </p>
              <p className="text-sm text-[var(--parg-color)]">أرباح الشهر</p>
            </div>

            <div className="text-center p-4 bg-[var(--bg-color)] rounded-lg">
              <p className="text-2xl font-bold text-[var(--main-color)] mb-1">
                {thisMonthJobs.length > 0
                  ? (
                      thisMonthJobs.reduce((sum, job) => sum + (job.actualPrice || job.estimatedPrice), 0) /
                      thisMonthJobs.length
                    ).toFixed(0)
                  : 0}{" "}
                جنيه
              </p>
              <p className="text-sm text-[var(--parg-color)]">متوسط المهمة</p>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}