import React, { useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Badge } from '@/components/ui/badge';
import { AlertCircle, CheckCircle2, ListFilter, Settings, Box, Terminal } from 'lucide-react';

export const ReconciliationView = () => {
  const [activeTab, setActiveTab] = useState('pendencias');

  return (
    <div className="workspace-theme space-y-6 p-6">
      <header className="flex justify-between items-center">
        <div>
          <h1 className="text-2xl font-black text-slate-800 dark:text-stone-100 uppercase tracking-tighter">Conciliação</h1>
          <p className="text-slate-500 text-sm">Concilie transações bancárias e organize seu plano de contas</p>
        </div>
        <div className="flex gap-2">
            <Badge variant="outline" className="bg-amber-50 text-amber-600 border-amber-200 gap-1 px-3 py-1">
                <AlertCircle size={14} />
                17 Pendentes
            </Badge>
        </div>
      </header>

      <Card className="border-none shadow-sm bg-white dark:bg-[#1b1b1b] rounded-xl overflow-hidden">
        <Tabs defaultValue="pendencias" className="w-full" onValueChange={setActiveTab}>
          <div className="px-6 pt-2 border-b border-slate-100 dark:border-[#2a2a2a] bg-slate-50/30 dark:bg-[#1e1e1e]">
            <TabsList className="bg-transparent gap-8 h-14">
              <TabsTrigger 
                value="pendencias" 
                className="data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:border-b-2 data-[state=active]:border-[var(--workspace-sec-2-light)] rounded-none px-0 font-bold text-xs uppercase tracking-widest text-slate-400 data-[state=active]:text-[var(--workspace-sec-2-light)]"
              >
                <Terminal size={16} className="mr-2" />
                Pendências
              </TabsTrigger>
              <TabsTrigger 
                value="cruzamento" 
                className="data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:border-b-2 data-[state=active]:border-[var(--workspace-sec-2-light)] rounded-none px-0 font-bold text-xs uppercase tracking-widest text-slate-400 data-[state=active]:text-[var(--workspace-sec-2-light)]"
              >
                <CheckCircle2 size={16} className="mr-2" />
                Cruzamento
              </TabsTrigger>
              <TabsTrigger 
                value="config" 
                className="data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:border-b-2 data-[state=active]:border-[var(--workspace-sec-2-light)] rounded-none px-0 font-bold text-xs uppercase tracking-widest text-slate-400 data-[state=active]:text-[var(--workspace-sec-2-light)]"
              >
                <Settings size={16} className="mr-2" />
                Configurações
              </TabsTrigger>
            </TabsList>
          </div>

          <CardContent className="p-0">
            <TabsContent value="pendencias" className="m-0 h-[600px] flex flex-col items-center justify-center text-slate-400">
               <AlertCircle size={48} className="mb-4 opacity-20" />
               <p className="text-sm font-medium">Apresentando transações não categorizadas...</p>
               <span className="text-[10px] uppercase mt-2 opacity-50 tracking-widest italic">Integração com ExcelTable pendente</span>
            </TabsContent>
            
            <TabsContent value="cruzamento" className="m-0 h-[600px]">
               <div className="grid grid-cols-1 md:grid-cols-3 gap-6 p-6 h-full">
                  {/* Coluna de Categorias */}
                  <div className="bg-slate-50 dark:bg-[#202020] rounded-xl p-4 border border-slate-100 dark:border-[#2a2a2a]">
                     <h3 className="text-[10px] font-black uppercase text-slate-400 mb-4 tracking-widest flex items-center justify-between">
                        Categorias
                        <ListFilter size={14} />
                     </h3>
                     <div className="space-y-2">
                        {['Infraestrutura', 'Marketing', 'RH', 'Softwares'].map((cat, i) => (
                           <div key={i} className="bg-white dark:bg-[#252525] p-3 rounded-lg shadow-sm border border-slate-100 dark:border-[#333] cursor-pointer hover:border-[var(--workspace-sec-2-light)] transition-all flex items-center justify-between">
                              <span className="text-xs font-bold text-slate-600 dark:text-stone-300">{cat}</span>
                              <Badge variant="secondary" className="text-[10px]">R$ 1.500</Badge>
                           </div>
                        ))}
                     </div>
                  </div>

                  {/* Coluna de Regras / Detalhamento */}
                  <div className="md:col-span-2 bg-white dark:bg-[#1b1b1b] rounded-xl border border-dashed border-slate-200 dark:border-[#333] flex flex-col items-center justify-center text-slate-300">
                     <p className="text-xs font-medium uppercase tracking-tighter">Selecione uma categoria para ver as regras e transações</p>
                  </div>
               </div>
            </TabsContent>

            <TabsContent value="config" className="m-0 p-8">
               <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                  {/* Cards de CRUD */}
                  {[
                     { title: 'Categorias', icon: <ListFilter size={24} />, count: 12 },
                     { title: 'Regras', icon: <Terminal size={24} />, count: 45 },
                     { title: 'Caixinhas', icon: <Box size={24} />, count: 5 },
                  ].map((item, i) => (
                     <Card key={i} className="hover:border-[var(--workspace-sec-2-light)] cursor-pointer transition-all border-slate-100 dark:border-[#2a2a2a] bg-slate-50/50 dark:bg-[#202020]">
                        <CardContent className="pt-6 flex flex-col items-center text-center">
                           <div className="w-12 h-12 rounded-full bg-white dark:bg-[#252525] flex items-center justify-center text-[var(--workspace-sec-2-light)] shadow-sm mb-4">
                              {item.icon}
                           </div>
                           <h4 className="font-bold text-sm text-slate-700 dark:text-stone-200">{item.title}</h4>
                           <p className="text-[10px] text-slate-400 uppercase mt-1 tracking-widest">{item.count} Itens Cadastrados</p>
                        </CardContent>
                     </Card>
                  ))}
               </div>
            </TabsContent>
          </CardContent>
        </Tabs>
      </Card>
    </div>
  );
};
