import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { supabase } from '@/integrations/supabase/client';
import { useAuth } from '@/hooks/useAuth';
import { AppLayout } from '@/components/AppLayout';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { Skeleton } from '@/components/ui/skeleton';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { toast } from '@/hooks/use-toast';
import { formatIDR } from '@/lib/format';
import { Video, Calendar, Clock, User, Link as LinkIcon, ExternalLink, CheckCircle, XCircle, Loader2 } from 'lucide-react';
import { format, parseISO, isToday, isTomorrow, isPast } from 'date-fns';
import { id } from 'date-fns/locale';

interface ConsultingSlot {
  id: string;
  user_id: string;
  order_id: string;
  date: string;
  start_time: string;
  end_time: string;
  status: string;
  topic_category: string;
  notes: string;
  meet_link: string | null;
  created_at: string;
  profiles?: {
    name: string;
    email: string;
  };
}

interface PlatformSettings {
  integration_n8n_base_url?: string;
  integration_google_calendar_id?: string;
}

const statusLabels: Record<string, { label: string; variant: 'default' | 'secondary' | 'destructive' | 'outline' }> = {
  pending_payment: { label: 'Menunggu Pembayaran', variant: 'secondary' },
  confirmed: { label: 'Dikonfirmasi', variant: 'default' },
  completed: { label: 'Selesai', variant: 'outline' },
  cancelled: { label: 'Dibatalkan', variant: 'destructive' },
};

export default function AdminConsulting() {
  const { user, isAdmin, loading: authLoading } = useAuth();
  const navigate = useNavigate();

  const [slots, setSlots] = useState<ConsultingSlot[]>([]);
  const [settings, setSettings] = useState<PlatformSettings>({});
  const [loading, setLoading] = useState(true);
  const [selectedSlot, setSelectedSlot] = useState<ConsultingSlot | null>(null);
  const [meetLink, setMeetLink] = useState('');
  const [dialogOpen, setDialogOpen] = useState(false);
  const [saving, setSaving] = useState(false);
  const [creatingMeet, setCreatingMeet] = useState(false);
  const [activeTab, setActiveTab] = useState('upcoming');

  useEffect(() => {
    if (!authLoading) {
      if (!user) navigate('/auth');
      else if (!isAdmin) navigate('/dashboard');
      else {
        fetchSlots();
        fetchSettings();
      }
    }
  }, [user, isAdmin, authLoading]);

  const fetchSlots = async () => {
    const { data, error } = await supabase
      .from('consulting_slots')
      .select(`
        *,
        profiles:user_id (name, email)
      `)
      .order('date', { ascending: false })
      .order('start_time', { ascending: true });

    if (!error && data) setSlots(data);
    setLoading(false);
  };

  const fetchSettings = async () => {
    const { data } = await supabase
      .from('platform_settings')
      .select('integration_n8n_base_url, integration_google_calendar_id')
      .single();
    
    if (data) setSettings(data);
  };

  const openMeetDialog = (slot: ConsultingSlot) => {
    setSelectedSlot(slot);
    setMeetLink(slot.meet_link || '');
    setDialogOpen(true);
  };

  const saveMeetLink = async () => {
    if (!selectedSlot) return;
    setSaving(true);

    const { error } = await supabase
      .from('consulting_slots')
      .update({ meet_link: meetLink })
      .eq('id', selectedSlot.id);

    if (error) {
      toast({ title: 'Error', description: error.message, variant: 'destructive' });
    } else {
      toast({ title: 'Berhasil', description: 'Link Google Meet disimpan' });
      setDialogOpen(false);
      fetchSlots();

      // Send notification to client with meet link
      if (meetLink && selectedSlot.profiles?.email) {
        try {
          await supabase.functions.invoke('send-notification', {
            body: {
              template_key: 'consulting_scheduled',
              recipient_email: selectedSlot.profiles.email,
              recipient_name: selectedSlot.profiles.name,
              variables: {
                consultation_date: format(parseISO(selectedSlot.date), 'd MMMM yyyy', { locale: id }),
                consultation_time: `${selectedSlot.start_time.substring(0, 5)} - ${selectedSlot.end_time.substring(0, 5)}`,
                meet_link: meetLink,
                topic_category: selectedSlot.topic_category,
              },
            },
          });
        } catch (err) {
          console.log('Notification skipped:', err);
        }
      }
    }
    setSaving(false);
  };

  const createMeetLink = async () => {
    if (!selectedSlot) return;
    
    // Check if n8n webhook is configured
    const webhookUrl = settings.integration_n8n_base_url;
    if (!webhookUrl) {
      toast({ 
        title: 'Info', 
        description: 'Webhook URL belum dikonfigurasi di Pengaturan Integrasi. Masukkan link Meet secara manual.',
      });
      return;
    }

    setCreatingMeet(true);
    
    try {
      // Call the webhook to create Google Meet link
      const response = await fetch(`${webhookUrl}/create-meet`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          slot_id: selectedSlot.id,
          date: selectedSlot.date,
          start_time: selectedSlot.start_time,
          end_time: selectedSlot.end_time,
          topic: selectedSlot.topic_category,
          client_name: selectedSlot.profiles?.name || 'Client',
          client_email: selectedSlot.profiles?.email,
          calendar_id: settings.integration_google_calendar_id,
        }),
      });

      if (!response.ok) {
        throw new Error('Webhook request failed');
      }

      const data = await response.json();
      
      if (data.meet_link) {
        setMeetLink(data.meet_link);
        toast({ title: 'Berhasil', description: 'Link Google Meet dibuat' });
      } else {
        throw new Error('No meet_link in response');
      }
    } catch (error) {
      console.error('Error creating meet link:', error);
      toast({ 
        title: 'Gagal', 
        description: 'Gagal membuat link Meet. Pastikan webhook sudah dikonfigurasi dengan benar.',
        variant: 'destructive',
      });
    } finally {
      setCreatingMeet(false);
    }
  };

  const updateSlotStatus = async (slotId: string, newStatus: string) => {
    const { error } = await supabase
      .from('consulting_slots')
      .update({ status: newStatus })
      .eq('id', slotId);

    if (error) {
      toast({ title: 'Error', description: error.message, variant: 'destructive' });
    } else {
      toast({ title: 'Berhasil', description: `Status diubah ke ${statusLabels[newStatus]?.label || newStatus}` });
      fetchSlots();
    }
  };

  if (authLoading || loading) {
    return (
      <AppLayout>
        <div className="container mx-auto px-4 py-8">
          <Skeleton className="h-10 w-1/3 mb-8" />
          <Skeleton className="h-96 w-full" />
        </div>
      </AppLayout>
    );
  }

  const today = new Date().toISOString().split('T')[0];
  const upcomingSlots = slots.filter(s => s.date >= today && (s.status === 'confirmed' || s.status === 'pending_payment'));
  const pastSlots = slots.filter(s => s.date < today || s.status === 'completed' || s.status === 'cancelled');
  const todaySlots = slots.filter(s => isToday(parseISO(s.date)) && s.status === 'confirmed');

  return (
    <AppLayout>
      <div className="container mx-auto px-4 py-8">
        <h1 className="text-4xl font-bold mb-2 flex items-center gap-3">
          <Video className="w-10 h-10" />
          Manajemen Konsultasi
        </h1>
        <p className="text-muted-foreground mb-8">
          Kelola jadwal dan link Google Meet untuk sesi konsultasi
        </p>

        {/* Today's Sessions Alert */}
        {todaySlots.length > 0 && (
          <Card className="border-2 border-primary bg-primary/5 mb-6">
            <CardContent className="py-4">
              <h3 className="font-bold flex items-center gap-2">
                <Calendar className="w-5 h-5" />
                Sesi Hari Ini ({todaySlots.length})
              </h3>
              <div className="mt-2 space-y-2">
                {todaySlots.map(slot => (
                  <div key={slot.id} className="flex items-center justify-between text-sm">
                    <span>
                      {slot.start_time.substring(0, 5)} - {slot.profiles?.name || 'N/A'} ({slot.topic_category})
                    </span>
                    {slot.meet_link ? (
                      <a href={slot.meet_link} target="_blank" rel="noopener noreferrer" className="text-primary underline flex items-center gap-1">
                        <ExternalLink className="w-3 h-3" /> Join
                      </a>
                    ) : (
                      <Button size="sm" variant="outline" onClick={() => openMeetDialog(slot)}>
                        Tambah Link
                      </Button>
                    )}
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        )}

        {/* Stats */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
          <Card className="border-2 border-border">
            <CardContent className="pt-6">
              <div className="text-2xl font-bold">{todaySlots.length}</div>
              <p className="text-sm text-muted-foreground">Hari Ini</p>
            </CardContent>
          </Card>
          <Card className="border-2 border-border">
            <CardContent className="pt-6">
              <div className="text-2xl font-bold">{upcomingSlots.filter(s => s.status === 'confirmed').length}</div>
              <p className="text-sm text-muted-foreground">Dikonfirmasi</p>
            </CardContent>
          </Card>
          <Card className="border-2 border-border">
            <CardContent className="pt-6">
              <div className="text-2xl font-bold">{upcomingSlots.filter(s => !s.meet_link && s.status === 'confirmed').length}</div>
              <p className="text-sm text-muted-foreground">Perlu Link Meet</p>
            </CardContent>
          </Card>
          <Card className="border-2 border-border">
            <CardContent className="pt-6">
              <div className="text-2xl font-bold">{pastSlots.filter(s => s.status === 'completed').length}</div>
              <p className="text-sm text-muted-foreground">Selesai</p>
            </CardContent>
          </Card>
        </div>

        {/* Tabs */}
        <Tabs value={activeTab} onValueChange={setActiveTab}>
          <TabsList className="mb-4">
            <TabsTrigger value="upcoming">Mendatang ({upcomingSlots.length})</TabsTrigger>
            <TabsTrigger value="past">Riwayat ({pastSlots.length})</TabsTrigger>
          </TabsList>

          <TabsContent value="upcoming">
            <Card className="border-2 border-border">
              <CardContent className="p-0">
                <div className="overflow-x-auto">
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead className="whitespace-nowrap">Tanggal</TableHead>
                        <TableHead className="whitespace-nowrap">Waktu</TableHead>
                        <TableHead className="whitespace-nowrap">Klien</TableHead>
                        <TableHead className="whitespace-nowrap">Kategori</TableHead>
                        <TableHead className="whitespace-nowrap">Status</TableHead>
                        <TableHead className="whitespace-nowrap">Link Meet</TableHead>
                        <TableHead className="text-right whitespace-nowrap">Aksi</TableHead>
                      </TableRow>
                    </TableHeader>
                  <TableBody>
                    {upcomingSlots.map((slot) => (
                      <TableRow key={slot.id}>
                        <TableCell className="font-medium">
                          <div>
                            {format(parseISO(slot.date), 'd MMM yyyy', { locale: id })}
                            {isToday(parseISO(slot.date)) && <Badge className="ml-2 bg-primary">Hari Ini</Badge>}
                            {isTomorrow(parseISO(slot.date)) && <Badge className="ml-2 bg-accent">Besok</Badge>}
                          </div>
                        </TableCell>
                        <TableCell>
                          {slot.start_time.substring(0, 5)} - {slot.end_time.substring(0, 5)}
                        </TableCell>
                        <TableCell>
                          <div>
                            <p className="font-medium">{slot.profiles?.name || '-'}</p>
                            <p className="text-sm text-muted-foreground">{slot.profiles?.email}</p>
                          </div>
                        </TableCell>
                        <TableCell>
                          <Badge variant="outline">{slot.topic_category}</Badge>
                        </TableCell>
                        <TableCell>
                          <Badge variant={statusLabels[slot.status]?.variant || 'secondary'}>
                            {statusLabels[slot.status]?.label || slot.status}
                          </Badge>
                        </TableCell>
                        <TableCell>
                          {slot.meet_link ? (
                            <a
                              href={slot.meet_link}
                              target="_blank"
                              rel="noopener noreferrer"
                              className="text-primary hover:underline flex items-center gap-1"
                            >
                              <ExternalLink className="w-4 h-4" />
                              Buka
                            </a>
                          ) : (
                            <span className="text-muted-foreground">-</span>
                          )}
                        </TableCell>
                        <TableCell className="text-right space-x-2">
                          {slot.status === 'confirmed' && (
                            <>
                              <Button
                                variant="outline"
                                size="sm"
                                onClick={() => openMeetDialog(slot)}
                                className="border-2"
                              >
                                <LinkIcon className="w-4 h-4 mr-1" />
                                {slot.meet_link ? 'Edit' : 'Link'}
                              </Button>
                              <Button
                                variant="outline"
                                size="sm"
                                onClick={() => updateSlotStatus(slot.id, 'completed')}
                                className="border-2 text-green-600"
                              >
                                <CheckCircle className="w-4 h-4" />
                              </Button>
                              <Button
                                variant="outline"
                                size="sm"
                                onClick={() => updateSlotStatus(slot.id, 'cancelled')}
                                className="border-2 text-destructive"
                              >
                                <XCircle className="w-4 h-4" />
                              </Button>
                            </>
                          )}
                        </TableCell>
                      </TableRow>
                    ))}
                    {upcomingSlots.length === 0 && (
                      <TableRow>
                        <TableCell colSpan={7} className="text-center py-8 text-muted-foreground">
                          Tidak ada jadwal mendatang
                        </TableCell>
                      </TableRow>
                    )}
                  </TableBody>
                </Table>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="past">
            <Card className="border-2 border-border">
              <CardContent className="p-0">
                <div className="overflow-x-auto">
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead className="whitespace-nowrap">Tanggal</TableHead>
                        <TableHead className="whitespace-nowrap">Waktu</TableHead>
                        <TableHead className="whitespace-nowrap">Klien</TableHead>
                        <TableHead className="whitespace-nowrap">Kategori</TableHead>
                        <TableHead className="whitespace-nowrap">Status</TableHead>
                      </TableRow>
                    </TableHeader>
                  <TableBody>
                    {pastSlots.slice(0, 20).map((slot) => (
                      <TableRow key={slot.id}>
                        <TableCell>{format(parseISO(slot.date), 'd MMM yyyy', { locale: id })}</TableCell>
                        <TableCell>{slot.start_time.substring(0, 5)} - {slot.end_time.substring(0, 5)}</TableCell>
                        <TableCell>{slot.profiles?.name || '-'}</TableCell>
                        <TableCell><Badge variant="outline">{slot.topic_category}</Badge></TableCell>
                        <TableCell>
                          <Badge variant={statusLabels[slot.status]?.variant || 'secondary'}>
                            {statusLabels[slot.status]?.label || slot.status}
                          </Badge>
                        </TableCell>
                      </TableRow>
                    ))}
                    {pastSlots.length === 0 && (
                      <TableRow>
                        <TableCell colSpan={5} className="text-center py-8 text-muted-foreground">
                          Belum ada riwayat konsultasi
                        </TableCell>
                      </TableRow>
                    )}
                  </TableBody>
                </Table>
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>

        {/* Meet Link Dialog */}
        <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
          <DialogContent className="max-w-md border-2 border-border">
            <DialogHeader>
              <DialogTitle>Link Google Meet</DialogTitle>
              <DialogDescription>
                Tambahkan atau edit link Google Meet untuk sesi ini
              </DialogDescription>
            </DialogHeader>
            <div className="space-y-4 py-4">
              {selectedSlot && (
                <div className="p-3 bg-muted rounded-lg text-sm space-y-1">
                  <p><strong>Tanggal:</strong> {format(parseISO(selectedSlot.date), 'd MMMM yyyy', { locale: id })}</p>
                  <p><strong>Waktu:</strong> {selectedSlot.start_time.substring(0, 5)} - {selectedSlot.end_time.substring(0, 5)}</p>
                  <p><strong>Klien:</strong> {selectedSlot.profiles?.name}</p>
                  <p><strong>Topik:</strong> {selectedSlot.topic_category}</p>
                  {selectedSlot.notes && <p><strong>Catatan:</strong> {selectedSlot.notes}</p>}
                </div>
              )}

              <div className="space-y-2">
                <Input
                  value={meetLink}
                  onChange={(e) => setMeetLink(e.target.value)}
                  placeholder="https://meet.google.com/xxx-xxxx-xxx"
                  className="border-2"
                />
              </div>

              <div className="flex gap-2">
                <Button 
                  onClick={createMeetLink} 
                  variant="outline" 
                  className="flex-1 border-2"
                  disabled={creatingMeet}
                >
                  {creatingMeet ? (
                    <>
                      <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                      Membuat...
                    </>
                  ) : (
                    'Buat Link Meet'
                  )}
                </Button>
                <Button onClick={saveMeetLink} disabled={saving} className="flex-1 shadow-sm">
                  {saving ? 'Menyimpan...' : 'Simpan'}
                </Button>
              </div>
              
              {!settings.integration_n8n_base_url && (
                <p className="text-xs text-muted-foreground text-center">
                  Tip: Konfigurasi webhook di Pengaturan → Integrasi untuk pembuatan otomatis
                </p>
              )}
            </div>
          </DialogContent>
        </Dialog>
      </div>
    </AppLayout>
  );
}