'use client';

import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
import { Gauge } from 'lucide-react';

import type { SurveyDistributionBucket } from '@alga-psa/types';
import { Card, CardContent, CardHeader, CardTitle } from '@alga-psa/ui/components/Card';
import { useTranslation } from '@alga-psa/ui/lib/i18n/client';

type SatisfactionDistributionProps = {
  distribution: SurveyDistributionBucket[];
};

const percentFormatter = new Intl.NumberFormat(undefined, {
  style: 'percent',
  maximumFractionDigits: 1,
});

export default function SatisfactionDistribution({ distribution }: SatisfactionDistributionProps) {
  const { t } = useTranslation('msp/surveys');

  return (
    <Card className="col-span-1 flex flex-col border-border-200 shadow-sm transition-shadow duration-200 hover:shadow-md">
      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-3">
        <CardTitle className="text-base font-semibold text-text-900">
          {t('dashboard.satisfactionDistribution.title', {
            defaultValue: 'Satisfaction Distribution',
          })}
        </CardTitle>
        <div className="rounded-lg bg-emerald-500/10 p-2 shadow-sm">
          <Gauge className="h-4 w-4 text-emerald-500" />
        </div>
      </CardHeader>
      <CardContent className="mt-2 flex-1">
        {distribution.length === 0 ? (
          <div className="flex h-48 flex-col items-center justify-center gap-3 rounded-lg bg-gradient-to-br from-emerald-500/5 to-transparent p-6">
            <div className="rounded-full bg-emerald-500/15 p-3">
              <Gauge className="h-6 w-6 text-emerald-500" />
            </div>
            <p className="text-center text-sm font-medium text-text-600">
              {t('dashboard.satisfactionDistribution.emptyTitle', {
                defaultValue: 'No survey ratings recorded yet.',
              })}
            </p>
            <p className="text-center text-xs text-text-500">
              {t('dashboard.satisfactionDistribution.emptyDescription', {
                defaultValue: 'Distribution will appear after feedback is collected.',
              })}
            </p>
          </div>
        ) : (
          <div className="h-64">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart data={distribution}>
                <CartesianGrid strokeDasharray="3 3" strokeOpacity={0.1} />
                <XAxis
                  dataKey="rating"
                  stroke="currentColor"
                  fontSize={12}
                  tickLine={false}
                  label={{
                    value: t('dashboard.satisfactionDistribution.axes.rating', {
                      defaultValue: 'Rating',
                    }),
                    position: 'insideBottom',
                    offset: -4,
                  }}
                />
                <YAxis
                  stroke="currentColor"
                  fontSize={12}
                  tickLine={false}
                  allowDecimals={false}
                  label={{
                    value: t('dashboard.satisfactionDistribution.axes.responses', {
                      defaultValue: 'Responses',
                    }),
                    angle: -90,
                    position: 'insideLeft',
                  }}
                />
                <Tooltip
                  cursor={{ fill: 'rgba(79, 70, 229, 0.05)' }}
                  contentStyle={{
                    backgroundColor: 'rgb(var(--color-card))',
                    borderColor: 'rgb(var(--color-border-200))',
                    borderRadius: '0.5rem',
                    color: 'rgb(var(--color-text-900))',
                  }}
                  formatter={(value: number, name: string) => {
                    if (name === 'percentage') {
                      return [
                        percentFormatter.format(value / 100),
                        t('dashboard.satisfactionDistribution.tooltip.percent', {
                          defaultValue: 'Percent',
                        }),
                      ];
                    }
                    if (name === 'count') {
                      return [
                        value,
                        t('dashboard.satisfactionDistribution.tooltip.responses', {
                          defaultValue: 'Responses',
                        }),
                      ];
                    }
                    return [value, name];
                  }}
                  labelFormatter={(label) =>
                    t('dashboard.satisfactionDistribution.tooltip.rating', {
                      defaultValue: 'Rating: {{label}}',
                      label,
                    })
                  }
                />
                <Bar
                  dataKey="count"
                  radius={[6, 6, 0, 0]}
                  fill="rgb(var(--color-primary-500))"
                  name="count"
                />
              </BarChart>
            </ResponsiveContainer>
          </div>
        )}
      </CardContent>
    </Card>
  );
}
