'use client';

import { useState } from 'react';
import { Send } from 'lucide-react';

import { Button } from '@/components/ui/button';
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
import { EmailAccountsList } from '@/components/email/email-accounts-list';
import { EmailThreadsList } from '@/components/email/email-threads-list';
import { ComposeDialog } from '@/components/email/compose-dialog';

export default function EmailPage() {
  const [tab, setTab] = useState('threads');
  const [composeOpen, setComposeOpen] = useState(false);

  return (
    <div className="space-y-6">
      <div className="flex items-start justify-between gap-4">
        <div>
          <h1 className="text-2xl font-bold text-foreground">Email</h1>
          <p className="text-muted-foreground">Send and manage client communications</p>
        </div>
        <Button onClick={() => setComposeOpen(true)}>
          <Send className="h-4 w-4 mr-1.5" />
          Compose
        </Button>
      </div>

      <Tabs value={tab} onValueChange={setTab}>
        <TabsList>
          <TabsTrigger value="threads">Inbox</TabsTrigger>
          <TabsTrigger value="accounts">Accounts</TabsTrigger>
        </TabsList>

        <TabsContent value="threads" className="pt-4">
          <EmailThreadsList />
        </TabsContent>

        <TabsContent value="accounts" className="pt-4">
          <EmailAccountsList />
        </TabsContent>
      </Tabs>

      <ComposeDialog open={composeOpen} onOpenChange={setComposeOpen} />
    </div>
  );
}
