'use client';

import {
  Calendar,
  Clock,
  CornerDownLeft,
  CornerDownRight,
  FlaskConical,
  Folder,
  Hash,
  MapPin,
} from 'lucide-react';
import useTranslation from '@/hooks/useTranslation';
import { Card, CardContent, CardHeader } from '@/components/ui/card';

interface RequestCardProps {
  requestNumber: string;
  submitTime: string;
  projectName: string;
  sampleCategory: string;
  sampleSubCategories: string[];
  sampleLocation: string;
  dateTime: string;
  isUrgent?: boolean;
}

export default function RequestsUnderReviewCard({
  requestNumber,
  submitTime,
  projectName,
  sampleCategory,
  sampleSubCategories,
  sampleLocation,
  dateTime,
  isUrgent,
}: RequestCardProps) {
  const { i18n, t } = useTranslation();

  const isArabic = i18n.language === 'ar';
  return (
    <Card className="hover:shadow-lg transition-all duration-300 border border-border bg-card/60 backdrop-blur-sm relative overflow-hidden">
      {isUrgent && (
        <div className="absolute top-0 right-0 left-0 h-1 bg-destructive animate-pulse" />
      )}
      {/* Header */}
      <CardHeader className="flex flex-row items-center justify-between py-4 space-y-0">
        <div className="flex items-center gap-2 text-lg font-semibold text-foreground">
          <Hash size={18} className="text-primary" />
          {t('requests.request_number')} {requestNumber}
        </div>
        <div className="flex items-center text-sm text-muted-foreground gap-1">
          <Clock size={14} />
          {submitTime}
        </div>
      </CardHeader>

      {/* Content */}
      <CardContent className="grid gap-4 text-sm text-foreground/90">
        {/* Project Name */}
        <div className="flex items-start gap-3">
          <div className="mt-1 p-1.5 rounded-md bg-primary/10">
            <Folder size={16} className="text-primary" />
          </div>
          <div>
            <p className="text-muted-foreground text-xs font-semibold uppercase tracking-wider mb-0.5">
              {t('requests.labels.project_name')}
            </p>
            <p className="font-medium">{projectName}</p>
          </div>
        </div>

        {/* Category + Sub Category  */}
        <div className="flex items-start gap-3">
          <div className="mt-1 p-1.5 rounded-md bg-primary/10">
            <FlaskConical size={16} className="text-primary" />
          </div>
          <div>
            <p className="text-muted-foreground text-xs font-semibold uppercase tracking-wider mb-0.5">
              {t('requests.labels.sample_category')}
            </p>
            <div className="space-y-2">
              <p className="font-medium text-base leading-tight">
                {sampleCategory}
              </p>
              {sampleSubCategories && sampleSubCategories.length > 0 && (
                <div className="flex flex-col gap-1.5 mt-2">
                  {sampleSubCategories.map((sub, idx) => (
                    <div
                      key={idx}
                      className="flex items-center text-sm text-foreground/80 gap-2 group"
                    >
                      {isArabic ? (
                        <CornerDownLeft
                          size={14}
                          className="text-primary/60 shrink-0"
                        />
                      ) : (
                        <CornerDownRight
                          size={14}
                          className="text-primary/60 shrink-0"
                        />
                      )}
                      <span className="font-medium bg-secondary/30 px-2 py-0.5 rounded-md border border-border/50">
                        {sub}
                      </span>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>
        </div>

        {/* Sample Location */}
        <div className="flex items-start gap-3">
          <div className="mt-1 p-1.5 rounded-md bg-primary/10">
            <MapPin size={16} className="text-primary" />
          </div>
          <div>
            <p className="text-muted-foreground text-xs font-semibold uppercase tracking-wider mb-0.5">
              {t('requests.labels.sample_location')}
            </p>
            <p className="font-medium">{sampleLocation}</p>
          </div>
        </div>

        {/* Sample Date & Time */}
        <div className="flex items-start gap-3">
          <div className="mt-1 p-1.5 rounded-md bg-primary/10">
            <Calendar size={16} className="text-primary" />
          </div>
          <div>
            <p className="text-muted-foreground text-xs font-semibold uppercase tracking-wider mb-0.5">
              {t('requests.labels.date_&_time')}
            </p>
            <p className="font-medium">{dateTime}</p>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}