"use client";

import formatPhone from "@/shared/lib/formatPhone";
import formatPrice from "@/shared/lib/formatPrice";
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/ui/card";
import { DollarSign, Mail, Phone, Star, Ticket } from "lucide-react";
import { useTranslation } from "react-i18next";

export interface UserAgencyDetailData {
  id: number;
  name: string;
  custom_id: string;
  share_percentage: number;
  addres: string;
  email: string;
  phone: string;
  web_site: string;
  paid: number;
  pending: number;
  ticket_sold_count: number;
  ticket_count: string;
  total_income: number;
  platform_income: number;
  total_booking_count: string;
  rating: string;
  orders: {
    id: number;
    user: {
      id: number;
      first_name: string;
      last_name: string;
      contact: string;
    };
    total_price: number;
    departure_date: string;
    arrival_time: string;
    created_at: string;
  }[];
  comments: {
    user: {
      id: number;
      first_name: string;
      last_name: string;
      contact: string;
    };
    text: string;
    rating: number;
    ticket: number;
    created: string;
  }[];
}

export function AgencyCard({ agency }: { agency: UserAgencyDetailData }) {
  const { t } = useTranslation();
  return (
    <Card className="border border-gray-700 bg-gray-900 text-white shadow-lg">
      {/* HEADER */}
      <CardHeader>
        <CardTitle className="text-xl font-semibold">{agency.name}</CardTitle>
        <p className="text-gray-400 text-sm">
          {t("Agentlik ID")}: {agency.custom_id}
        </p>
      </CardHeader>

      {/* CONTENT */}
      <CardContent className="space-y-4">
        {/* Contact info */}
        <div className="grid grid-cols-2 gap-4">
          <div>
            <p className="text-xs text-gray-400">Email</p>
            <div className="flex items-center gap-2">
              <Mail className="w-4 h-4 text-blue-400" />
              <p>{agency.email || "—"}</p>
            </div>
          </div>

          <div>
            <p className="text-xs text-gray-400">{t("Telefon")}</p>
            <div className="flex items-center gap-2">
              <Phone className="w-4 h-4 text-green-400" />
              <p>{formatPhone(agency.phone) || "—"}</p>
            </div>
          </div>

          <div>
            <p className="text-xs text-gray-400">{t("Veb-sayt")}</p>
            <p>{agency.web_site || "—"}</p>
          </div>

          <div>
            <p className="text-xs text-gray-400">{t("Manzil")}</p>
            <p>{agency.addres || "—"}</p>
          </div>
        </div>

        {/* Financial data */}
        <div className="border-t border-gray-700 pt-3 space-y-2">
          <div className="flex items-center gap-2">
            <DollarSign className="w-5 h-5 text-yellow-400" />
            <p>
              <strong>{t("Jami daromad")}:</strong>{" "}
              {formatPrice(agency.total_income, true)}
            </p>
          </div>

          <p>
            <strong>{t("To'langan")}:</strong> {formatPrice(agency.paid, true)}
          </p>

          <p>
            <strong>{t("Kutilayotgan to‘lovlar")}:</strong>{" "}
            {formatPrice(agency.pending)}
          </p>

          <p>
            <strong>{t("Platformaga tegishli")}:</strong>{" "}
            {formatPrice(agency.platform_income, true)}
          </p>
        </div>

        {/* Stats */}
        <div className="border-t border-gray-700 pt-3 space-y-2">
          <div className="flex items-center gap-2">
            <Ticket className="w-5 h-5 text-blue-400" />
            <p>
              <strong>{t("Sotilgan turlar soni")}:</strong>{" "}
              {agency.ticket_sold_count}
            </p>
          </div>

          <div className="flex items-center gap-2">
            <Star className="w-5 h-5 text-yellow-500" />
            <p>
              <strong>{t("Reyting")}:</strong> {agency.rating || "—"}
            </p>
          </div>

          <p>
            <strong>{t("Bookings")}:</strong> {agency.total_booking_count}
          </p>
        </div>
      </CardContent>
    </Card>
  );
}
