import type { Meta, StoryObj } from '@storybook/react';
import {
  Card,
  CardHeader,
  CardFooter,
  CardTitle,
  CardDescription,
  CardContent,
  CardAction,
} from './card';
import { Button } from '../button';
import { Input } from '../input';
import { Label } from '../label';
import { Badge } from '../badge';
import { Avatar, AvatarFallback } from '../avatar';
import { Separator } from '../separator';
import {
  Bell,
  DollarSign,
  Download,
  ExternalLink,
  MoreHorizontal,
  Projector,
  Settings as SettingsIcon,
  Users,
} from 'lucide-react';
import React from 'react';

const meta: Meta<typeof Card> = {
  title: 'UI/Card',
  component: Card,
  render: args => <Card {...args} />,
  decorators: [
    Story => (
      <div className="bg-muted rounded-xl p-8 w-full flex items-center justify-center">
        <Story />
      </div>
    ),
  ],
};

export default meta;
type Story = StoryObj<typeof Card>;

// ─── Estrutura básica ─────────────────────────────────────────────────────────

export const Default: Story = {
  render: args => (
    <Card {...args} className="w-[350px]">
      <CardHeader>
        <CardTitle>Detalhes do Projeto</CardTitle>
        <CardDescription>Gerencie as configurações do seu workspace.</CardDescription>
      </CardHeader>
      <CardContent>
        <p className="text-sm text-muted-foreground">
          Este workspace contém todos os assets e documentações do projeto Xertica UI.
        </p>
      </CardContent>
      <CardFooter className="flex justify-between">
        <Button variant="outline">Descartar</Button>
        <Button>Salvar</Button>
      </CardFooter>
    </Card>
  ),
};

// ─── Com CardAction ───────────────────────────────────────────────────────────

export const WithAction: Story = {
  render: () => (
    <Card className="w-[380px]">
      <CardHeader>
        <CardTitle>Notificações</CardTitle>
        <CardDescription>Gerencie suas preferências de alerta.</CardDescription>
        <CardAction>
          <Button variant="ghost" size="icon">
            <MoreHorizontal className="size-4" />
          </Button>
        </CardAction>
      </CardHeader>
      <CardContent className="space-y-3">
        {[
          {
            label: 'Deploy concluído',
            desc: 'Produção atualizada',
            badge: 'Sucesso',
            v: 'success' as const,
          },
          {
            label: 'Revisão pendente',
            desc: 'PR #42 aguarda você',
            badge: 'Info',
            v: 'info' as const,
          },
          {
            label: 'Erro detectado',
            desc: 'Auth service — 503',
            badge: 'Erro',
            v: 'destructive' as const,
          },
        ].map(item => (
          <div key={item.label} className="flex items-center justify-between gap-2">
            <div>
              <p className="text-sm font-medium">{item.label}</p>
              <p className="text-xs text-muted-foreground">{item.desc}</p>
            </div>
            <Badge variant={item.v}>{item.badge}</Badge>
          </div>
        ))}
      </CardContent>
      <CardFooter>
        <Button variant="outline" size="sm" className="w-full">
          <Bell className="size-4" /> Ver todas
        </Button>
      </CardFooter>
    </Card>
  ),
};

// ─── Stats ────────────────────────────────────────────────────────────────────

export const Stats: Story = {
  render: () => (
    <div className="grid gap-4 md:grid-cols-3 w-full max-w-3xl">
      <Card>
        <CardHeader>
          <CardTitle className="text-sm font-medium">Receita Total</CardTitle>
          <CardAction>
            <DollarSign className="size-4 text-muted-foreground" />
          </CardAction>
        </CardHeader>
        <CardContent>
          <p className="text-2xl font-bold">R$ 45.231</p>
          <p className="text-xs text-muted-foreground">+20.1% vs mês anterior</p>
        </CardContent>
      </Card>
      <Card>
        <CardHeader>
          <CardTitle className="text-sm font-medium">Assinantes</CardTitle>
          <CardAction>
            <Users className="size-4 text-muted-foreground" />
          </CardAction>
        </CardHeader>
        <CardContent>
          <p className="text-2xl font-bold">+2.350</p>
          <p className="text-xs text-muted-foreground">+180.1% vs mês anterior</p>
        </CardContent>
      </Card>
      <Card>
        <CardHeader>
          <CardTitle className="text-sm font-medium">Projetos Ativos</CardTitle>
          <CardAction>
            <Projector className="size-4 text-muted-foreground" />
          </CardAction>
        </CardHeader>
        <CardContent>
          <p className="text-2xl font-bold">12.234</p>
          <p className="text-xs text-muted-foreground">+19% vs mês anterior</p>
        </CardContent>
      </Card>
    </div>
  ),
};

// ─── Formulário ───────────────────────────────────────────────────────────────

export const Form: Story = {
  render: () => (
    <Card className="w-[400px]">
      <CardHeader>
        <CardTitle>Acesso à Conta</CardTitle>
        <CardDescription>Insira suas credenciais para acessar a plataforma.</CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="space-y-2">
          <Label htmlFor="email">Email</Label>
          <Input id="email" placeholder="nome@empresa.com" />
        </div>
        <div className="space-y-2">
          <Label htmlFor="password">Senha</Label>
          <Input id="password" type="password" />
        </div>
      </CardContent>
      <CardFooter className="flex-col gap-2">
        <Button className="w-full">Entrar</Button>
        <Button variant="ghost" size="sm" className="w-full text-muted-foreground">
          Esqueci minha senha
        </Button>
      </CardFooter>
    </Card>
  ),
};

// ─── Perfil / Team Member ─────────────────────────────────────────────────────

export const TeamMember: Story = {
  render: () => (
    <div className="flex gap-4 flex-wrap justify-center">
      {[
        {
          name: 'Ana Souza',
          role: 'Frontend Engineer',
          initials: 'AS',
          projects: 12,
          status: 'Online' as const,
          sv: 'success' as const,
        },
        {
          name: 'Bruno Lima',
          role: 'Design System',
          initials: 'BL',
          projects: 8,
          status: 'Ausente' as const,
          sv: 'warning' as const,
        },
        {
          name: 'Carla Rocha',
          role: 'Product Designer',
          initials: 'CR',
          projects: 15,
          status: 'Ocupada' as const,
          sv: 'destructive' as const,
        },
      ].map(member => (
        <Card key={member.name} className="w-52">
          <CardContent className="pt-6 flex flex-col items-center text-center gap-3">
            <Avatar className="size-14">
              <AvatarFallback className="text-base font-semibold">{member.initials}</AvatarFallback>
            </Avatar>
            <div>
              <p className="font-semibold text-sm">{member.name}</p>
              <p className="text-xs text-muted-foreground">{member.role}</p>
            </div>
            <Badge variant={member.sv}>{member.status}</Badge>
            <Separator />
            <p className="text-xs text-muted-foreground">{member.projects} projetos</p>
            <div className="flex gap-2 w-full">
              <Button variant="outline" size="sm" className="flex-1 text-xs">
                Perfil
              </Button>
              <Button size="sm" className="flex-1 text-xs">
                Contato
              </Button>
            </div>
          </CardContent>
        </Card>
      ))}
    </div>
  ),
};

// ─── Configurações ────────────────────────────────────────────────────────────

export const SettingsCard: Story = {
  render: () => (
    <Card className="w-[480px]">
      <CardHeader>
        <CardTitle>Preferências da Conta</CardTitle>
        <CardDescription>Ajuste as configurações do seu perfil e segurança.</CardDescription>
        <CardAction>
          <Button variant="ghost" size="icon">
            <SettingsIcon className="size-4" />
          </Button>
        </CardAction>
      </CardHeader>
      <CardContent className="space-y-0 p-0">
        {[
          {
            label: 'Notificações por email',
            desc: 'Receba alertas de deploy e reviews',
            active: true,
          },
          { label: 'Autenticação 2FA', desc: 'Camada extra de segurança', active: true },
          { label: 'Modo escuro automático', desc: 'Segue o sistema operacional', active: false },
          { label: 'API pública', desc: 'Permite acesso externo via token', active: false },
        ].map((item, i, arr) => (
          <div key={item.label}>
            <div className="flex items-center justify-between px-6 py-4">
              <div>
                <p className="text-sm font-medium">{item.label}</p>
                <p className="text-xs text-muted-foreground">{item.desc}</p>
              </div>
              <Badge variant={item.active ? 'success' : 'secondary'}>
                {item.active ? 'Ativo' : 'Inativo'}
              </Badge>
            </div>
            {i < arr.length - 1 && <Separator />}
          </div>
        ))}
      </CardContent>
      <CardFooter className="flex justify-between">
        <Button variant="ghost" size="sm" className="gap-1.5">
          <ExternalLink className="size-3.5" /> Documentação
        </Button>
        <Button size="sm" className="gap-1.5">
          <Download className="size-3.5" /> Exportar config
        </Button>
      </CardFooter>
    </Card>
  ),
};