'use client';

import { useTransition, useState } from 'react';
import type { User } from '@/lib/types/user';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { EscalationForm } from '../dialogs/EscalationForm';
import {
    MessageSquare,
    Mail,
    Plus,
    UserCircle2,
    Headphones,
    Loader2
} from 'lucide-react';
import { toast } from 'sonner';

interface SupportTabProps {
    user: User;
}

export function SupportTab({ user }: SupportTabProps) {
    const [createDialogOpen, setCreateDialogOpen] = useState(false);

    // Filter state could go here in future
    // const [filter, setFilter] = useState('all');

    return (
        <div className="space-y-4">
            <div className="flex items-center justify-between">
                <h3 className="text-sm font-semibold">Communication Timeline</h3>

                <EscalationForm
                    userId={user.id}
                    userName={user.name}
                    open={createDialogOpen}
                    onOpenChange={setCreateDialogOpen}
                />
            </div>

            {/* Timeline Stream */}
            <div className="relative pl-4 border-l-2 border-border/50 space-y-6">
                {[
                    { id: 1, type: 'ticket', title: 'Refund requested for "Tech Summit"', status: 'Open', date: '2 hours ago', icon: Headphones, color: 'text-blue-600 bg-blue-50' },
                    { id: 2, type: 'email', title: 'Sent: "Your tickets are ready!"', status: 'Delivered', date: 'Yesterday', icon: Mail, color: 'text-slate-600 bg-slate-50' },
                    { id: 3, type: 'ticket', title: 'Login issue reported', status: 'Resolved', date: '3 days ago', icon: MessageSquare, color: 'text-emerald-600 bg-emerald-50' },
                ].map((item) => (
                    <div key={item.id} className="relative">
                        <div className={`absolute -left-[25px] top-0 h-8 w-8 rounded-full border-2 border-background flex items-center justify-center ${item.color}`}>
                            <item.icon className="h-4 w-4" />
                        </div>
                        <div className="bg-card border rounded-lg p-3 shadow-sm hover:shadow-md transition-shadow">
                            <div className="flex justify-between items-start">
                                <h4 className="text-sm font-medium">{item.title}</h4>
                                <span className="text-xs text-muted-foreground whitespace-nowrap">{item.date}</span>
                            </div>
                            <div className="mt-1 flex items-center gap-2">
                                <span className="text-xs font-medium px-2 py-0.5 rounded-full bg-secondary/50 text-secondary-foreground">
                                    {item.type === 'ticket' ? 'Ticket #1234' : 'Email System'}
                                </span>
                                <span className="text-xs text-muted-foreground">• {item.status}</span>
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
}