import { Link } from '@inertiajs/react';
import { AppLayout } from '@/Components/Layout/AppLayout';

type Voting = {
  id: number;
  title: string;
  description: string | null;
  startsAt: string;
  endsAt: string;
  status: string;
  resultsAvailable: boolean;
  alreadyVoted: boolean;
};

type Props = {
  votings: Voting[];
};

export default function StudentVotingList({ votings }: Props) {
  return (
    <AppLayout title="رأی‌گیری‌های فعال">
      <div className="page-stack">
        <section className="section-header">
          <div>
            <h2>
              <i className="bi bi-ballot" style={{ marginLeft: '0.5rem', color: 'var(--color-primary)' }} />
              رأی‌گیری‌ها
            </h2>
            <p>رأی‌گیری‌های فعال که می‌توانید در آن‌ها شرکت کنید.</p>
          </div>
        </section>

        {votings.length === 0 ? (
          <section className="panel-card">
            <div style={{ textAlign: 'center', padding: '2rem 1rem' }}>
              <div className="icon-badge" style={{ width: 56, height: 56, fontSize: '1.5rem', margin: '0 auto 1rem' }}>
                <i className="bi bi-ballot" />
              </div>
              <h2>رأی‌گیری فعالی وجود ندارد</h2>
              <p>در حال حاضر هیچ رأی‌گیری فعالی برای شرکت وجود ندارد.</p>
            </div>
          </section>
        ) : (
          <div className="card-grid">
            {votings.map((voting) => (
              <article
                key={voting.id}
                className="panel-card"
                style={{
                  display: 'flex',
                  flexDirection: 'column',
                  gap: '0.75rem',
                  borderColor: voting.alreadyVoted ? 'var(--color-primary-soft)' : undefined,
                  background: voting.alreadyVoted ? 'var(--color-primary-soft)' : undefined,
                }}
              >
                <div style={{ display: 'flex', alignItems: 'flex-start', gap: '0.75rem' }}>
                  <span className="icon-badge" style={{ flexShrink: 0 }}>
                    <i className="bi bi-ballot" />
                  </span>
                  <div style={{ flex: 1 }}>
                    <h3 style={{ margin: 0, fontSize: '1rem' }}>{voting.title}</h3>
                    {voting.description && (
                      <p style={{ margin: '0.25rem 0 0', fontSize: '0.875rem', color: 'var(--color-text-muted)' }}>
                        {voting.description}
                      </p>
                    )}
                  </div>
                  {voting.alreadyVoted && (
                    <span className="badge badge-success" style={{ flexShrink: 0 }}>
                      <i className="bi bi-check2-circle" /> رأی ثبت شد
                    </span>
                  )}
                </div>

                <div style={{ display: 'flex', gap: '1rem', fontSize: '0.82rem', color: 'var(--color-text-muted)' }}>
                  {voting.startsAt !== '—' && (
                    <span><i className="bi bi-calendar-event" style={{ marginLeft: '0.3rem' }} />از {voting.startsAt}</span>
                  )}
                  {voting.endsAt !== '—' && (
                    <span><i className="bi bi-calendar-x" style={{ marginLeft: '0.3rem' }} />تا {voting.endsAt}</span>
                  )}
                </div>

                {voting.resultsAvailable ? (
                  <Link
                    href={`/student/voting/${voting.id}/results`}
                    className="btn btn-primary"
                    style={{ textAlign: 'center' }}
                  >
                    <i className="bi bi-bar-chart" /> مشاهده نتایج
                  </Link>
                ) : voting.alreadyVoted ? (
                  <div
                    style={{
                      alignItems: 'center',
                      background: 'white',
                      border: '1px solid var(--color-primary-soft)',
                      borderRadius: 'var(--radius-sm)',
                      color: 'var(--color-primary-active)',
                      display: 'flex',
                      gap: '0.4rem',
                      fontSize: '0.875rem',
                      fontWeight: 700,
                      padding: '0.6rem 0.9rem',
                    }}
                  >
                    <i className="bi bi-check-circle-fill" />
                    شما در این رأی‌گیری شرکت کرده‌اید
                  </div>
                ) : (
                  <Link
                    href={`/student/voting/${voting.id}`}
                    className="btn btn-primary"
                    style={{ textAlign: 'center' }}
                  >
                    <i className="bi bi-hand-index" /> شرکت در رأی‌گیری
                  </Link>
                )}
              </article>
            ))}
          </div>
        )}
      </div>
    </AppLayout>
  );
}