'use client';

import { useParams, useRouter } from 'next/navigation';
import { ArrowLeft, User, Mail, Phone, Building2, Globe, Calendar, CheckCircle, XCircle, Clock } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Separator } from '@/components/ui/separator';
import { useGetSallaClientDetails } from '../hooks/useGetSallaClientDetails';

const SallaClientsDetails = () => {
  const params = useParams();
  const router = useRouter();
  const id = params?.id as string;

  const { data, isLoading, isError } = useGetSallaClientDetails(id);

  const client = data?.data;

  const getStatusIcon = (status: string) => {
    switch (status) {
      case 'confirmed':
        return <CheckCircle className="size-5 text-green-600" />;
      case 'rejected':
        return <XCircle className="size-5 text-red-600" />;
      case 'pending':
        return <Clock className="size-5 text-yellow-600" />;
      default:
        return null;
    }
  };

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'confirmed':
        return 'success';
      case 'rejected':
        return 'destructive';
      case 'pending':
        return 'warning';
      default:
        return 'secondary';
    }
  };

  const formatDate = (dateString: string | null) => {
    if (!dateString) return 'N/A';
    return new Date(dateString).toLocaleDateString('en-US', {
      year: 'numeric',
      month: 'long',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit',
    });
  };

  if (isLoading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="text-muted-foreground">Loading client details...</div>
      </div>
    );
  }

  if (isError || !client) {
    return (
      <div className="flex flex-col items-center justify-center min-h-screen gap-4">
        <div className="text-destructive">Failed to load client details</div>
        <Button onClick={() => router.back()}>Go Back</Button>
      </div>
    );
  }

  return (
    <div className="container mx-auto py-8 space-y-6">
      <div className="flex items-center gap-4">
        <Button variant="ghost" size="sm" mode="icon" onClick={() => router.back()}>
          <ArrowLeft className="size-5" />
        </Button>
        <h1 className="text-3xl font-bold">Client Details</h1>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div className="lg:col-span-2 space-y-6">
          <Card>
            <CardHeader>
              <CardTitle className="w-full flex items-center justify-between">
                <span>Personal Information</span>
                <div className="flex items-center gap-2">
                  {getStatusIcon(client.status)}
                  <Badge variant={getStatusColor(client.status)} size="lg">
                    {client.status.toUpperCase()}
                  </Badge>
                </div>
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
                    <User className="size-4" />
                    <span>Name</span>
                  </div>
                  <p className="font-medium">{client.name}</p>
                </div>

                <div className="space-y-2">
                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
                    <Mail className="size-4" />
                    <span>Email</span>
                  </div>
                  <p className="font-medium">{client.email}</p>
                </div>

                <div className="space-y-2">
                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
                    <Phone className="size-4" />
                    <span>Mobile</span>
                  </div>
                  <p className="font-medium">{client.mobile}</p>
                </div>

                <div className="space-y-2">
                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
                    <User className="size-4" />
                    <span>Role</span>
                  </div>
                  <p className="font-medium capitalize">{client.role}</p>
                </div>

                <div className="space-y-2">
                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
                    <span>Salla User ID</span>
                  </div>
                  <p className="font-medium">{client.salla_user_id}</p>
                </div>

                {client.user_id && (
                  <div className="space-y-2">
                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
                      <span>System User ID</span>
                    </div>
                    <p className="font-medium">{client.user_id}</p>
                  </div>
                )}
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Merchant Information</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center gap-4 mb-4">
                <img
                  src={client.merchant.avatar}
                  alt={client.merchant.name}
                  className="size-16 rounded-full object-cover"
                />
                <div>
                  <h3 className="text-xl font-semibold">{client.merchant.name}</h3>
                  <p className="text-sm text-muted-foreground">@{client.merchant.username}</p>
                </div>
              </div>

              <Separator />

              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
                    <Building2 className="size-4" />
                    <span>Merchant ID</span>
                  </div>
                  <p className="font-medium">{client.merchant.id}</p>
                </div>

                <div className="space-y-2">
                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
                    <Globe className="size-4" />
                    <span>Domain</span>
                  </div>
                  <a
                    href={client.merchant.domain}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="font-medium text-primary hover:underline"
                  >
                    {client.merchant.domain}
                  </a>
                </div>

                <div className="space-y-2">
                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
                    <span>Plan</span>
                  </div>
                  <Badge variant="secondary" appearance="outline" className="w-fit">
                    {client.merchant.plan.toUpperCase()}
                  </Badge>
                </div>

                <div className="space-y-2">
                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
                    <span>Status</span>
                  </div>
                  <Badge variant={client.merchant.status === 'active' ? 'success' : 'secondary'} className="w-fit">
                    {client.merchant.status.toUpperCase()}
                  </Badge>
                </div>

                {client.merchant.tax_number && (
                  <div className="space-y-2">
                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
                      <span>Tax Number</span>
                    </div>
                    <p className="font-medium">{client.merchant.tax_number}</p>
                  </div>
                )}

                {client.merchant.commercial_number && (
                  <div className="space-y-2">
                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
                      <span>Commercial Number</span>
                    </div>
                    <p className="font-medium">{client.merchant.commercial_number}</p>
                  </div>
                )}

                {client.merchant.store_location && (
                  <div className="space-y-2 col-span-2">
                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
                      <span>Store Location</span>
                    </div>
                    <p className="font-medium">{client.merchant.store_location}</p>
                  </div>
                )}
              </div>
            </CardContent>
          </Card>
        </div>

        <div className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Timeline</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                  <Calendar className="size-4" />
                  <span>Created At</span>
                </div>
                <p className="font-medium">{formatDate(client.created_at)}</p>
              </div>

              <Separator />

              <div className="space-y-2">
                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                  <Calendar className="size-4" />
                  <span>Updated At</span>
                </div>
                <p className="font-medium">{formatDate(client.updated_at)}</p>
              </div>

              <Separator />

              <div className="space-y-2">
                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                  <Calendar className="size-4" />
                  <span>Salla Created At</span>
                </div>
                <p className="font-medium">{formatDate(client.salla_created_at)}</p>
              </div>

              {client.confirmed_at && (
                <>
                  <Separator />
                  <div className="space-y-2">
                    <div className="flex items-center gap-2 text-sm text-green-600">
                      <CheckCircle className="size-4" />
                      <span>Confirmed At</span>
                    </div>
                    <p className="font-medium">{formatDate(client.confirmed_at)}</p>
                  </div>
                </>
              )}

              {client.rejected_at && (
                <>
                  <Separator />
                  <div className="space-y-2">
                    <div className="flex items-center gap-2 text-sm text-red-600">
                      <XCircle className="size-4" />
                      <span>Rejected At</span>
                    </div>
                    <p className="font-medium">{formatDate(client.rejected_at)}</p>
                  </div>
                </>
              )}

              <Separator />

              <div className="space-y-2">
                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                  <Calendar className="size-4" />
                  <span>Merchant Created At</span>
                </div>
                <p className="font-medium">{formatDate(client.merchant.created_at)}</p>
              </div>
            </CardContent>
          </Card>

          {client.rejection_reason && (
            <Card className="border-red-200">
              <CardHeader>
                <CardTitle className="text-red-600 flex items-center gap-2">
                  <XCircle className="size-5" />
                  Rejection Reason
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-sm">{client.rejection_reason}</p>
              </CardContent>
            </Card>
          )}
        </div>
      </div>
    </div>
  );
};

export default SallaClientsDetails;