import { Staff, Media } from '@/types';
import { useNavigate } from 'react-router-dom';
import { motion, AnimatePresence } from 'motion/react';
import {
  ArrowLeft, Calendar, MapPin, Briefcase, Film, User, Ruler, Palette, Eye,
  BookOpen, Theater, ArrowUpAZ, ArrowDownAZ, ArrowUpDown, Star
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
  DropdownMenuSeparator,
} from '@/components/ui/dropdown-menu';
import { Separator } from '@/components/ui/separator';
import { useState } from 'react';
import { cn } from '@/lib/utils';

interface CastDetailViewProps {
  person: Staff;
  relatedMedia: Media[];
}

export default function CastDetailView({ person, relatedMedia }: CastDetailViewProps) {
  const navigate = useNavigate();
  const [sortBy, setSortBy] = useState<'year' | 'title' | 'role'>('role');
  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');

  const handleMediaClick = (mediaId: string) => {
    navigate(`/media/${mediaId}`);
  };

  const sortedFilmography = [...(person.filmography || [])].sort((a, b) => {
    let comparison = 0;
    if (sortBy === 'year') {
      comparison = (a.year || 0) - (b.year || 0);
    } else if (sortBy === 'title') {
      comparison = (a.title || '').localeCompare(b.title || '');
    } else if (sortBy === 'role') {
      comparison = (a.role || '').localeCompare(b.role || '');
    }
    return sortOrder === 'asc' ? comparison : -comparison;
  });
  // Sort options
  const sortOptions = [
    { value: 'year', label: 'Year', icon: Calendar },
    { value: 'title', label: 'Title', icon: ArrowUpAZ },
    { value: 'role', label: 'Role', icon: Briefcase },
  ] as const;

  return (
    <div className="min-h-screen bg-background pb-16">
      {/* Compact Hero Section */}
      <div className="relative h-[35vh] md:h-[40vh] overflow-hidden bg-zinc-900">
        <img
          src={person.photo}
          alt={person.name}
          className="w-full h-full object-cover opacity-30 blur-xl scale-110"
          referrerPolicy="no-referrer"
        />
        <div className="absolute inset-0 bg-gradient-to-t from-background via-background/50 to-transparent" />

        <div className="absolute inset-0 flex items-end px-4 sm:px-6 pb-8">
          <div className="max-w-[1920px] mx-auto w-full flex flex-col md:flex-row items-center md:items-end gap-6">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              className="shrink-0"
            >
              <Avatar className="h-32 md:h-40 w-auto aspect-[3/4] rounded-none border-3 border-background shadow-2xl">
                <AvatarImage
                  src={person.photo}
                  alt={person.name}
                  className="object-cover"
                  referrerPolicy="no-referrer"
                />
                <AvatarFallback className="rounded-none text-3xl">
                  <User className="h-12 w-12" />
                </AvatarFallback>
              </Avatar>
            </motion.div>

            <div className="flex-1 text-center md:text-left pb-2">
              <motion.div
                initial={{ opacity: 0, x: -20 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ delay: 0.1 }}
              >
                <h1 className="text-3xl md:text-5xl font-bold text-foreground mb-3 tracking-tight">
                  {person.name}
                </h1>
                <div className="flex flex-wrap justify-center md:justify-start gap-2">
                  {person.occupations?.map(occ => (
                    <Badge key={occ} variant="secondary" className="bg-[#6d28d9]/10 text-[#6d28d9] border-[#6d28d9]/20 font-medium px-3 py-1 text-xs">
                      {occ}
                    </Badge>
                  ))}
                  {person.filmography && person.filmography.length > 0 && (
                    <Badge variant="outline" className="border-[#6d28d9]/30 text-[#6d28d9] font-medium px-3 py-1 text-xs">
                      <Star className="w-3 h-3 mr-1" />
                      {person.filmography.length}
                    </Badge>
                  )}
                </div>
              </motion.div>
            </div>
          </div>
        </div>

        <Button
          variant="ghost"
          size="icon"
          onClick={() => navigate(-1)}
          className="absolute top-20 left-4 sm:left-6 bg-white/20 hover:bg-white/40 text-white rounded-xl backdrop-blur-md transition-all duration-300 hover:scale-105 border border-white/20 h-10 w-10"
        >
          <ArrowLeft size={20} />
        </Button>
      </div>

      {/* Content Section */}
      <div className="max-w-[1920px] mx-auto px-4 sm:px-6 mt-8 grid grid-cols-1 lg:grid-cols-4 gap-6">
        {/* Sidebar Info - Modern shadcn Design */}
        <div className="space-y-4 lg:col-span-1">
          {/* Personal Info Card */}
          <Card className="border-border/60 overflow-hidden">
            <CardHeader className="py-3 px-4 border-b border-border/40">
              <CardTitle className="text-xs font-medium uppercase tracking-wide text-muted-foreground flex items-center gap-2">
                <div className="w-5 h-5 rounded bg-[#6d28d9]/10 flex items-center justify-center">
                  <User size={12} className="text-[#6d28d9]" />
                </div>
                Personal Info
              </CardTitle>
            </CardHeader>
            <CardContent className="p-0">
              {/* Birth Date */}
              <div className="flex items-center justify-between px-4 py-3 hover:bg-muted/30 transition-colors">
                <div className="flex items-center gap-2.5">
                  <div className="w-7 h-7 rounded-md bg-[#6d28d9]/10 flex items-center justify-center text-[#6d28d9]">
                    <Calendar size={14} />
                  </div>
                  <span className="text-xs text-muted-foreground">Born</span>
                </div>
                <span className="text-sm font-medium">{person.birthDate || '—'}</span>
              </div>
              <Separator />

              {/* Birth Place */}
              <div className="flex items-center justify-between px-4 py-3 hover:bg-muted/30 transition-colors">
                <div className="flex items-center gap-2.5">
                  <div className="w-7 h-7 rounded-md bg-[#6d28d9]/10 flex items-center justify-center text-[#6d28d9]">
                    <MapPin size={14} />
                  </div>
                  <span className="text-xs text-muted-foreground">Origin</span>
                </div>
                <span className="text-sm font-medium truncate max-w-[140px]" title={person.birthPlace || undefined}>
                  {person.birthPlace || '—'}
                </span>
              </div>
              <Separator />

              {/* Known For */}
              <div className="flex items-center justify-between px-4 py-3 hover:bg-muted/30 transition-colors">
                <div className="flex items-center gap-2.5">
                  <div className="w-7 h-7 rounded-md bg-[#6d28d9]/10 flex items-center justify-center text-[#6d28d9]">
                    <Briefcase size={14} />
                  </div>
                  <span className="text-xs text-muted-foreground">Role</span>
                </div>
                <Badge variant="secondary" className="text-xs font-normal bg-[#6d28d9]/10 text-[#6d28d9] border-none">
                  {person.role}
                </Badge>
              </div>

              {/* Ethnicity - only if present */}
              {(person.ethnicity || person.adult_specifics?.ethnicity) && (
                <>
                  <Separator />
                  <div className="flex items-center justify-between px-4 py-3 hover:bg-muted/30 transition-colors">
                    <div className="flex items-center gap-2.5">
                      <div className="w-7 h-7 rounded-md bg-[#6d28d9]/10 flex items-center justify-center text-[#6d28d9]">
                        <User size={14} />
                      </div>
                      <span className="text-xs text-muted-foreground">Ethnicity</span>
                    </div>
                    <span className="text-sm font-medium truncate max-w-[140px]">
                      {person.adult_specifics?.ethnicity || person.ethnicity}
                    </span>
                  </div>
                </>
              )}
            </CardContent>
          </Card>

          {/* Measurements Card - Only if data exists */}
          {(person.adult_specifics?.height || person.height || person.adult_specifics?.weight || person.weight ||
            person.adult_specifics?.measurements || person.bust_size || person.hair_color || person.adult_specifics?.hair_color) && (
            <Card className="border-border/60 overflow-hidden">
              <CardHeader className="py-3 px-4 border-b border-border/40">
                <CardTitle className="text-xs font-medium uppercase tracking-wide text-muted-foreground flex items-center gap-2">
                  <div className="w-5 h-5 rounded bg-[#6d28d9]/10 flex items-center justify-center">
                    <Ruler size={12} className="text-[#6d28d9]" />
                  </div>
                  Measurements
                </CardTitle>
              </CardHeader>
              <CardContent className="p-0">
                {/* Height & Weight Grid */}
                {(person.adult_specifics?.height || person.height || person.adult_specifics?.weight || person.weight) && (
                  <>
                    <div className="grid grid-cols-2 divide-x divide-border">
                      {(person.adult_specifics?.height || person.height) && (
                        <div className="px-4 py-3 hover:bg-muted/30 transition-colors text-center">
                          <p className="text-[10px] text-muted-foreground uppercase tracking-wide mb-0.5">Height</p>
                          <p className="text-lg font-semibold text-foreground">
                            {person.adult_specifics?.height || person.height}
                            <span className="text-xs font-normal text-muted-foreground ml-0.5">cm</span>
                          </p>
                        </div>
                      )}
                      {(person.adult_specifics?.weight || person.weight) && (
                        <div className="px-4 py-3 hover:bg-muted/30 transition-colors text-center">
                          <p className="text-[10px] text-muted-foreground uppercase tracking-wide mb-0.5">Weight</p>
                          <p className="text-lg font-semibold text-foreground">
                            {person.adult_specifics?.weight || person.weight}
                            <span className="text-xs font-normal text-muted-foreground ml-0.5">kg</span>
                          </p>
                        </div>
                      )}
                    </div>
                    <Separator />
                  </>
                )}

                {/* Measurements (Bust-Waist-Hip) */}
                {(person.adult_specifics?.measurements || person.bust_size || person.cup_size || person.waist_size || person.hip_size) && (
                  <>
                    <div className="px-4 py-3 hover:bg-muted/30 transition-colors">
                      <p className="text-[10px] text-muted-foreground uppercase tracking-wide mb-1.5">Figure</p>
                      <p className="text-sm font-medium font-mono tracking-wide">
                        {person.adult_specifics?.measurements || (
                          <>
                            {person.bust_size && <span className="inline-flex items-center gap-0.5">{person.bust_size}{person.cup_size && <span className="text-xs text-muted-foreground">{person.cup_size}</span>}</span>}
                            {(person.bust_size || person.cup_size) && person.waist_size && <span className="text-muted-foreground mx-1">—</span>}
                            {person.waist_size && <span>{person.waist_size}</span>}
                            {person.hip_size && <span className="text-muted-foreground mx-1">—</span>}
                            {person.hip_size && <span>{person.hip_size}</span>}
                          </>
                        )}
                      </p>
                    </div>
                    <Separator />
                  </>
                )}

                {/* Hair & Eyes Grid */}
                <div className="grid grid-cols-2 divide-x divide-border">
                  {(person.hair_color || person.adult_specifics?.hair_color) && (
                    <div className="px-4 py-3 hover:bg-muted/30 transition-colors">
                      <div className="flex items-center gap-2 mb-1">
                        <Palette size={12} className="text-[#6d28d9]" />
                        <span className="text-[10px] text-muted-foreground uppercase tracking-wide">Hair</span>
                      </div>
                      <p className="text-sm font-medium truncate">
                        {person.adult_specifics?.hair_color || person.hair_color}
                      </p>
                    </div>
                  )}
                  {(person.eye_color || person.adult_specifics?.eye_color) && (
                    <div className="px-4 py-3 hover:bg-muted/30 transition-colors">
                      <div className="flex items-center gap-2 mb-1">
                        <Eye size={12} className="text-[#6d28d9]" />
                        <span className="text-[10px] text-muted-foreground uppercase tracking-wide">Eyes</span>
                      </div>
                      <p className="text-sm font-medium truncate">
                        {person.adult_specifics?.eye_color || person.eye_color}
                      </p>
                    </div>
                  )}
                </div>

                {/* Tattoos & Piercings */}
                {(person.adult_specifics?.tattoos || person.adult_specifics?.piercings) && (
                  <>
                    <Separator />
                    <div className="grid grid-cols-2 divide-x divide-border">
                      {person.adult_specifics?.tattoos && (
                        <div className="px-4 py-3 hover:bg-muted/30 transition-colors">
                          <p className="text-[10px] text-muted-foreground uppercase tracking-wide mb-1">Tattoos</p>
                          <p className="text-xs font-medium text-foreground line-clamp-2">{person.adult_specifics.tattoos}</p>
                        </div>
                      )}
                      {person.adult_specifics?.piercings && (
                        <div className="px-4 py-3 hover:bg-muted/30 transition-colors">
                          <p className="text-[10px] text-muted-foreground uppercase tracking-wide mb-1">Piercings</p>
                          <p className="text-xs font-medium text-foreground line-clamp-2">{person.adult_specifics.piercings}</p>
                        </div>
                      )}
                    </div>
                  </>
                )}
              </CardContent>
            </Card>
          )}
        </div>

        {/* Main Bio & Roles - Wider */}
        <div className="lg:col-span-3">
          <Tabs defaultValue={person.bio ? 'bio' : 'filmography'} className="w-full">
            <TabsList className="mb-4 w-full justify-start bg-muted/50 p-1 rounded-lg h-auto">
              {person.bio && (
                <TabsTrigger value="bio" className="gap-1.5 text-xs rounded-md px-3 py-1.5 data-[state=active]:bg-background data-[state=active]:shadow-sm">
                  <BookOpen size={14} />
                  Biography
                </TabsTrigger>
              )}
              {person.filmography && person.filmography.length > 0 && (
                <>
                  <TabsTrigger value="characters" className="gap-1.5 text-xs rounded-md px-3 py-1.5 data-[state=active]:bg-background data-[state=active]:shadow-sm">
                    <Theater size={14} />
                    Characters
                  </TabsTrigger>
                  <TabsTrigger value="filmography" className="gap-1.5 text-xs rounded-md px-3 py-1.5 data-[state=active]:bg-background data-[state=active]:shadow-sm">
                    <Film size={14} />
                    Filmography
                  </TabsTrigger>
                </>
              )}
            </TabsList>

            {person.bio && (
              <TabsContent value="bio" className="mt-0">
                <Card className="border-border/60">
                  <CardHeader className="pb-3">
                    <CardTitle className="text-base font-semibold">Biography</CardTitle>
                  </CardHeader>
                  <CardContent className="pt-0">
                    <p className="text-foreground leading-relaxed text-sm">
                      {person.bio}
                    </p>
                  </CardContent>
                </Card>
              </TabsContent>
            )}

            {person.filmography && person.filmography.length > 0 && (
              <>
                <TabsContent value="characters" className="mt-0">
                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
                    <AnimatePresence mode="popLayout">
                      {person.filmography.map((item, index) => (
                        <motion.div
                          key={`${item.id}-char`}
                          initial={{ opacity: 0, y: 10 }}
                          animate={{ opacity: 1, y: 0 }}
                          transition={{ delay: index * 0.03 }}
                        >
                          <Card
                            className="hover:border-[#6d28d9]/30 hover:shadow-md transition-all duration-200 cursor-pointer group border-border/60"
                            onClick={() => handleMediaClick(item.id.toString())}
                          >
                            <CardContent className="p-3 flex items-center gap-3">
                              <div className="w-14 h-14 rounded-none overflow-hidden shrink-0 bg-muted border border-border/40">
                                <img
                                  src={item.poster || person.photo}
                                  alt={item.title}
                                  className="w-full h-full object-cover"
                                  referrerPolicy="no-referrer"
                                />
                              </div>
                              <div className="min-w-0 flex-1">
                                <p className="text-[10px] text-muted-foreground uppercase tracking-wide">Character</p>
                                <h4 className="font-semibold text-foreground truncate text-sm group-hover:text-[#6d28d9] transition-colors">
                                  {item.characterName || item.role}
                                </h4>
                                <p className="text-xs text-[#6d28d9] truncate">{item.title}</p>
                              </div>
                            </CardContent>
                          </Card>
                        </motion.div>
                      ))}
                    </AnimatePresence>
                  </div>
                </TabsContent>

                <TabsContent value="filmography" className="mt-0">
                  {/* Sort Toolbar */}
                  <div className="flex items-center justify-between mb-4">
                    <p className="text-sm text-muted-foreground">
                      {person.filmography.length} {person.filmography.length === 1 ? 'title' : 'titles'}
                    </p>
                    <div className="flex items-center gap-2">
                      <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                          <Button
                            variant="outline"
                            size="sm"
                            className="h-8 px-2.5 rounded-lg text-xs border-border/60"
                          >
                            <ArrowUpDown size={14} className="mr-1.5" />
                            {sortOrder === 'asc' ? <ArrowUpAZ size={14} className="mr-1.5" /> : <ArrowDownAZ size={14} className="mr-1.5" />}
                            {sortOptions.find(o => o.value === sortBy)?.label}
                          </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end" className="w-40">
                          <DropdownMenuItem disabled className="text-xs font-semibold text-muted-foreground">
                            Sort by
                          </DropdownMenuItem>
                          <DropdownMenuSeparator />
                          {sortOptions.map(option => (
                            <DropdownMenuItem
                              key={option.value}
                              onClick={() => {
                                if (sortBy === option.value) {
                                  setSortOrder(prev => prev === 'asc' ? 'desc' : 'asc');
                                } else {
                                  setSortBy(option.value);
                                  setSortOrder('asc');
                                }
                              }}
                              className="flex items-center justify-between text-xs"
                            >
                              <span className="flex items-center gap-2">
                                <option.icon size={14} />
                                {option.label}
                              </span>
                              {sortBy === option.value && (
                                sortOrder === 'asc' ? <ArrowUpAZ size={14} className="text-[#6d28d9]" /> : <ArrowDownAZ size={14} className="text-[#6d28d9]" />
                              )}
                            </DropdownMenuItem>
                          ))}
                        </DropdownMenuContent>
                      </DropdownMenu>
                    </div>
                  </div>

                  {/* Filmography Grid */}
                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
                    <AnimatePresence mode="popLayout">
                      {sortedFilmography.map((item, index) => (
                        <motion.div
                          key={item.id}
                          initial={{ opacity: 0, y: 10 }}
                          animate={{ opacity: 1, y: 0 }}
                          transition={{ delay: index * 0.03 }}
                        >
                          <Card
                            onClick={() => handleMediaClick(item.id.toString())}
                            className="group cursor-pointer hover:border-[#6d28d9]/30 hover:shadow-md transition-all duration-200 border-border/60"
                          >
                            <CardContent className="p-3 flex items-center gap-3">
                              <div className="w-12 h-16 rounded-none overflow-hidden shrink-0 bg-muted border border-border/40">
                                <img
                                  src={item.poster || person.photo}
                                  alt={item.title}
                                  className="w-full h-full object-cover"
                                  referrerPolicy="no-referrer"
                                />
                              </div>
                              <div className="min-w-0 flex-1">
                                <h4 className="font-semibold text-foreground truncate text-sm group-hover:text-[#6d28d9] transition-colors">
                                  {item.title}
                                </h4>
                                <p className="text-xs text-muted-foreground mb-1">
                                  {item.year || 'Unknown'}
                                </p>
                                <div className="flex items-center gap-1.5">
                                  <Badge variant="outline" className="text-[10px] px-1.5 py-0 h-4 border-border/50 font-normal">
                                    {item.role}
                                  </Badge>
                                  {item.category && (
                                    <Badge variant="secondary" className="text-[10px] px-1.5 py-0 h-4 bg-muted font-normal">
                                      {item.category}
                                    </Badge>
                                  )}
                                </div>
                              </div>
                            </CardContent>
                          </Card>
                        </motion.div>
                      ))}
                    </AnimatePresence>
                  </div>
                </TabsContent>
              </>
            )}
          </Tabs>
        </div>
      </div>
    </div>
  );
}