'use client';

import { useQuery } from '@tanstack/react-query';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Skeleton } from '@/components/ui/skeleton';
import { MapPin, Plus, ChevronRight } from 'lucide-react';
import { api } from '@/lib/api';

interface Zone {
  id: string;
  name: string;
}
interface Area {
  id: string;
  name: string;
  description?: string;
  zones?: Zone[];
}

export default function AreasPage() {
  const { data, isLoading } = useQuery({
    queryKey: ['areas'],
    queryFn: async () => (await api.get('/api/v1/areas')).data,
  });

  const areas: Area[] = Array.isArray(data) ? data : (data?.data ?? []);

  return (
    <div>
      <div className="mb-6 flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-slate-800">Areas & Zones</h1>
          <p className="text-slate-500 text-sm mt-1">Service area and coverage zones</p>
        </div>
        <div className="flex gap-2">
          <Button variant="outline" size="sm">
            <Plus size={14} className="mr-1.5" />Add Zone
          </Button>
          <Button style={{ backgroundColor: '#0891B2', color: 'white' }} size="sm">
            <Plus size={14} className="mr-1.5" />Add Area
          </Button>
        </div>
      </div>

      {isLoading ? (
        <div className="space-y-3">
          {Array.from({ length: 3 }).map((_, i) => (
            <Skeleton key={i} className="h-20 w-full rounded-xl" />
          ))}
        </div>
      ) : areas.length === 0 ? (
        <div className="text-center py-16 text-slate-400">
          <MapPin size={40} className="mx-auto mb-3 opacity-30" />
          <p>No service areas yet</p>
        </div>
      ) : (
        <div className="space-y-3">
          {areas.map((area) => (
            <Card key={area.id} className="hover:border-cyan-200 transition-colors">
              <CardContent className="p-4">
                <div className="flex items-start justify-between">
                  <div className="flex items-start gap-3">
                    <div className="w-8 h-8 rounded-lg bg-cyan-50 flex items-center justify-center mt-0.5">
                      <MapPin size={16} className="text-cyan-600" />
                    </div>
                    <div>
                      <p className="font-semibold text-slate-800">{area.name}</p>
                      {area.description && <p className="text-sm text-slate-500 mt-0.5">{area.description}</p>}
                      {area.zones && area.zones.length > 0 && (
                        <div className="mt-2 flex gap-1.5 flex-wrap">
                          {area.zones.map(z => (
                            <span key={z.id} className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-100 text-slate-600">
                              {z.name}
                            </span>
                          ))}
                        </div>
                      )}
                    </div>
                  </div>
                  <div className="flex items-center gap-2">
                    <span className="text-xs text-slate-400">{area.zones?.length ?? 0} zone{(area.zones?.length ?? 0) !== 1 ? 's' : ''}</span>
                    <ChevronRight size={16} className="text-slate-300" />
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      )}
    </div>
  );
}