import { useState } from 'react';
import type { Route } from './+types/financial';
import { Card, CardHeader, CardTitle, CardContent } from '~/components/ui/card/card';
import { Button } from '~/components/ui/button/button';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '~/components/ui/select/select';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '~/components/ui/table/table';
import { Badge } from '~/components/ui/badge/badge';
import { 
  TrendingUp, 
  TrendingDown, 
  DollarSign, 
  Users, 
  CreditCard,
  Download,
  Calendar,
  ArrowUpRight,
  ArrowDownRight
} from 'lucide-react';
import { Bar, BarChart, Line, LineChart, ResponsiveContainer, XAxis, YAxis, Tooltip, CartesianGrid, Legend } from 'recharts';
import styles from './financial.module.css';

export const meta: Route.MetaFunction = () => {
  return [{ title: 'Financial Dashboard' }];
};

interface Transaction {
  id: string;
  user: string;
  amount: number;
  type: 'subscription' | 'renewal' | 'refund';
  status: 'completed' | 'pending' | 'failed';
  date: string;
  invoiceId: string;
}

interface RevenueData {
  date: string;
  revenue: number;
  subscriptions: number;
}

export default function Financial() {
  const [timeRange, setTimeRange] = useState<'today' | 'week' | 'month' | 'year'>('month');
  const [selectedMonth, setSelectedMonth] = useState('2024-01');

  // Sample data - در واقعیت از API می‌آید
  const stats = {
    totalRevenue: 45780000,
    revenueChange: 12.5,
    activeSubscriptions: 342,
    subscriptionChange: 8.2,
    pendingPayments: 15,
    pendingAmount: 3450000,
    avgRevenuePerUser: 133800,
    avgChange: -2.1
  };

  const revenueData: RevenueData[] = [
    { date: '1', revenue: 1200000, subscriptions: 12 },
    { date: '5', revenue: 1850000, subscriptions: 18 },
    { date: '10', revenue: 2100000, subscriptions: 21 },
    { date: '15', revenue: 3200000, subscriptions: 28 },
    { date: '20', revenue: 2800000, subscriptions: 24 },
    { date: '25', revenue: 3900000, subscriptions: 35 },
    { date: '30', revenue: 4500000, subscriptions: 42 }
  ];

  const transactions: Transaction[] = [
    { id: '1', user: 'علی محمدی', amount: 150000, type: 'subscription', status: 'completed', date: '1403/10/15 14:30', invoiceId: 'INV-2024-001' },
    { id: '2', user: 'سارا احمدی', amount: 300000, type: 'renewal', status: 'completed', date: '1403/10/15 12:15', invoiceId: 'INV-2024-002' },
    { id: '3', user: 'محمد رضایی', amount: 200000, type: 'subscription', status: 'pending', date: '1403/10/15 11:00', invoiceId: 'INV-2024-003' },
    { id: '4', user: 'فاطمه کریمی', amount: 150000, type: 'subscription', status: 'completed', date: '1403/10/14 16:45', invoiceId: 'INV-2024-004' },
    { id: '5', user: 'حسین نوری', amount: 500000, type: 'renewal', status: 'failed', date: '1403/10/14 15:20', invoiceId: 'INV-2024-005' },
    { id: '6', user: 'مریم صادقی', amount: 150000, type: 'refund', status: 'completed', date: '1403/10/14 10:30', invoiceId: 'INV-2024-006' }
  ];

  const formatCurrency = (amount: number) => {
    return new Intl.NumberFormat('fa-IR').format(amount) + ' تومان';
  };

  const exportReport = (format: 'pdf' | 'excel') => {
    console.log(`Exporting report as ${format}`);
    // در واقعیت این تابع فایل رو دانلود می‌کنه
  };

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <div>
          <h1 className={styles.title}>گزارش مالی</h1>
          <p className={styles.subtitle}>مدیریت و تحلیل درآمد و هزینه‌ها</p>
        </div>
        <div className={styles.actions}>
          <Select value={timeRange} onValueChange={(value: any) => setTimeRange(value)}>
            <SelectTrigger className={styles.select}>
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="today">امروز</SelectItem>
              <SelectItem value="week">هفته جاری</SelectItem>
              <SelectItem value="month">ماه جاری</SelectItem>
              <SelectItem value="year">سال جاری</SelectItem>
            </SelectContent>
          </Select>
          <Button variant="outline" onClick={() => exportReport('excel')}>
            <Download size={16} />
            Excel
          </Button>
          <Button variant="outline" onClick={() => exportReport('pdf')}>
            <Download size={16} />
            PDF
          </Button>
        </div>
      </div>

      <div className={styles.statsGrid}>
        <Card>
          <CardHeader>
            <div className={styles.statHeader}>
              <CardTitle>کل درآمد</CardTitle>
              <div className={styles.iconWrapper} data-variant="success">
                <DollarSign size={20} />
              </div>
            </div>
          </CardHeader>
          <CardContent>
            <div className={styles.statValue}>{formatCurrency(stats.totalRevenue)}</div>
            <div className={styles.statChange} data-positive={stats.revenueChange > 0}>
              {stats.revenueChange > 0 ? <ArrowUpRight size={16} /> : <ArrowDownRight size={16} />}
              <span>{Math.abs(stats.revenueChange)}% نسبت به ماه قبل</span>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <div className={styles.statHeader}>
              <CardTitle>اشتراک‌های فعال</CardTitle>
              <div className={styles.iconWrapper} data-variant="info">
                <Users size={20} />
              </div>
            </div>
          </CardHeader>
          <CardContent>
            <div className={styles.statValue}>{stats.activeSubscriptions}</div>
            <div className={styles.statChange} data-positive={stats.subscriptionChange > 0}>
              {stats.subscriptionChange > 0 ? <ArrowUpRight size={16} /> : <ArrowDownRight size={16} />}
              <span>{Math.abs(stats.subscriptionChange)}% نسبت به ماه قبل</span>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <div className={styles.statHeader}>
              <CardTitle>پرداخت‌های در انتظار</CardTitle>
              <div className={styles.iconWrapper} data-variant="warning">
                <CreditCard size={20} />
              </div>
            </div>
          </CardHeader>
          <CardContent>
            <div className={styles.statValue}>{stats.pendingPayments} مورد</div>
            <div className={styles.statSubtext}>{formatCurrency(stats.pendingAmount)}</div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <div className={styles.statHeader}>
              <CardTitle>میانگین درآمد هر کاربر</CardTitle>
              <div className={styles.iconWrapper} data-variant="accent">
                <TrendingUp size={20} />
              </div>
            </div>
          </CardHeader>
          <CardContent>
            <div className={styles.statValue}>{formatCurrency(stats.avgRevenuePerUser)}</div>
            <div className={styles.statChange} data-positive={stats.avgChange > 0}>
              {stats.avgChange > 0 ? <ArrowUpRight size={16} /> : <ArrowDownRight size={16} />}
              <span>{Math.abs(stats.avgChange)}% نسبت به ماه قبل</span>
            </div>
          </CardContent>
        </Card>
      </div>

      <div className={styles.chartsGrid}>
        <Card className={styles.chartCard}>
          <CardHeader>
            <CardTitle>روند درآمد ماهانه</CardTitle>
          </CardHeader>
          <CardContent>
            <ResponsiveContainer width="100%" height={300}>
              <LineChart data={revenueData}>
                <CartesianGrid strokeDasharray="3 3" stroke="var(--color-neutral-6)" />
                <XAxis dataKey="date" stroke="var(--color-neutral-11)" />
                <YAxis stroke="var(--color-neutral-11)" />
                <Tooltip 
                  contentStyle={{ 
                    backgroundColor: 'var(--color-neutral-2)', 
                    border: '1px solid var(--color-neutral-6)',
                    borderRadius: 'var(--radius-3)'
                  }}
                />
                <Legend />
                <Line type="monotone" dataKey="revenue" stroke="var(--color-accent-9)" strokeWidth={2} name="درآمد (تومان)" />
              </LineChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

        <Card className={styles.chartCard}>
          <CardHeader>
            <CardTitle>تعداد اشتراک‌های جدید</CardTitle>
          </CardHeader>
          <CardContent>
            <ResponsiveContainer width="100%" height={300}>
              <BarChart data={revenueData}>
                <CartesianGrid strokeDasharray="3 3" stroke="var(--color-neutral-6)" />
                <XAxis dataKey="date" stroke="var(--color-neutral-11)" />
                <YAxis stroke="var(--color-neutral-11)" />
                <Tooltip 
                  contentStyle={{ 
                    backgroundColor: 'var(--color-neutral-2)', 
                    border: '1px solid var(--color-neutral-6)',
                    borderRadius: 'var(--radius-3)'
                  }}
                />
                <Legend />
                <Bar dataKey="subscriptions" fill="var(--color-success-9)" name="اشتراک" />
              </BarChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>
      </div>

      <Card>
        <CardHeader>
          <div className={styles.tableHeader}>
            <CardTitle>آخرین تراکنش‌ها</CardTitle>
            <div className={styles.tableActions}>
              <input 
                type="month" 
                value={selectedMonth} 
                onChange={(e) => setSelectedMonth(e.target.value)}
                className={styles.monthPicker}
              />
            </div>
          </div>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>شناسه فاکتور</TableHead>
                <TableHead>کاربر</TableHead>
                <TableHead>نوع</TableHead>
                <TableHead>مبلغ</TableHead>
                <TableHead>وضعیت</TableHead>
                <TableHead>تاریخ</TableHead>
                <TableHead>عملیات</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {transactions.map((transaction) => (
                <TableRow key={transaction.id}>
                  <TableCell className={styles.invoiceId}>{transaction.invoiceId}</TableCell>
                  <TableCell>{transaction.user}</TableCell>
                  <TableCell>
                    <Badge variant="outline">
                      {transaction.type === 'subscription' && 'خرید اشتراک'}
                      {transaction.type === 'renewal' && 'تمدید'}
                      {transaction.type === 'refund' && 'بازگشت وجه'}
                    </Badge>
                  </TableCell>
                  <TableCell className={styles.amount}>{formatCurrency(transaction.amount)}</TableCell>
                  <TableCell>
                    <Badge 
                      variant={
                        transaction.status === 'pending' ? 'secondary' : 
                        transaction.status === 'failed' ? 'destructive' : 
                        'outline'
                      }
                    >
                      {transaction.status === 'completed' && 'موفق'}
                      {transaction.status === 'pending' && 'در انتظار'}
                      {transaction.status === 'failed' && 'ناموفق'}
                    </Badge>
                  </TableCell>
                  <TableCell className={styles.date}>{transaction.date}</TableCell>
                  <TableCell>
                    <Button variant="outline" size="sm">
                      <Download size={14} />
                      دانلود فاکتور
                    </Button>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  );
}