import { Link } from '@inertiajs/react';

import AdminPage from '@/Components/admin/AdminPage';
import { Badge } from '@/Components/ui/badge';
import { Card, CardContent, CardHeader, CardTitle } from '@/Components/ui/card';
import AdminLayout from '@/Layouts/AdminLayout';
import { formatDateTime } from '@/lib/format';
import type { AdminFeedbackSubmissionsShowProps } from '@/types/admin';

export default function FeedbackSubmissionsShow({ submission }: AdminFeedbackSubmissionsShowProps) {
  return (
    <AdminLayout>
      <AdminPage
        title={`Feedback #${submission.id}`}
        subtitle={submission.category ?? 'General'}
        breadcrumbs={[
          { label: 'Admin', href: '/admin' },
          { label: 'Feedback Submissions', href: route('admin.feedback-submissions.index') },
          { label: `#${submission.id}` },
        ]}
      >
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div className="text-sm">
            <span className="text-muted-foreground">Status</span>
            <div className="mt-1">
              <Badge variant={submission.status === 'resolved' ? 'success' : 'warning'}>
                {submission.status}
              </Badge>
            </div>
          </div>
          <div className="text-sm">
            <span className="text-muted-foreground">Submitted</span>
            <div className="mt-1 font-medium">{formatDateTime(submission.created_at)}</div>
          </div>
          {submission.resolved_at && (
            <div className="text-sm">
              <span className="text-muted-foreground">Resolved</span>
              <div className="mt-1 font-medium">{formatDateTime(submission.resolved_at)}</div>
            </div>
          )}
        </div>

        <Card>
          <CardHeader>
            <CardTitle>Message</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-sm whitespace-pre-wrap">{submission.message}</p>
            {submission.url && (
              <p className="mt-3 text-sm text-muted-foreground">
                URL:{' '}
                <a href={submission.url} target="_blank" rel="noopener noreferrer" className="hover:underline">
                  {submission.url}
                </a>
              </p>
            )}
          </CardContent>
        </Card>

        {submission.user_id && (
          <Card>
            <CardHeader>
              <CardTitle>User</CardTitle>
            </CardHeader>
            <CardContent className="text-sm space-y-1">
              <div>
                <Link href={`/admin/users/${submission.user_id}`} className="font-medium hover:underline">
                  {submission.user_name}
                </Link>
              </div>
              <div className="text-muted-foreground">{submission.user_email}</div>
            </CardContent>
          </Card>
        )}

        {submission.tags.length > 0 && (
          <Card>
            <CardHeader>
              <CardTitle>Tags</CardTitle>
            </CardHeader>
            <CardContent className="flex flex-wrap gap-2">
              {submission.tags.map((tag) => (
                <Badge key={tag.id} variant="outline">
                  {tag.name}
                </Badge>
              ))}
            </CardContent>
          </Card>
        )}

        {submission.changelog_entries.length > 0 && (
          <Card>
            <CardHeader>
              <CardTitle>Linked Changelog Entries</CardTitle>
            </CardHeader>
            <CardContent className="space-y-1">
              {submission.changelog_entries.map((entry) => (
                <div key={entry.id} className="text-sm">
                  {entry.title}
                </div>
              ))}
            </CardContent>
          </Card>
        )}
      </AdminPage>
    </AdminLayout>
  );
}